1 كود ناف بار بتقنية جديدة فقط على عيون ديزاد الإثنين فبراير 13, 2012 10:15 pm
نسيم الشرق
عضو فعال| ₪|سلامٌ عليكم و رحمةٌ من اللهِ و بركاته | ₪| ..
مرحباً بكم أيها الكرام من أعضاء و زوار عيون ديزاد من كل مكان
كود ناف بار بتقنية جديدة فقط على عيون ديزاد
معاينة
كود ال HTML
- الكود:
<div class="navi1">
<ul>
<li class="sm1"><a href="رابط الاول"></a></li>
<li class="sm2"><a href="رابط الثاني"></a></li>
<li class="sm3"><a href="رابط الثالث"></a></li>
<li class="sm4"><a href="رابط الخامس"></a></li>
<li class="sm5"><a href="رابط السادس"></a></li>
</ul>
</div>
كود ال css
- الكود:
.navi1 {
display:block;
height:72px;
margin:0 auto;
position:relative;
width:525px; }
.navi1 ul {
float:none;
list-style-image:none;
list-style-type:none;
margin:3px 0; }
.navi1 ul li {
background-image:url(http://i45.servimg.com/u/f45/16/15/12/72/tab-210.png);
background-repeat:no-repeat;
float:left;
height:72px;
margin:0px;
padding-top:5px;
position:absolute; }
.navi1 ul li a {
display:block;
height:100%;
width:100%; }
.navi1 ul li.sm1 {
background-position:0 0;
left:0px;
width:125px; }
.navi1 ul li.sm2 {
background-position:-125px 0;
left:100px;
width:124px; }
.navi1 ul li.sm3 {
background-position:-249px 0;
left:200px;
width:124px; }
.navi1 ul li.sm4 {
background-position:-373px 0;
left:300px;
width:125px; }
.navi1 ul li.sm5 {
background-position:-498px 0;
left:400px;
width:126px; }
.navi1 ul li:hover {
z-index:1000; }
.navi1 ul li.sm1:hover {
background-position:0 -75px; }
.navi1 ul li.sm2:hover {
background-position:-125px -75px; }
.navi1 ul li.sm3:hover {
background-position:-249px -75px; }
.navi1 ul li.sm4:hover {
background-position:-373px -75px; }
.navi1 ul li.sm5:hover {
background-position:-498px -75px; }
و إلى هنا اخوانيـ
..ينتهي موضوعنا لهذا اليوم ..
في أمل اللقاء
بكمـ .إن شاء الله في مواضيع جديدة ..
والسلام عليكم و رحمة الله