CSS ve HTML ile dikey açılır menü uygulamaları şu adımlarla yapılabilir:
HTML Markup: İlk olarak HTML kodunuzda bir “nav” elemanı oluşturun ve bu eleman içinde bir “ul” elemanı oluşturun. Her bir menü seçeneği için bir “li” elemanı oluşturun ve içine “a” elemanını koyun.
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
CSS Stil Tanımları: HTML elemanlarını stilleme için CSS kodunu ekleyin. Aşağıdaki örnekte, menü elemanları sıralanır, arka plan rengi beyaz ve her bir seçeneğin yatay olarak görüntülenmesi sağlanır.
nav ul { list-style: none; background-color: #fff; display: inline-block; margin: 0; padding: 0; position: relative; } nav li { display: inline-block; background-color: #fff; position: relative; float: left; } nav a { display: block; padding: 0 10px; color: #333; font-size: 20px; line-height: 60px; text-decoration: none; }
Açılır Menü Efekti: Açılır menü efektini eklemek için “li” elemanındaki “ul” elemanı için CSS kodunu ekleyin. Bu kod, “li” elemanının içindeki “ul” elemanını gizler ve “li” elemanına tıklandığında görüntülenmesini sağlar.
nav ul ul { display: none; position: absolute; top: 60px; } nav ul li:hover > ul { display: inherit; }
Bu adımlarla, HTML ve CSS kodları kullanarak basit bir dikey açılır menü oluşturabilirsiniz. Efekti ve tasarımı görsel olarak kişiselleştirmek için CSS kodunu düzenleyebilirsiniz.