CSS Menü Yapımı

Web siteniz için üzerine gelindiğinde açılan ağaç menü yapmak istiyorsanız, bu ders tam size göre. Bu derste javascript kullanmadan CSS ile Menü Yapımını göstereceğim. Öncelikle yapacağımız menü sitenizin ana menüsü olduğunu varsayalım. Ve bu menüde yer alan butonlar üzerine geldiğimizde o menüye ait alt menüler açılsın istiyoruz. Bunu yapmak için öncelikle menümüzün HTML yapısını oluşturalım.

HTML Kodları :

<nav id="myMainNavigation">
    <ul>
        <li><a href="#">Anasayfa</a></li>
        <li>
            <a href="#">Kurumsal</a>
            <ul>
                <li><a href="#">Hakkımızda</a></li>
                <li><a href="#">Marka Kimliği</a></li>
                <li><a href="#">Son Haberler</a></li>
            </ul> 
        </li>
        <li>
            <a href="#">Ürünler</a>
            <ul>
                <li>
                    <a href="#">Ürün Grubu 1</a>
                    <ul>
                        <li><a href="#">Ürün 1.1</a></li>
                        <li><a href="#">Ürün 1.2</a></li>
                        <li><a href="#">Ürün 1.3</a></li>
                    </ul> 
                </li>
                <li>
                    <a href="#">Ürün Grubu 2</a>
                    <ul>
                        <li><a href="#">Ürün 2.1</a></li>
                        <li><a href="#">Ürün 2.2</a></li>
                        <li><a href="#">Ürün 2.3</a></li>
                        <li><a href="#">Ürün 2.4</a></li>
                    </ul> 
                </li>
                <li>
                    <a href="#">Ürün Grubu 3</a>
                    <ul>
                        <li><a href="#">Ürün 3.1</a></li>
                        <li><a href="#">Ürün 3.2</a></li>
                    </ul> 
                </li>
            </ul> 
        </li>
        <li><a href="#">İnsan Kaynakları</a></li>
        <li><a href="#">İletişim</a></li>
    </ul>
</nav>

<ul>

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

<li>

<a href="#">Kurumsal</a>

<ul>

<li><a href="#">Hakkımızda</a></li>

<li><a href="#">Marka Kimliği</a></li>

<li><a href="#">Son Haberler</a></li>

</ul>

</li>

<li>

<a href="#">Ürünler</a>

<ul>

<li>

<a href="#">Ürün Grubu 1</a>

<ul>

</ul>

</li>

<li>

<a href="#">Ürün Grubu 2</a>

<ul>

</ul>

</li>

<li>

<a href="#">Ürün Grubu 3</a>

<ul>

</ul>

</li>

</ul>

</li>

<li><a href="#">İnsan Kaynakları</a></li>

<li><a href="#">İletişim</a></li>

</ul>

</nav>

Yukarıdaki kodlar, CSS menü yapımı için gerekli html yapısını oluşturmaya yetecektir. Bu şekilde html yapısını oluşturduğumuzda, karşımıza bir liste gurubu gelecek. Şimdi bu listeyi, CSS ile süsleyerek, güzel bir menü haline getirmeliyiz.

CSS menü yapımı HTML görüntü

CSS Kodları :

/* Öncelikle menümüzün içinde yer alacağı kutuyu düzenleyelim... */
#myMainNavigation {
    background-color: darkcyan; 
    border-radius: 5px; 
    font-family: verdana; 
    margin: 30px auto; 
    padding: 5px;
    text-align: center;
    width: 960px;
}

/* Listenin stil özelliklerini sıfırlayalım...  */
#myMainNavigation ul {
    font-size: 0; /* font boyutunu sıfırlıyoruz */
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

/* Alt kademelerdeki menülerin (UL) konumlandırma refeansı olarak bir üstündeki Lİ'leri kabul etmesi için Tüm Lİ'leri relative yapıyoruz. */
#myMainNavigation ul li { 
    padding: 0 5px; position: relative; 
}

/* İlk kademe dışındaki alt menüleri gizlememiz gerekli, */ 
#myMainNavigation ul li > ul { 
    display: none; 
}

/* İlk kademedeki menü butonlarının yan yana listelenmesini sağlayalım */
#myMainNavigation > ul > li { 
    display: inline-block;
}

/* İlk kademedeki butonların arasına ayırma çizgisi koyalım */
#myMainNavigation > ul > li + li {
    border-left: 1px solid white; 
}

/* Şimdi de menülerde yer alan butonları şekillendirelim */
#myMainNavigation ul li a {
    border-radius: 3px;
    color: white;
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px; /* daha önce sıfırlanan font boyutunu ayarlıyoruz */
}

/* Butonların üzerine gelince rengi daha açık olsun */
#myMainNavigation ul li:hover > a {
    background-color: #0ab5b5;
}

/* BU AŞAMADAN İTİBAREN ALT KADEMELERİ DÜZENLEMEYE BAŞLAYABİLİRİZ */

/* Alt kademelerdeki menülerin yapısal özelliklerini ayarlıyouz. */
#myMainNavigation ul li > ul {
    background-color: darkcyan;
    box-shadow: 0 0 4px black;
    border-radius: 3px;
    position: absolute; /* Konumlanırma yapabilmek için absolute ayarılyoruz. */
    z-index: 1;
}

/* Bir üstteki Lİ'nin üzerinde gelince, içindeki ilk UL'nin görünür olmasını sağlıyoruz. */
#myMainNavigation ul li:hover > ul { 
    display: block;
}

/* 3. kademeden itibaren açılan menülerin yanda açılmasını sağlamak için aşağıdaki ayarları yapıyoruz */
#myMainNavigation ul ul li > ul { 
    left: 97%; top: 0; 
}

/* Öncelikle menümüzün içinde yer alacağı kutuyu düzenleyelim... */

#myMainNavigation {

background-color: darkcyan;

border-radius: 5px;

font-family: verdana;

margin: 30px auto;

padding: 5px;

text-align: center;

width: 960px;

}

/* Listenin stil özelliklerini sıfırlayalım... */

#myMainNavigation ul {

font-size: 0; /* font boyutunu sıfırlıyoruz */

list-style: outside none none;

margin: 0;

padding: 0;

}

/* Alt kademelerdeki menülerin (UL) konumlandırma refeansı olarak bir üstündeki Lİ'leri kabul etmesi için Tüm Lİ'leri relative yapıyoruz. */

#myMainNavigation ul li {

padding: 0 5px; position: relative;

}

/* İlk kademe dışındaki alt menüleri gizlememiz gerekli, */

#myMainNavigation ul li > ul {

display: none;

}

/* İlk kademedeki menü butonlarının yan yana listelenmesini sağlayalım */

#myMainNavigation > ul > li {

display: inline-block;

}

/* İlk kademedeki butonların arasına ayırma çizgisi koyalım */

#myMainNavigation > ul > li + li {

border-left: 1px solid white;

}

/* Şimdi de menülerde yer alan butonları şekillendirelim */

#myMainNavigation ul li a {

border-radius: 3px;

color: white;

display: block;

margin: 5px 0;

padding: 5px 10px;

text-decoration: none;

white-space: nowrap;

font-size: 14px; /* daha önce sıfırlanan font boyutunu ayarlıyoruz */

}

/* Butonların üzerine gelince rengi daha açık olsun */

#myMainNavigation ul li:hover > a {

background-color: #0ab5b5;

}

/* BU AŞAMADAN İTİBAREN ALT KADEMELERİ DÜZENLEMEYE BAŞLAYABİLİRİZ */

/* Alt kademelerdeki menülerin yapısal özelliklerini ayarlıyouz. */

#myMainNavigation ul li > ul {

background-color: darkcyan;

box-shadow: 0 0 4px black;

border-radius: 3px;

position: absolute; /* Konumlanırma yapabilmek için absolute ayarılyoruz. */

z-index: 1;

}

/* Bir üstteki Lİ'nin üzerinde gelince, içindeki ilk UL'nin görünür olmasını sağlıyoruz. */

#myMainNavigation ul li:hover > ul {

display: block;

}

/* 3. kademeden itibaren açılan menülerin yanda açılmasını sağlamak için aşağıdaki ayarları yapıyoruz */

#myMainNavigation ul ul li > ul {

left: 97%; top: 0;

}

Tüm yukarıdaki CSS kodlarını uyguladıktan sonra menümüz, liste şeklindeki görünümünden, güzel bir açılır CSS Menü‘ye dönüşüyor.

CSS Menü Yapımı – CSS kodları uygulanınca menünün son hali

Burada dikkat edilmesi gereken bir konu var, LI etiketleri arasında gereksiz boşlukların oluşmaması için, öncelikle font boyutunu sıfıra düşürdük. ve A etiketleri içinde yer alan metinlerimizin de görünür olması için, font boyutunu 14px’e ayarladık.

Böylelikle JS kullanmadan, menümüzü sadece CSS kodlarıyla oluşturmuş olduk. CSS Menü Yapımı‘nın çalışır haldeki JSFIDDLE linkine de buradan ulaşabilirsiniz.

Yazı Ne Hakkında : açılır menü, ağaç menü, CSS, css menü, css menü yapımı, html, treeview menu

Henüz hiç yorum yapılmamış,

İlk Yorumu Siz Yapın...

Kategoriler

Arkadaşların Blogları

Bağlantılar

Son Yazılar

Etiket Bulutu

CSS Menü Yapımı

Henüz hiç yorum yapılmamış,

Bir Cevap Yazın Cevabı iptal et