Jquery-Yatay Açılır Menü Örneği

Kayıt
9 Nisan 2012
Mesaj
74
Tepki
9
Merhaba arkadaşlar Jquery menü örneklerine devam ediyoruz.

Bu konuda yatay,aşağıya doğru açılan jquery menü örneğini göreceğiz.Yine örneği kendi bilgisayarımızda denemek için gereken dosya yapısı nasıl olmalı ona bakalım..




css: Uygulamanın stil sayfası .css bu klasörün içinde.
images: Resim klasörü.
juery-1.3.2.js:Kullandığımız jqery kütüphanesinin versiyonu.
JqueryAsagiyaAcilanMenu.html: Uygulamayı tarayıcıda denediğimiz html sayfası.



Menünün Görünüşü

Çalışma Mantığı


Menü <ul> ve bu etiketin içindeki <li>,<a> ve <span> etiketlerinden oluşuyor.Örnekte <a> etiketlerinin içi boş bırakılmıştır.
a href="">

Burada tırnakların arasına gidilmesi istenen sayfaların adresleri gelecek.
Her bir <li> etiketi için ayrı class tanımlanarak fare üzerine geldiğinde arka plan resminin değişmesi sağlanmıştır.
Örnekte ben sadece anasayfa resmini ekledim.Diğerlerinin aynı boyutta tasarıma göre eklenmesi gerekiyor,çalışma mantığı aynıdır.Yazıların üzerine resim eklemek için style.css dosyasının içerisindeki satırlarda aşağıdaki düzenlemeyi yapmak yeterlidir.
Kod:
ul#navigation .hakkimizda a      {[CENTER]    background-image: url( );//---parantezin içine resmin adresi gelecek ve resim image klasöründe olacak.
[/CENTER]
}
Fare ile gelindiğinde yazıların hepsi büyük harfe dönüşüyor.Burada arka plan rengi,yazı tipi,çerçeve renkleri vb bir çok özellik tamamen bizim kontrolümüz altındadır. css klasöründeki style.css sayfasından istenen değişiklikler yapılabilir.

Menü,sayfa ilk yüklendiğinde dalgalanma efekti şeklinde yukarıya doğru kayar.
JqueryAsagiyaAcilanMenu.html sayfasında menünün aşağı açılma uzunluğunu kontrol eden bir bölüm vardır:

Kod:
                    $('a',$(this)).stop().animate({
                        'marginTop':'-57px'
                    },200);
Burdaki 'marginTop':'-57px' satırındaki -57'nin yerine değişik değerler girilebilir.Artı değerlere doğru yaklaştıkça menü aşağı doğru uzar.

Sayfalar

JqueryAsagiyaAcilanMenu.html
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
<meta http equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Jquery Asagiya Dogru Acilan Menü</title>
         <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
    </head>
    <style>
        body{
            font-family:Arial;
            height:2000px;
              }
    </style>
    <body>
            <ul id="navigation">
            <li class="anasayfa"><a href=""><span>Anasayfa</span></a></li>
            <li class="hakkimizda"><a href=""><span>Hakkımızda</span></a></li>
            <li class="urunler"><a href=""><span>Ürünler</span></a></li>
            <li class="hizmetler"><a href=""><span>Hizmetler</span></a></li>
            <li class="resimler"><a href=""><span>Resimler</span></a></li>
            <li class="subeler"><a href=""><span>Şubelerimiz</span></a></li>
            <li class="iletisim"><a href=""><span>İletişim</span></a></li>
        </ul>

        <script type="text/javascript" src="jquery-1.3.2.js"></script>
        <script type="text/javascript">
            $(function() {
                var d=300;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });

                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-52px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });
        </script>
    </body>
</html>
Yukardaki html kodunda title etiketinin üstündeki http equiv kelimesinin arasında orta tire(-) olacak.Ben kopyala-yapıştır yaptığım zaman bu kelime *** şeklinde göründüğü için tireyi yazmadım.

style.css
Kod:
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:890px;/*Menü bu degerle saga-sola çekilebilir*/
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;    
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#81CCE9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
     border-color:#4A26CC;
     border-width:2px;
}
ul#navigation li a:hover{
     background-color:#6AC0E8;
     border-color:#A91F25;
     border-width:2px;

}
ul#navigation li a span{
    letter-spacing:2px;
    font-weight:bold;
    font-size:11px;
    color:#0201C9;
 
}
ul#navigation li a span:hover{
    font-size:12px;
    font-weight:bold;
    color:#F90D02;
    text-transform: uppercase;
}

ul#navigation .anasayfa a{
    background-image: url(../images/ev.png);
    background-position:0px 55px;
     }
ul#navigation .hakkimizda a      {
    background-image: url( );
}
ul#navigation .hizmetler a      {
    background-image: url( );
}
ul#navigation .resimler a      {
    background-image: url( );
}
ul#navigation .subeler a   {
    background-image: url( );
}
ul#navigation .urunler a     {
    background-image: url( );
}
ul#navigation .iletisim a    {
    background-image: url( );
}
[CENTER] 
[/CENTER]

juery-1.3.2.js
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js&quot;

Canlı Önizleme ve Resimleri İndirmek İçin
http://www.teknik-web.com/jquery3.html

Kolay gelsin..
 
Yukarı Alt