HTML CSS Açılır Menü Örnekleri
CSS açılır menüler, web sayfalarında menüleri gizleyip göstermek için kullanılır. Bu tür bir menü, bir düğmeye tıklandığında gizlenmiş olan menü öğelerini gösterir.
Bu tür bir menüyü yapmak için, öncelikle HTML sayfanızda menü öğelerinizi içeren bir <ul> etiketi oluşturmanız gerekir. Bu etiket içinde, her menü öğesi için bir <li> etiketi kullanabilirsiniz. Örneğin:
<ul id="menu"> <li>Ana Sayfa</li> <li>Hakkımızda</li> <li>İletişim</li> </ul>
Daha sonra, CSS dosyanızda #menu seçicisini kullanarak menü öğelerinin görünümünü düzenleyebilirsiniz. Örneğin:
#menu {
list-style-type: none;
margin: 0;
padding: 0;
}
#menu li {
display: inline-block;
}
#menu li a {
display: block;
padding: 8px;
text-decoration: none;
color: white;
background-color: black;
}
Bu CSS kodu, menü öğelerinin bir listede gösterilmemesi için list-style-type özelliğini kullanır ve menü öğelerinin yan yana gösterilmesi için display: inline-block özelliğini ayarlar. Ayrıca, menü öğelerine bir arka plan rengi ve yazı rengi verir.
Son olarak, açılır menü için bir düğme oluşturmanız gerekir. Bu düğme, menü öğelerinin gizlenip gösterileceği bir JavaScript fonksiyonunu çağıracaktır. Örneğin:
<button onclick="toggleMenu()">Menü</button>
Bu düğme, toggleMenu() adlı bir JavaScript fonksiyonunu çağıracaktır. Bu fonksiyon, menü öğelerinin gizlenip gösterilmesini sağlayacaktır. Örnek bir toggleMenu() fonksiyonu şöyle olabilir:
HTML ile ilgili diğer konulara göz atın:
Html Kodları ile Ders Programı Yapma
HTML ve Javascript ile Hesap Makinesi Yapımı
