Jquery: CSS: Drop Down Menü

Sitelerimizde yer alan açılır menüleri oluşturmak kullanmak kadar kolay ve zevklidir. ul etikeni açıyoruz ve ana menü başlıklarını li etiketi içerisine yazıyoruz. HTML kodlarının ardından CSS kodlarına geçeceğiz.

<ul class="dropdown">
<li><a href="#">Konu Başlıkları</a></li>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Hakkımızda</a></li>
</ul>

Yukarıdaki kodlar ile sadece yan yana linklerimiz dizmiş oluyoruz, alt menü eklenmemiş halde. Ana menümüze alt menü eklemeye geldi sıra

<ul class="dropdown">
<li><a href="#">Konu Başlıkları</a>
<ul class="sub_menu">
<li><a href="http://www.gumusluoglu.com/kategori/css/">CSS</a></li>
<li><a href="http://www.gumusluoglu.com/kategori/genel/">Genel</a></li>
<li><a href="http://www.gumusluoglu.com/kategori/javascript/">Javascript</a></li>
<li><a href="http://www.gumusluoglu.com/kategori/jquery/">Jquery</a></li>
<li><a href="http://www.gumusluoglu.com/kategori/mysql/">MYSQL</a></li>
<li><a href="http://www.gumusluoglu.com/kategori/php/">Php</a></li>
</ul>
</li>
</ul>

Konu başlıkları menüsünün üzerine geldiğimizde CSS, Genel, Javascript, Jquery, MYSQL ve Php menüleri açılıyor.Konu başlıkları menümüze alt menü eklemek için Konu Başlıkları’nın yer aldığı li etiketini kapatmadan önce class’ı sub_menu olan bir ul açıyoruz ve alt menü içeriklerini li etiketleri arasına yazıyoruz, alt menüleri oluşturduktan sonra ul etiketimizi ve Konu Başlıklarının yer aldığı li yi kapatıyoruz. En son olarakda ana ul mizi kapatıyoruz ve alt menülerimiz oluşuyor.
Örneğimizi biraz daha geliştirelim ve iki ana menü altında alt menülerimizi oluşturalım.

<ul class="dropdown">
<li><a href="#">Konu Başlıkları</a>
<ul class="sub_menu">
<li><a href="http://www.gumusluoglu.com/kategori/css/">CSS</a></li>
<li><a href="http://www.gumusluoglu.com/kategori/genel/">Genel</a></li>
<li><a href="http://www.gumusluoglu.com/kategori/javascript/">Javascript</a></li>
<li><a href="http://www.gumusluoglu.com/kategori/jquery/">Jquery</a></li>
<li><a href="http://www.gumusluoglu.com/kategori/mysql/">MYSQL</a></li>
<li><a href="http://www.gumusluoglu.com/kategori/php/">Php</a></li>
</ul>
</li>
<li><a href="#">CSS</a>
<ul class="sub_menu">
<li><a href="http://www.gumusluoglu.com/kategoriler/link-ile-form-submit/">Link İle Form Submit</a></li>
<li><a href="http://www.gumusluoglu.com/kategoriler/jquery-text-to-image/">Jquery Text to İmage</a></li>
<li><a href="http://www.gumusluoglu.com/kategoriler/css-from-ornegi/">Css From Örneği</a></li><li>
</ul>
</li>
</ul>

Konu başlıkları ve CSS ana menüleri altında alt menüler oluşturmuş olduk. Konu Başlıkları ana menüsü altında; CSS, Genel, Javascript, Jquery, MYSQL ve Php, CSS ana menüsü altında ise; Link İle Form Submit, Jquery Text to İmage ve Css Form Örneği alt menülerini oluşturduk.

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

3 thoughts on “Jquery: CSS: Drop Down Menü

Bir Cevap Yazın

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