7.985 kez okundu

Css ile yatay açılır menü uygulaması

10 10 7.985 kez okundu incelendi

Şimdiki dersimizde CSS ile yatay açılır menü yapımını anlatmaya çalışacağım. Umarım başarılı olabilirim. Dersin sıkıcı olmaması için biraz da görsellik katacağım. Hep anlatırken, hem de görsel olarak Dreamweaver 8’i yardımcım olarak görevlendiriyorum 🙂

Öncelikle normal bir şekilde menümüzü oluşturalım.

<ul id="menu">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a>
<ul>
<li><a href="#">Şirketimizin Tarihi</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="#">Referanslarımız</a>
<ul>
<li><a href="#">Deneyimlerimiz</a></li>
<li><a href="#">Ne dediler?</a></li>
</ul>
<li><a href="#">Hizmetlerimiz</a></li>
<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 Hizmetimiz</a></li>
<li><a href="#">Diğer Hizmetler</a></li>
</ul>
</ul>

http://resim.sanalkurs.net/uploads/1_454.jpg

Gördüğünüz gibi 4 tane ana menü ve akabinde alt menülerini oluşturduk. Şimdi Css ile bunu açılır menü hâline getireceğiz.

Ben bu anlatımda css’i ayrı bir dosya ile sayfaya çağıydım. Ama siz sayfaının head’ine de yerleştirebilirsiniz css’i.

Css’imize aşağıdaki kodu yazıyoruz.

ul#menu li {
float:left;
position:relative;
width:150px;
}

http://resim.sanalkurs.net/uploads/2_386.jpg

Bu kod id’si “menu” olarak verilen yazıların maddeleri hakkında düzeltmedir.

Float ile menümüzün durumunu belirliyoruz. Left yaptık ve anasayfa sol tarafta yerini aldı. Right yapsaydık anasayfa en sağda olacaktı ve devamındakiler sağdan sola doğru hizalanacaktı. Position ile menünün durumunu belirliyoruz ve bildiğiniz gibi width ile de menümüzün genişliğini belirliyoruz.

Menümüzü ilk oluşturduğumuz zaman oluşan menülerin başında işaretleri kaldıralım.

ul#menu, ul#menu ul {
list-style:none;
margin:0;
padding:0;
}

http://resim.sanalkurs.net/uploads/3_325.jpg

Bu şekilde menülerimizin başındaki işaretleri de kaldırmış olduk.

ul#menu li ul {
display:none;
position:absolute;
top: 19px;
left: 0;
}

Display ve position sayesinde açılır olan menümüzü gizlemiş oluyoruz. Bu koddan itibaren alt menüleri göremez hâlde olursunuz.

ul#menu li:hover ul {
display:block;
}

Bu kodu da eklediğimiz zaman mouse’u hangi menünün üzerine getirirsek o menü açılacaktır. Yani işlemimiz bitti.

ul#menu li a {
font: bold 11px Verdana, Helvetica, sans-serif;
display: block;
border-width:1px;
border-style:double;
border-color:#000000;
margin:0;
padding:2px;
color:#FFFFFF;
background:#666666;
text-decoration:none;
}

Son olarak menümüzün arkaplanını, altında çizgi olmaması gibi bazı özelliklerimizi ayarladıktan sonra menümüz tamamlanmıştır. İstediğimiz sayfaya yerleştirebiliriz.

http://resim.sanalkurs.net/uploads/4_270.jpg

http://resim.sanalkurs.net/uploads/5_226.jpg

http://resim.sanalkurs.net/uploads/6_177.jpg

http://resim.sanalkurs.net/uploads/7_133.jpg

Gelen aramalar :

2 Yorum yapıldı “Css ile yatay açılır menü uygulaması”

  1. havalandırma dedi ki:

    teşekkürler. çok işime yaradı.

  2. Çok güzel dedi ki:

    Merhaba elinize sağlık, bir kaç sorum olacak örneğin benü genişliğini otomatik yaptık diyelim ki yaptım bufeserge alt açılır menülerde kendi uzunluğunda açıldığı için görüntü kötü oluyor ana menü kadar alt menünün açılmasını nasıl sağlıyoruz acaba?
    teşekkür ederim.

Yorum yap

Barış Ozcan Facebook Sayfasi
Barış Ozcan Twitter