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

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.

7 thoughts on “CSS ile Yatay Açılır Menü Yapımı

  1. Reply farketmez.org Oca 18,2015 17:34

    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. Reply emine Şub 9,2015 14:02

    daha fazla bilgi olsunn

  3. Reply dora Nis 20,2015 17:29

    TESEKKURLER COK YARDIMCI OLDUNUZ

  4. Reply mehmet May 29,2015 17:59

    Ben table menu kullanıyodum Sizin verdiğiniz kodları kullandım gözükmedi yazılar header sabit.

  5. Reply Çift Monitör Eyl 15,2015 16:59

    Selamlar,

    bir sorum olacak. Açılır Menünün sol tarafa hizalı olduğunu düşünün. Linklerden birine tıkladığımda o linke ait açılır menü ailesini, sayfa ilk yüklendiğinde nasıl açık getirebilirim?

  6. Reply Çift Monitör Eyl 15,2015 17:00

    Selamlar,

    Sola hizalı bir açılır menüm var. Herşey güzel çalışıyor ama misal linklerden birine tıkladığımda açılan sayfada o linke ait açılır menü ailesi açık gelmiyor. Tüm linkler kapalı geliyor. Halbusi mesela Kategoriler başlığının altında Oyun İndir’e tıkladığımda oyun-download.aspx yüklenince sol tarafta Oyun İndir açık gelsin istiyorum. Nasıl yaparım? Bu kod üzerinden örnekler misiniz?

  7. Reply emre Ara 25,2015 12:34

    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!

Leave a Reply