Ş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>

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;
}

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;
}

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.









Kolay gelsin...