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.

 

 

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

  1.  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
  2. menu zaten yatayda. dikeymi demek istediniz ? suan biraz mesgulum. bi ara dikey gösterim için bakar burdan paylasirim sizinle.

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

  5. Seher hanim çok iyi Olmus ben çok beyendim valla eline saglik.. devamini bekleriz javaya asik oluyorum galiba ((: yildirim misali :))

sarpich için bir cevap yazın Cevabı iptal et

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