CSS ve HTML ile dikey açılır menü oluşturmak için aşağıdaki adımları takip edebilirsiniz:
HTML kodunu yazın: İlk olarak, HTML kodunu yazmalısınız. Aşağıdaki örnekte, bir <ul> listesi kullanılarak dikey açılır menü oluşturuldu.
<ul id="nav"> <li><a href="#">Ana Sayfa</a></li> <li><a href="#">Hakkımızda</a> <ul> <li><a href="#">Tarihçe</a></li> <li><a href="#">Kuruluş</a></li> </ul> </li> <li><a href="#">Ürünler</a> <ul> <li><a href="#">Kategori 1</a></li> <li><a href="#">Kategori 2</a></li> </ul> </li> <li><a href="#">İletişim</a></li> </ul>
CSS kodunu yazın: İkinci olarak, CSS kodunu yazmalısınız. Aşağıdaki örnekte, menünün görünümü tanımlandı.
#nav { background-color: #333; color: #fff; font-size: 14px; margin: 0; padding: 0; } #nav > li { display: block; position: relative; } #nav > li > a { background-color: #333; color: #fff; display: block; padding: 10px 20px; text-decoration: none; } #nav > li > ul { display: none; position: absolute; top: 100%; } #nav > li:hover > ul { display: block; }
Bu örnekte, <ul> listesinin stilini belirlersiniz ve alt menülerin görünümünü tanımlarsınız. Bunlar, display özelliği kullanılarak görüntülenmesi veya görüntülenmemesi konusunda değiştirilir ve position: absolute kullanılarak alt menülerin dikey açılır olması sağlanır.
Bu şekilde, CSS ve HTML ile dikey açılır menü uygulaması yapabilirsiniz.
Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Html programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz.