CSS DersleriHTML DersleriJavaScript Dersleri

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ı

HTML ile İletişim Formu Oluşturma 

HTML ve CSS ile Animasyonlu Arama Kutusu

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir