hibycocuk

hibycocuk

jQuerykwickmenu

JQuery kwick menu

Yazar: Emre Çördükler | Yayın Tarihi: 07 Şubat 2011 | Yorum Kategori: Css Htm jQuery Menü

Css Ekleniz
body{
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;

}
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
background-image:url(https://img.webme.com/pic/h/hibycocuk/no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/

}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: left;
width: 125px;
height: 40px;
margin-right: 0px;
background-image:url(https://img.webme.com/pic/h/hibycocuk/kwicks_sprite.jpg);
background-repeat:no-repeat;
}
.kwicks a{
display:block;
height:40px;
text-indent:-9999px;
outline:none;
}

#kwick1 {
background-position:0px 0px;
}
#kwick2 {
background-position:-200px 0px;
}
#kwick3 {
background-position:-400px 0px;
}
#kwick4 {
background-position:-600px 0px;
}

#kwick1.active, #kwick1:hover {
background-position: 0 bottom;
}
#kwick2.active, #kwick2:hover{
background-position: -200px bottom;
}
#kwick3.active, #kwick3:hover {
background-position: -400px bottom;
}
#kwick4.active, #kwick4:hover {
background-position: -600px bottom;
}

#kwick1 a{
background-image:url(https://img.webme.com/pic/h/hibycocuk/end.jpg);
background-repeat:no-repeat;
background-position: left 0px;
}

#kwick1 a:hover{
background-position: left -80px;
}

#kwick4 a{
background-image:url(https://img.webme.com/pic/h/hibycocuk/end.jpg);
background-repeat:no-repeat;
background-position: right -40px;
}
#kwick4 a:hover{
background-position: right -120px;
}

Tasarım altı üstü Ekleniz

<script type='text/javascript' src='http://hibycocuk.funpic.org/calismalar/1/jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='http://hibycocuk.funpic.org/calismalar/1/kwicks.js'></script>
<script type='text/javascript' src='http://hibycocuk.funpic.org/calismalar/1/custom.js'></script>

 <ul class="kwicks">  
     <li id="kwick1"><a href="#">Home</a></li>  
     <li id="kwick2"><a href="#">Contact</a></li>  
     <li id="kwick3"><a href="#">Downloads</a></li>  
     <li id="kwick4"><a href="#">Search</a></li>  
 </ul>   

  Önizlemesi (jQuery kwick menu)

  jQuery kwick menu Şifre: hibycocuk.tr.gg

Yardım isteklerinizi lütfen yorumlar kısmına yazmayın. İletişim formundan bana ulaşabilirsiniz.

Yorum ve Görüşlerinizi Eksik etmeniz (:

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol