الهجان مستر وليد فريد
ادعية لوجة الله : عدد المساهمات : 4697 تاريخ الميلاد : 04/07/1975 تاريخ التسجيل : 21/09/2009 العمر : 48
| موضوع: قائمة عمودية احترافية بتقنية HTML5 - CSS3 الجمعة مايو 02 2014, 15:32 | |
| قائمة عمودية احترافية بتقنية HTML5 - CSS3 هناك نوعان من القوائم في HTML، العمودي، والأفقي. موضوع اليوم هو كيفية إنشاء قائمة عمودية أنيقة " Vertical Navigation Menu" بتقنية HTML5 و CSS3. سوف أشرح لك كيفية إنشاء قائمة منزلقة و متحركة بدون الحاجة لإستخدام جافا سكريبت. دعونا نبدأ. صورة : مثال مباشر : هنا الأكواد : CSS - اقتباس :
-
- الكود:
-
* { margin: 0; padding: 0; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { background: #eee; color: #444; -webkit-font-smoothing: antialiased; font-family: 'Helvetica Neue', sans-serif; font-size: 20px; font-weight: 400; height: auto !important; height: 100%; min-height: 100%; text-rendering: optimizeLegibility; }
div.wrapper { margin: 20px auto; width: 350px; }
p { font-family: georgia; font-size: 1rem; line-height: 25px; margin: 24px 0; text-align: center; }
nav.vertical { border-radius: 4px; box-shadow: 0 0 10px rgba(0,0,0,.15); overflow: hidden; text-align: center; }
nav.vertical > ul { list-style-type: none; }
nav.vertical > ul > li { display: block; }
nav.vertical > ul > li > a { background-color: rgb(157, 34, 60); background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60)); background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60)); background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60)); background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60)); border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1); color: rgb(255,255,255); display: block; font-size: .85rem; font-weight: 500; height: 50px; letter-spacing: .5rem; line-height: 50px; text-shadow: 0 1px 1px rgba(0,0,0,.1); text-transform: uppercase; transition: all .1s ease; text-decoration: none; }
nav.vertical > ul > li > a:hover { background-color: rgb(114, 51, 98); background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); cursor: pointer; } nav.vertical > ul > li > div { background-color: rgb(255,255,255); } nav.vertical > ul > li > div > ul { list-style-type: none; }
nav.vertical > ul > li > div > ul > li > a { background-color: rgb(255,255,255); border-bottom: 1px solid rgba(0,0,0,.05); color: #333331; display: block; font-size: 1.1rem; padding: 10px 0; text-decoration: none; transition: all 0.15s linear; }
nav.vertical > ul > li > div > ul > li:hover > a { background-color: lightBlue; color: rgb(255,255,255); padding: 10px 0 10px 50px; }
HTML - الكود:
-
<div class="wrapper"> <nav class="vertical"> <ul> <li> <a href="#">الرئيسية</a> <div> <ul> <li><a href="#">قائمة 1</a></li> <li><a href="#">قائمة 2</a></li> <li><a href="#">قائمة 3</a></li> <li><a href="#">قائمة 4</a></li> </ul> </div> </li> <li> <a href="#">الزعيم</a> <div> <ul> <li><a href="#">قائمة 1</a></li> <li><a href="#">قائمة 2</a></li> <li><a href="#">قائمة 3</a></li> </ul> </div> </li> <li> <a href="#">الزعيم</a> <div> <ul> <li><a href="#">قائمة 1</a></li> <li><a href="#">قائمة 2</a></li> <li><a href="#">قائمة 3</a></li> </ul> </div> </li> </ul> </nav> <p><em> قائمة عمودية احترافية <a href="http://www.zaiim.com" target="_blank">الزعيم</a>.</em></p> </div> طريقة التركيب : كيفية إضافة قائمة عمودية احترافية بتقنية HTML5 - CSS3 - الخطوة 1 انتقل إلى لوحة التحكم . الآن الذهاب إلى قالب> تحرير HTML . إبحث عن - الكود:
-
]]></b:skin> فقط فوقه قم بلصق الكود الاول "CSS" و إضغط حفظ . - الخطوة 2 إذهب إلى لوحة تحكم بلوجر. اختر تخطيط. إضغط علي إضافة أداة. إختر - الكود:
-
HTML/Javascript. أضف الكود الثاني "HTML" وإضغط حفظ. | |
|