CSS ve jQuery ile Hareketli Menü Örnegi
Bu makalede jquery kullanarak basit ve sik bir hareketli menü örnegi tasarlamaya çalisacagiz. Öncelikle menümüzde bulunacak linkleri html olarak tasarlayalim:
<div style="width: 895px"> <ul id="topnav"> <li><a href="#">Anasayfa </a></li> <li><a href="#">Hizmetler </a></li> <li><a href="#">Portföy </a></li> <li><a href="#">Blog </a></li> <li><a href="#">Hakkinda</a></li> <li><a href="#">Iletisim </a></li> </ul> </div> |
Ikinci olarak tasarimimiza bir css ekleyerek menümüzün seklini degistiriyoruz.
Css kodu asagida. Bu kodu kendi istedigimiz gibi degistirebiliriz.
<style type="text/css"> ul#topnav { margin: 0; padding: 0; list-style: none; float: left; font-size: 1.1em; } ul#topnav li { margin: 0; padding: 0; overflow: hidden; float: left; height: 40px; } ul#topnav a, ul#topnav span { padding: 10px 20px; float: left; text-decoration: none; color: #fff; background: url( ‘http://www.yazilimmutfagi.com/demo/demo1/images/a.jpg’ ) repeat-x; text-transform: uppercase; clear: both; width: 100%; height: 20px; line-height: 20px; } ul#topnav span { display: none; } ul#topnav a { background-position: left bottom; background: url( ‘http://www.yazilimmutfagi.com/demo/demo1/images/b.jpg’ ) repeat-x; color: #000066; } ul#topnav span { background-position: left top; } </style> |
<script type="text/javascript" src="http://www.yazilimmutfagi.com/demo/demo1/jquery-1.3.2.min.js"> </script> |
Simdide asil fonksiyonu yapacak ve jquery’i kullanan javascript kodumuzu yazalim.
<script type="text/javascript"> $(document).ready(function() { $("#topnav li").prepend("<span></span>"); $("#topnav li").each(function() { var linkText = $(this).find("a").html(); $(this).find("span").show().html(linkText); }); $("#topnav li").hover(function() { $(this).find("span").stop().animate({ marginTop: "-40" }, 250); }, function() { $(this).find("span").stop().animate({ marginTop: "0" }, 250); }); }); </script> |
Hepsi bu kadar. Çok basit bir sekilde animasyonlu bir menü olusturduk.
Olusan ekranimiz:Yaptigimiz örnegin demosunu buradan görebilirsiniz.
elinize saglik paylasim güzel olmus fakat benim bir problemim var bunu yaptiktan sonra iletisim referans vb. tiklanabilir seceneklere tikladiktan sonra sayfa degistirmesini istiyorum bunu nasil yapabilirim.
menu zaten yatayda. dikeymi demek istediniz ? suan biraz mesgulum. bi ara dikey gösterim için bakar burdan paylasirim sizinle.
Thanks ‘msk’. Peki Menu yu Yatay nasil yapabiliriz?
Meu çok güzell Parmaklariniza saglik. baa menu nun yazi boyutu çok büyük geldi ve menümüzü yayinladiginiz demo’daki gibi yapmak için nereyi degistirmemiz gerekiyor
Seher hanim çok iyi Olmus ben çok beyendim valla eline saglik.. devamini bekleriz javaya asik oluyorum galiba ((: yildirim misali :))