Bilgiyi Kullanırsan Büyürsün,Paylaşırsan Efsane Olursun..

Acilirmenuyap

Css3 ve jQuery ile Youtube Benzeri Açılır Menü Yapımı

Merhabalar. Bildiğiniz üzere Youtube kısa bir süre önce tasarımını değiştirdi. Bir takım küçük değişikliklerle tasarımın hem sade hem de daha kullanışlı tutulmaya çalışıldığını görüyoruz. Bana kalırsa bu konuda oldukça başarılı gidiyorlar.
Youtube’da üye girişi yaptıktan sonra üst sağ alanda yer alan navigasyon sadeliği ve etkili görünümü ile çok hoşuma gitti. Bu yazımızda bu tarz bir menü sistemini basit kodlar yazarak nasıl yapabileceğimizi anlatacağız.

UYGULAMA ÖNİZLEME

UYGULAMA İNDİR

XHTML
Öncelikle her zaman olduğu gibi Xhtml kodlarımızı yazarak başlayalım.

<div id="youmenu">

                        <ul>

                        <li><a href="#">Anasayfa</a></li>

                        <li><a href="#" class="menu">Seçenekler<span>ok</span></a>

                        <ul class="menualani">

                        <li><a href="#">Hesabınız</a></li>

                        <li><a href="#">Mesajlarınız</a></li>

                        <li><a href="#">Favorileriniz</a></li>

                        <li><a href="#">İzledikleriniz</a></li>

                        </ul>

                        </li>

                        <li><a href="#" class="cikis">Oturumu Kapatın</a></li>

                        <br style="clear:both" />

                        </ul>

                        </div>

CSS
Şimdi menümüzün görünümünü düzenleyecek olan Css kodlarımızı yazıyoruz.


                        /* MENÜ STİLLERİMİZİ TANIMLAMAYA BAŞLIYORUZ */
                        #youmenu {

                        font:13px arial, verdana, sans-serif;

                        display:block;

                        }
                        /* Menü bağlantılarımızı tanımlıyoruz... */

                        #youmenu ul a {

                        text-decoration:none;

                        color:#333;

                        display:block;

                        margin:0px 5px 0px 5px;

                        padding:4px 10px 4px 10px;

                        background:#fff;

                        border-top:1px solid #fff;

                        border-left:1px solid #fff;

                        border-right:1px solid #ccc; /* Sağ tarafta 1px solid bir kenarlık bırakıyoruz. */

                        border-bottom:1px solid #fff;

                        outline:none;

                        zoom:1;

                        }
                        #youmenu ul a:hover {

                        text-decoration:none;

                        color:#333;

                        display:block;

                        margin:0px 5px 0px 5px;

                        padding:4px 10px 4px 10px;

                        background:#fff url(menuarkaplan.png) repeat-x; /* Arkaplan resmimizi tanımladık */

                        border:1px solid #666;

                        outline:none;
                        -moz-box-shadow:0px 0px 4px #333; /* Fare üzerine gelince bağlantı alanımızın biraz gölge kazanmasını sağlıyoruz */

                        -webkit-box-shadow:0px 0px 4px #333; /* Gölge işlemini Chrome ve Safari için yapıyoruz. */

                        box-shadow:0px 0px 4px #333; /* Opera'yı da unutmayalım  */
                        /* IE için gölge işlemini yapıyoruz, bundan sonraki alanlarda yer alan gölge tanımlamalarını IE için yine aynı şekilde yapacağız. */

                        filter: progid:DXImageTransform.Microsoft.dropShadow(color=#333333, offX=1, offY=1, positive=true);

                        zoom:1;

                        }
                        #youmenu li, #youmenu ul {

                        float:left;

                        position:relative;

                        margin:0px;

                        padding:0px;

                        list-style:none;

                        display:block

                        }
                        #youmenu li ul { /* Menümüzün alt birimlerini display:none tanımıyla gizliyoruz */

                        display:none;

                        position:relative;

                        }
                        /* Menümüzde açılacak olan bağlantı birimini işaret etmesi için span etiketine bazı değerler atıyoruz */

                        #youmenu span {

                        background-image: url("ok.png") ;

                        background-repeat:no-repeat;

                        background-position: center right;

                        display:block;

                        float:right;

                        padding:0;

                        margin:0;

                        width:16px;

                        height:16px;

                        text-indent:-9999px;

                        }
                        /* Bu alandan sonra yapılan tanımlamalar açılır menümüz için... */
                        #youmenu ul.menualani {

                        border:1px solid #333;

                        display:none;

                        position:absolute;

                        padding:0px;

                        margin:2px 0px 0px 5px;

                        list-style:none;

                        -moz-box-shadow:0px 1px 2px #666;

                        -webkit-box-shadow:0px 1px 2px #666;

                        box-shadow:0px 1px 2px #666;

                        filter: progid:DXImageTransform.Microsoft.dropShadow(color=#333333, offX=1, offY=1, positive=true);

                        zoom:1;

                        }
                        #youmenu ul.menualani a {

                        display:block;

                        color:#666;

                        float:left;

                        text-decoration:none;

                        background:#fff;

                        width:120px;

                        padding:4px;

                        margin:0;

                        border:none;

                        }
                        #youmenu ul.menualani a:hover {

                        display:block;

                        color:#333;

                        float:left;

                        text-decoration:none;

                        background:#eaeaea;

                        width:120px;

                        padding:4px;

                        margin:0;

                        border:none;

                        -moz-box-shadow:0px 0px 0px #333;

                        -webkit-box-shadow:0px 0px 0px #333;

                        box-shadow:0px 0px 0px #333;

                        filter: progid:DXImageTransform.Microsoft.dropShadow(color=#333333, offX=0, offY=0, positive=true);

                        zoom:1;

                        }
                        #youmenu a.cikis {color:#2e83ff;border:1px solid #fff}

                        #youmenu a.menu {color:#333}

Neler Yaptık?
Bu aşamaya kadar neler yaptığımızdan kısaca bahsetmek istiyorum. Menümüze Youmenu ismini verdiğimiz bir id tanımlayarak başladık. Sonrasında klasik bir Ul Li menü kodu yazdık. Bu menü içinde alt menü şeklinde görünmesini istediğimiz ana menü bağlantımıza class=”menu” şeklinde bir sınıf tanımı verdik. Bu tanımdan daha sonra yararlanacağız. Alt menülerimizin stil tanımlamasını ise “menualani” isimli sınıfımızla yaptık. Menümüz bu aşamaya kadar klasik bir menü görünümü ve özelliği taşımakta.

İşte klasik bir görünüm ve özellikte olan bu menümüzü Css ile şekillendireceğiz. Css kodlarının uzunluğundan bu uygulamanın aslında tamamen Css’de bittiğini söyleyebilirim. Zira hem Xhtml hem de jQuery kodlarımız oldukça kısa.

Css tanımlamalarında dikkat edeceğiniz nokta #Youmenu isimli id içinde tanımladığımız A etiketi. A etiketinin görünümünü tıpkı Youtube sitesinde olduğu gibi düzenledik. Bu görünümü oluşturabilmek için Css3′de tanımlanan box-shadow parametresinden yararlandık. Bu parametreyi uzun uzadıya anlatmayacağım. Çünkü Yatay Gölge Menü Yapımı isimli yazımızda uzunca bu parametreden bahsettik. Dilerseniz o yazıdan yararlanabilirsiniz.

Menümüzde açılacak olan bağlantıya vurgu yapabilmek adına Span etikene bir takım tanımlamalar yaptık. Burada ben Youtube tasarımına benzetebilmek için bir aşağı ok kullandım ve bunu arkaplan resmi olarak tanımladım. Uygun değerleri verdikten sonra açılmasını istediğim menü birimine Xhtml koduyla ekledim. Biraz karışık gelebilir ama kodları incelerseniz ne kadar kolay olduğunu görürsünüz.

Menümüzün alt birimlerini ise Ul etiketi için oluşturduğumuz menualani isimli sınıfta tanımladık. Bu alanda alt menülerimizin nasıl bir görünüme sahip olacağını belirledik.

İşin jQuery boyutunda ise menümüzün açılır hale gelmesi için çok kısa bir kod kullandık. Sanıyorum daha önceki yazılarımızdan birinde de jQuery’nin slideToggle fonksiyonundan yararlanmıştık. jQuery kodunda görebileceğiniz gibi daha önce tanımladığımız menu sınıf ismine sahip a etiketine tıklanınca menualani isimli sınıfın slayt şeklinde açılmasını istedik. Uygulamanın en kolay noktası bu galiba

Tarayıcı Uyumu
Şayet Css kodlarını incelediyseniz box-shadow etkisini Internet Explorer’da yakalayabilmek için filter kullandığımı görürsünüz. Aslına bakarsanız bu durumdan nefret ediyorum. Çünkü IE gibi ilkel bir tarayıcıya hala tasarımlarımızı anlatmak, kanıtlamak zorunda olmamız hiç hoşuma gitmiyor. Ne yazık ki ziyaretçilerimizden gelen talep bu yönde. Bundan sonraki yazılarda elimden geldiğince bu konuya dikkat edeceğim.

IE engelini de aştıktan sonra rahatlıkla söyleyebilirim ki bu uygulamamız tüm tarayıcılarda hemen hemen benzer şekilde görünecektir. Ben kontrollerimi yaptım ama sizler de kendi tarayıcılarınızda test ederseniz sevinirim.

Umarım sizler için faydalı olmuştur. Bir diğer makalemizde görüşmek üzere.