JQuery Kullanarak Hareketli ve Sik Bir Menu Tasarlamak

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>

 

 Simdi sirada jquery’i eklemek var. Jquery dosyasini buradan indirebilirsiniz. Jquery dosyamiza eklemek için asagidaki scripti sayfamiza ekleyelim.

<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.

 

 

Tags:

6 thoughts on “JQuery Kullanarak Hareketli ve Sik Bir Menu Tasarlamak

  •  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.

         Ikinci olarak da , jquery kullanarak bir fotograf galerisi yapmam gerekli fakat hiç bir bilgim
  • 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?

  • ul#topnav
    {
          margin: 0;
          padding: 0;
          list-style: none;
          float: left;
          font-size: 1.1em;
    }
    
    kismindaki  font-size: 1.1em; degistirerek deneme yapin
    
    
  • 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 :))

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir