معنا اليوم قائمة عمودية انيقة تم عملها باستخدام اكواد css3 وهي خالية من اية اخطاء كما انها لاتؤثر على سرعة التصفح عكس قوائم الجافا سكريبت
يمكنك معاينة القائمة على مدونتي
اولا كود css
#top_navigation {
background : transparent;
width: 800px;
height : 77px;
list-style : none;
margin-top : 7px;
margin-bottom : 11px;
width : 100%;
}
ul.nav {
background : transparent;
width: 800px;
height : 57px;
line-height : 31px;
list-style : none;
padding : 0 10px;
font-size : 14px;
}
ul.nav li {
display : inline;
padding : 0;
background : transparent;
}
ul.nav a {
background : transparent;
height : 30px;
font-size : 16px;
color : #808080;
float : right;
padding : 11px 19px 11px 16px;
text-decoration : none;
border-top: 1px solid #252525;
border-bottom : 4px solid #252525;
border-left : 1px solid transparent;
border-right : 1px solid transparent;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
ul.nav a:hover {
background : #AA3232;
border-top : 1px solid #252525;
border-bottom : 4px solid #000;
border-left : 1px solid #252525;
border-right : 1px solid #252525;
color : #FFF;
padding : 11px 19px 11px 16px;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
لتغيير لون تأثير الهوفر ابحث عن هذا الكود #AA3232
كما يمكنك التحكم في ابعاد القائمة حسب متطلبات موقعك
ثانيا كود html
<div id="top_navigation">
<ul class="nav">
<li><a href="الرابط"> الرئيسية </a></li>
<li><a href="الرابط"> تعديل </a></li>
<li><a href="الرابط"> تعديل </a></li>
<li><a href="الرابط"> تعديل </a></li>
<li><a href="الرابط">تعديل </a></li></ul></div>
لاضافة عصنر من القائمة فقط اضف الكود التالي
<li><a href="الرابط"> تعديل </a></li>
المدونة مفتوحة لاستفساراتكم وتعليقاتكم
إشترك لتحصل على جديد المواضيع
