Wc3Wepla | Tasarım | Web Dersleri | Html Kodları | Tekno Bilgi

Dikey acilir menu yap

< Web Derslerine Geri Dön <

Öncelikle menülerimizi oluşturuyoruz normal bir şekilde. Alt menülerimizi de yapıyoruz. Açılır menümüzün olacağı ana menülerin sonununu </li> ile bitirmemeniz gerektiğini unutmayın!.. Aksi hâlde css'e geçtiğimiz zaman açılır menünüzü ana menü olarak görebilirsiniz.

Aşağıdakı kodu menumuzun gozukmesı ıstedıgımız yere koyalım.
<ul id="menu"> <li><a href="#" _fcksavedurl="#">Anasayfa</a></li> <li><a href="#" _fcksavedurl="#">Hakkımızda</a> <ul> <li><a href="#" _fcksavedurl="#">Şirketimizin Tarihi</a></li> <li><a href="#" _fcksavedurl="#">Yöneticilerimiz</a></li> <li><a href="#" _fcksavedurl="#">Çalışanlarımız</a></li> <li><a href="#" _fcksavedurl="#">Faaliyetlerimiz</a></li> </ul> <li><a href="#" _fcksavedurl="#">Referanslarımız</a> <ul> <li><a href="#" _fcksavedurl="#">Deneyimlerimiz</a></li> <li><a href="#" _fcksavedurl="#">Ne dediler?</a></li> </ul> <li><a href="#" _fcksavedurl="#">Hizmetlerimiz</a> <ul> <li><a href="#" _fcksavedurl="#">Web Tasarım</a></li> <li><a href="#" _fcksavedurl="#">Hosting</a></li> <li><a href="#" _fcksavedurl="#">Logo Tasarım</a></li> <li><a href="#" _fcksavedurl="#">Danışmanlık Hizmetimiz</a></li> <li><a href="#" _fcksavedurl="#">Diğer Hizmetler</a></li> </ul> </ul>





Burdan ıtıbaren sırayla hepsini CSS koduna ekleyin.
Şimdi menülerimizin önündeki simgeleri gizleyelim.

ul { padding:0; margin:0; list-style:none; width:100px; }

Açılır menümüzün özelliklerini verelim.

li ul { position: absolute; left: 100px; top: 0; display: none; }

Şimdi de gizlediğimiz menülerin pozisyonunu ve açılırlığını sağlayalım...

ul li { position: relative; } li:hover ul { display: block; }







Şimdi de menümüzün rengi, kenarlıkları gibi ayarları yapalım:

ul li a { display:block; text-decoration:none; background-color:#FFFF00; padding:3px; border:solid 1px #000000; border-bottom:0; }





Son olarak da yazımızın rengini ayarlayalım.

a { color: #FFFFFF; }


Menümüz hazır...




< Web Derslerine Geri Dön <