CSS Dikey Açılır Menü Yapımı

Dikey Açılır Menü Yapımı

Bazen menü elemanları alt elemanlar içerebilir. Bu durumda bu alt menü başlıklarını açılır menü şeklinde tasarlayabiliriz. Açılır menü yaparken dikkat etmemiz gereken en önemli nokta açılan menünün pozisyonudur. Yine açılan menü yaparken sırasız listelerden (<ul>) yararlanacağız.

Aşağıdaki uygulamada dikey açılır menü yapımı anlatılmıştır

İlk önce menümüzün hangi başlık ve alt başlıklardan oluşacağına karar vermeliyiz. Örneğimizin aşağıdaki başlıklardan oluşacağını varsayarak sonuca gideceğiz

Gördüğünüz gibi Şirket Tarihçesi ve Hizmetlerimiz başlıkları alt başlıklara sahip oldukları için bunları iç içe liste şeklinde yazacağız yani alt menü haline getireceğiz.

Şimdi üstteki listeyi oluşturalım

<div class="menum">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a>
    <ul>
  <li><a href="#">Şirket Tarihcesi</a></li>
  <li><a href="#">Yöneticilerimiz</a></li>
  <li><a href="#">Çalışmalarımız</a></li>
  <li><a href="#">Faaliyetlerimiz</a></li>
  </ul>
<li><a href="#"Hizmetlerimiz</a>
    <ul>
    <li><a href="#">Web Tasarım</a></li>
    <li><a href="#">Hosting</a></li>
    <li><a href="#">Logo Tasarım</a></li>
    <li><a href="#">Danışmanlık</a></li>
    </ul>
<li><a href="#">Referanslarımız</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>  

Kod Görünüm:

• Anasayfa
• Hakkımızda
  
  • Şirket Tarihcesi
  • Yöneticilerimiz
  • Çalışmalarımız
  • Faaliyetlerimiz
• 
  
  • Web Tasarım
  • Hosting
  • Logo Tasarım
  • Danışmanlık
• Referanslarımız
• İletişim

Şimdi <div> etiketimize stil uygulayarak <div class=”menum”>, biçimlendirelim. Madde imlerini kaldırıp hepsini hizalayalım. 

Alt menü üst menüye bağlı olarak (göreceli) açılacağı için konumlandırmayı da o şekilde yapmalıyız. Yani üst menünün elemanları ( ul li ) relative olarak, 

Alt menünün elemanları (li ul) absolute olarak ayarlanmalıdır. Ana menümüzün genişliği 150 px ayarlamıştık. Alt menümüzün açılacağı konumu da soldan ona göre ayarlayacağız.1px de kenarlık olduğu için açılan menünün kenarlığı ile ana menünün kenarlığının üst üste gelmesi için 149 px olarak ayarlayacağız.İkincimenünün her zaman gözükmemesi için de “display:none;” komutunu kullanmalıyız. 

Buraya kadar açılan menümüzün iskeleti tamamlanmış oldu. Şimdi sadece görünümüyle ilgili düzenlemeleri yapacağız.

Menü ögelerini blok halinde görüntülemek için “display:block;”, bağlantıların altındaki çizgiyi kaldırmak için de “text-decoration:none;” özelliğini kullanacağız. Menü başlıkları arasındaki mesafeyi ayarlamak için “padding” komutunu uygulayacağız. Sonra da bir zemin rengi belirleyip kenar çizgisi ayarını yapacağız.

Menü ögeleri üzerine geldiğimizde rollover efekti oluşması için; 

.menum li a:hover{
background-color:#012D58;
color:#FF0;
}

 Ana menü ögelerin görünümünde sorun yok alt menüsünün gözükmesi için;

.menum li:hover ul{
   display: block;
}  

Bu stil şablonunu, harici bir dosyaya kaydedip sayfanıza çağırarak da dahil edebilirsiniz

<div class="menum">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a>
    <ul>
  <li><a href="#">Şirket Tarihcesi</a></li>
  <li><a href="#">Yöneticilerimiz</a></li>
  <li><a href="#">Çalışmalarımız</a></li>
  <li><a href="#">Faaliyetlerimiz</a></li>
  </ul>
<li><a href="#"Hizmetlerimiz</a>
    <ul>
    <li><a href="#">Web Tasarım</a></li>
    <li><a href="#">Hosting</a></li>
    <li><a href="#">Logo Tasarım</a></li>
    <li><a href="#">Danışmanlık</a></li>
    </ul>
<li><a href="#">Referanslarımız</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>  

Aşağıda dikey açılan menümüzün ön izlemesi verilmiştir. 

Bizi Takip Edin
Pinterest Facebook Twitter  © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.