jQuery Süper bir menü örneği.

Özelliği : Menü Tek resim halind e duruyor fakat websayfasından baktığınız zaman 12 farklı resim gibi görünüyor bu kısımda yapmanız gereken tek resim üzerinde birleşmiş olan bölümleri örnek ben kendime göre uyarladım blog forum iletişim vs artık size de tek düşen bu resmi kendi sitenize göre uyarlamak.

Aşağıdaki  demo  linkinden örneğin çalışır  bir  uygulamasını ve  sitenize  ekleyeceğiniz  olan kodları  bulabilirsiniz. Rar  olarak  sıkıştırılmış  olan örneğin  çalışan bir  halininde  indirme linkinden indirebilirsiniz.

 Kullanım

• Head etiketleri arasına eklenmesi gereken bölümler.

jQuery ve eklenti url adresleri : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script><script src="jquery.easing.js" type="text/javascript"></script>

 JavaScript : 

<script type="text/javascript"><!-- function main_kwicks(){ $('.kwicks').kwicks({ maxWidth: 190, duration: 800, easing: 'easeOutQuint' }); } function stardust(){ var mysrc = ''; } function starhover(){ var my_kwickitem = $('.kwicks li'); my_kwickitem.mouse(function(){ switch ($(this).attr('id')) { case "jquery_menu1": var my_position = 10; break; case "jquery_menu2": var my_position = 116; break; case "jquery_menu3": var my_position = 222; break; case "jquery_menu4": var my_position = 328; break; case "jquery_menu5": var my_position = 434; break; case "jquery_menu6": var my_position = 540; break; default: var my_position = 0; } particles.css({left: my_position, display:'block'}) }); my_kwickitem.mouseout(function(){particles.css({display:'none'}) }); } function my_smothscroll(){ $('a[href*=#]').click(function() { if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body') .animate({scrollTop: targetOffset}, 700); return false; } } }); } $(document).ready(function(){ main_kwicks(); }); //-->
</script>

Css:

a{ color:#000000}
BODY  { }

.kwicks  { background-color: #000; list-style-type: none; margin: 0; padding: 0; position: relative; z-index: 2; width: 840px; height: 50px }
.kwicks LI {PADDING: 0px; DISPLAY: block;Z-INDEX: 2; FLOAT: left;OVERFLOW: hidden; WIDTH: 120px; CURSOR: pointer;HEIGHT: 50px}
.kwicks LI A     { background-image: url(image/yesil1.png); background-repeat: no-repeat; text-indent: -9999px; cursor: pointer; display: block; z-index: 2; height: 50px; outline: none medium }
#jquery_menu1 A {BACKGROUND-POSITION: 0px 0px}
#jquery_menu1 A:hover {BACKGROUND-POSITION: 0px -50px}
#jquery_menu1 #aktiv {BACKGROUND-POSITION: 0px -50px}
#jquery_menu2 A {BACKGROUND-POSITION: -190px 0px}
#jquery_menu2 A:hover {BACKGROUND-POSITION: -190px -50px}
#jquery_menu2 #aktiv {BACKGROUND-POSITION: -190px -50px}
#jquery_menu3 A {BACKGROUND-POSITION: -380px -50px}
#jquery_menu3 A:hover {BACKGROUND-POSITION: -380px 0px}
#jquery_menu3 #aktiv {BACKGROUND-POSITION: -380px -50px}
#jquery_menu4 A {BACKGROUND-POSITION: -570px 0px}
#jquery_menu4 A:hover {BACKGROUND-POSITION: -570px -50px}
#jquery_menu4 #aktiv {BACKGROUND-POSITION: -570px -50px}
#jquery_menu5 A {BACKGROUND-POSITION: -760px 0px}
#jquery_menu5 A:hover {BACKGROUND-POSITION: -760px -50px}
#jquery_menu5 #aktiv {BACKGROUND-POSITION: -760px -50px}
#jquery_menu6 A {BACKGROUND-POSITION: -950px 0px}
#jquery_menu6 A:hover {BACKGROUND-POSITION: -950px -50px}
#jquery_menu6 #aktiv {BACKGROUND-POSITION: -950px -50px}

•  Body etiketleri arasına eklenmesi gereken bölüm.

Html : 

<div class="kwicks">
<ul>
 	<li><a href="http://mintik.com">Blog</a></li>
 	<li><a href="http://mintik.com">Link Ekle</a> <!-- id=aktiv href="#">Blog</A> --></li>
 	<li><a href="http://mintik.com">iletişim</a></li>
 	<li><a href="http://mintik.com">Hakkinda</a></li>
 	<li><a href="http://mintik.com">Forum</a></li>
 	<li id="jquery_menu6"><a href="http://mintik.com">Mesaj</a></li>
</ul>
</div>