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.

Hasan Huseyin İŞLER hakkında

Lise yıllarında programlama ile tanışan ve Q-Basic, Pascal, C başlangıç seviyesinde öğrenenir. Üniversite de TEF-BSÖ okurken diğer dillerin yanı sıra PHP'de kendini geliştirmeye devam ederek bunların yanında CSS, JS ve Wordpress sistemiyle ilgilenir. www.phpsorunu.com'un da yöneticisi ve yazarlarındandır.
Bu yazı CSS, HTML kategorisine gönderilmiş ve , , ile etiketlenmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

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

  1. farketmez.org der ki:

    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. emine der ki:

    daha fazla bilgi olsunn

  3. dora der ki:

    TESEKKURLER COK YARDIMCI OLDUNUZ

  4. mehmet der ki:

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

  5. Çift Monitör der ki:

    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. Çift Monitör der ki:

    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. emre der ki:

    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