Dikey Menü Yapımı

Bildiğiniz üzere menü web sitelerde kullandığımız  en önemli işlevlerden bir tanesi.İstediğimiz sayfaya geçiş yapabiliyoruz. Aynı zamanda sitemize görsellik ve düzen katıyor.Bu yazıda dikey menü nasıl yapılır onu göreceğiz.  Menümüzü CSS ile oluşturucaz. Sözü fazla uzatmadan başlayalım.

» İlk önce link listesi oluşturalım. (HTML) Sırasız liste.

<ul class="dikeymenu">
             <li><a href="url.html">Link 1</a></li>
             <li><a href="url.html">Link 2</a></li>
             <li><a href="url.html">Link 3</a></li>
             <li><a href="url.html">Link 4</a></li>
             <li><a href="url.html">Link 5</a></li>
</ul>

» Bu kodları tarayıcıda çalıştıralım. Aşağıdaki gibi olması lazım.

» Şimdi menüyü şekillendirmek için  CSS'i kullanıcağız. Siya noktaları yani imgeleri kaldırıyoruz.

ul.dikeymenu {
          list-style-type: none;
}

» Şimdi tekrar tarayıcımızda menüyü görüntüleyelim.

» Gördüğünüz gibi siyah noktaları yok ettik. Şimdi ise margin-padding özelliklerini 0 olarak vereceğiz. Bunun nedeni boşluğu yok etmek.

ul.dikeymenu {
           list-style-type: none;
           padding: 0;
           margin: 0;
}

» Tekrar çalışmamızı tarayıca önizlemesinde bakalım.

» Artık linklere rollover özelliği ile beraber renkte verelim.

ul.dikeymenu a {
           display:  block;
           color:  #bad7f2;
}

» Önizleme yapalım.

» Ancak menüye belli bir genişlik vermeyi unutmayalım. Birde şu linkin altındaki çizgiyi kaldıralım.

ul.dikeymenu a {
           display: block;
           color: #bad7f2;
           width: 270px;
           text-decoration: none;
}

» Linkin altındaki yazı kalktı. Bu arada menüye belli bir genişlik vermeyi unutmayın yoksa link genişliği sayfa sonuna kadar uzar.

» Linklerin birbirine olan uzaklığını arttıralım.

ul.dikeymenu a {
           display: block;
           color: #bad7f2;
           width: 270px;
           text-decoration: none;
           padding: 2px 2px;
}

» Önizleme yapalım.

» Linkleri ayırma işlemi yapalım.

ul.dikeymenu li {
             margin: 0 0 1px 0;
}

» Şimdi menüyü biraz daha şekillendirelim. Linklere hemen arkaplan rengi ve farklı bir font değişikliği yapalım.

ul.dikeymenu a {
           display: block;
           color: #bad7f2;
           background-color: #336bf7;
           font-family: Tahoma;
           width: 270px;
           text-decoration: none;
           padding: 2px 2px;
}

» Tekrar menüye bakalım.

» Gördüğünüz gibi menümüz bayağı şekillendi. Şimdi hover özelliği verelim.

ul.dikeymenu a:hover {
           color: #222;
           background-color: #bad7f2;
}

           

» Hover özelliği nasıl olmuş bakalım.

Kodların Tamamı

<style type="text/css">

ul.dikeymenu {
           list-style-type:  none;
           padding: 0;
           margin: 0;
}

ul.dikeymenu a {
           display: block;
           color: #bad7f2;
           background-color: #336bf7;
           font-family: Tahoma;
           width: 270px;
           text-decoration: none;
           padding: 2px 2px;
}

ul.dikeymenu a:hover {
           color: #222;
           background-color: #bad7f2;
}
ul.dikeymenu li {
           margin: 0 0 1px 0;
}

</style>

<ul class="dikeymenu">
             <li><a href="url.html">Link 1</a></li>
             <li><a href="url.html">Link 2</a></li>
             <li><a href="url.html">Link 3</a></li>
             <li><a href="url.html">Link 4</a></li>
             <li><a href="url.html">Link 5</a></li>
</ul>

Canlı Demo

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5

İleriki zamanlarda yatay menü nasıl yapılır onunla ilgili yazıyı yayınlayacağım. Herhangi bir sorun olursa yorumlara yazın.