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

Bu dersimizde de css ile yatay açılır menü yapacağız. Daha önceki dersimizde css ile dikey açılır menü yapmıştık, bu menünün tek farkı sadece dikey olarak değilde aynı menünün yatay olarak açılmasıdır.
Css ile Yatay Açılır Menü
İlk olarak yine aynı şekilde css ile yatay açılır menümüzün html kodlarını oluşturalım. Html kodlarımızı yine öğrendiğimiz gibi body tagları arasına yazıyoruz.

<div id="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 ise yatay açılır menümüzün css kodlarını yazıyoruz. Css kodlarını da head tagları arasına yazalım.

<style type="text/css">
/*Madde imlerini kaldırıp tüm başlıkları alt alta sıralayalım.*/
#menum ul{
	list-style:none;
	margin:0;
	padding:0;
}
/*Ana menü başlıklarının alt alta değil de soldan sağa doğru sıralanması için float:left; özelliğine kullanalım. Çünkü yatay menü yapıyoruz.*/
#menum li{
	float:left;
	position:relative;
	width:150px;
}
/*
Şimdi alt menu olarak açılacak alt menümüzün ayarlamasını yapıyoruz.
Alt menü olarak açılacak menümüzün pozisyonunu : Satır yüksekliği (line-height) + kenar boşluğu (padding) + kenar çizgi kalınlıkları
 
Satır yüksekliğini sonradan 16 px vereceğiz. Alt ve üst kenar boşluklarına 2 px verelim, kenar çizgileri de 1px olsun (alt ve üst hesaba dahil olacak), 
Toplam 16+(2x2)+(2x1)=22 px olacaktır.
 
Alt açılan menünün üst çizgisi ile üst menümüzün alt çizgisi üst üste geleceği için alt menümüzün açılması gereken pozisyonu, yukarıdan 22-1=21 px olarak ayarlamamız daha doğru olacaktır. Yine sayfamız ilk yüklendiğinde alt menünün gözükmemesi için “display:none;” yapılmalıdır.
*/
#menum li ul{
	display:none;/*Alt menüleri görünmez yapar*/
	left:0;/*Soldan boşlukları temizler*/
	position:absolute;/*Alt menünün poziyonunu üst menüye göre göreceli olarak ayarlar*/
	top:21px;/*üstten 21px boşluk bırakır*/
}
/*Menümüze biraz görsellik katalım*/
#menum ul li a{
	background:#EFEFEF;
	border-color:#CCC #888 #555 #BBB;
	border-style:solid;
	border-width:1px;
	color:#000;
	display:block;
	font:bold 12px Arial, Helvetica, sans-serif ;
	margin:0;
	padding:2px 3px;
	text-decoration:none;
	line-height:16px;
}
/*Menü üzerine geldiğimizde yazıların kırmızı olması ve zeminin renginin beyaz kalması için*/
#menum ul li a:hover{
	background:#fff;
	color:#f00;
}
/*Üzerine geldiğimizde Alt menülerin gözükmesi için ise*/
#menum li:hover ul{
	display:block;
}
</style>

Yukarıda sizlere css kodlarının satır satır açıklamasını yazdım ve bu şekilde kodlarımızın ne işe yaradığını nasıl çalıştığını daha rahat bir şekilde öğrenme imkanı sunuyor. Css ile Yatay Açılır Menu uygulamamızın çalışır halini görmek için yandaki linke tıklayın.

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

  1. Merhaba, görseli fena değil ama, açılan menülerin üzerine gelindiğinde tıkanmadan açılan menü kapanıyor. problem var ama siz de mi bende mi henüz çözemedim ?

  2. css kodları düzenlenmiş halimi arkadaşlar bu ben bunu ekledim kodlarımın arasına fakat sitemde bi değişiklik yok yada düzenlenmiş kodları bana atın burdan yardım!

Bir Cevap Yazın

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