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

Web tasarım ve programlama dersinde sadece CSS kullanarak bir menü yapalım. CSS ile dikey açılır menü yapmak için kullanacaklarımız sadece CSS ve HTML kodlarıdır.
Css ile Dikey Açılır Menü
İlk olarak dikey açılır menümüzün HTML kodlarını yazalım. Html kodlarını body tagları arasına yazalım.

<div class="menum">
  <ul>
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkımızda</a>
      <ul>
        <li><a href="#">Şirket Tarihçesi</a></li>
        <li><a href="#">Yöneticilerimiz</a></li>
        <li><a href="#">Çalışanlarımız</a></li>
        <li><a href="#">Faaliyetlerimiz</a></li>
      </ul>
    </li>
    <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>
    <li><a href="#">Referanslarımız</a></li>
    <li><a href="#">İletişim</a></li>
  </ul>
</div>

Şimdi de dikey açılır menümüzün css kodlarını oluşturalım. Style yani css kodlarımızıda head tagı arasına yazalım.

<style type="text/css">
.menum ul{
	margin:0;/*UL çerçevesinin dışından boşluğunu yok eder.*/
	padding:0;/*UL çerçevesinin içerden boşluğunu yok eder.*/
	list-style:none;/*Lİ'lerin kenarlarındaki stili(örneğin yuvarlak gibi) kaldırır.*/
	width:150px;/*UL'nin genişliğini 150px olarak ayarlar*/
	border-bottom:1px solid #000;/*UL'nin sadece alt kenar özelliğini belirler.*/
}
.menum li{
	position:relative;/*Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar. Burada Lİ özelliği UL'yi esas alarak yerini belirler.*/
}
.menum li ul{/*menum'ün içindeki Lİ'nin içindeki UL için class tanımlaması*/
	position:absolute;/*Katmanın yerini esas pencere olarak alır. Yani yeri nere ise orada konumlanır.*/
	list-style:none;/*Lİ'lerin kenarlarındaki stili(örneğin yuvarlak gibi) kaldırır.*/
	left:149px;/*Soldan 149 px boşluk bırakır. 1px az olmasının sebebi border'dandır.*/
	width:150px;/*Lİ'nin içerisindeki UL'nin genişliği 150 px yapılır.*/
	display:none;/*menu->li->ul sayfa açıldığında gözükmesini engeller.*/
	top:0;/*Yukarıdan boşluğu siler*/
}
.menum li a{/*menu->li->a yani menu'nun içindeki linklere stil verilir*/
	display:block;/*Linkler alt alta gösterilir*/
	text-decoration:none;/*Linklerin alt çizgisi kaldırılır*/
	background-color:#9CF;/*Linkelere arka plan rengi verilir*/
	color:#000;/*Linklerin yazı rengi siyah olarak ayarlanır*/
	font:bold 13px Verdana, Geneva, sans-serif;/*Font özellikleri verilir*/
	padding:5px;/*Linklerin çerçevenin içinden boşluğu 5px olarak ayarlanır*/
	border:1px solid #000;/*Linkelere çerçeve özelliği verilir*/
	border-bottom:0;/*Linklerin alt çerçevesi kaldırılır*/
}
.menum li a:hover{/*menu'nun içindeki Lİ'nin içindeki linkerin üzerine gelindiğinde uygulanacak stiller*/
	background-color:#012D58;/*Linkin arkaplan rengini değiştir*/
	color:#FF0;/*Linkin yaz rengini değiştir.*/
}
.menum li:hover ul{/*Menu'nun içindeki ana Lİ'lerin üzerine gelince alt menüsü (yani UL'si) varsa göstermesi için stil uygulanır*/
	display:block;/*Menu'nun içindeki Lİ'nin içindeki alt menu olarak olan li->ul lerin alt menüsü varsa onların açılmasını sağlar*/
}
/*ie 7 ve altındaki tarayıcı uyumsuzluklarını gidermek için bu kodları kullandık*/
* html ul li{
float:left;
height:1%;
}
* html ul li a{
height:1%;
}
</style>

Uygulamanın çalışır halini görmek için Dikey Açılır Menü‘ye tıklayınız.

“CSS ile Dikey Açılır Menü Yapımı” için 5 cevap

  1. Lütfen şu kodları nasıl bu şekilde sunduğunu söyler misin ? Blockquote sanıyordum ama değilmiş sen daha iyi bilirsin. Konu ile alakalı değildi ama teşekkürler. Lütfen eposta üzerinden geri dönüş yaparsanız süper olur.

  2. Hocam verdiğiniz bilgiler ve kodlar için teşekkürler. verdiğiniz örnek menü kodunu opencart sitesine sorunsuz ekledim ancak menü yana açıldığında sitede bulunan görsellerin slaytın altında kalıyor. çok rica etsem acaba üste nasıl taşırız, yardımlarınız için şimdiden çok teşekkürler

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir