5.339 kez okundu

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

10 10 5.339 kez okundu incelendi

Bu dersimizde sizlere CSS ile dikey açılır menü yapımını anlatmaya çalışacağım. Önceki dersimizde Yatay açılır menü yapımını göstermiştik. Aynı menü üzerinden dikey olanını yapmaya çalışalım…

Ö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.
<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><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>
<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_463.jpg

Şimdi menülerimizin önündeki simgeleri gizleyelim.

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

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

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

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

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

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

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

a {
color: #FFFFFF;
}

Menümüz hazır…

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

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

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

http://resim.sanalkurs.net/uploads/8_103.jpg

Gelen aramalar :

Paylaş !

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

  1. İsmail dedi ki:

    Selamlar. Ben öncelikle paylaşımınız için teşekkür ederim, ama kodlrdan pek anlamadığım için ilk kod parçasından sonraki kodları nasıl kullanacağımı anlamadım. Bu konuda bana dönüş yaparsanız çok memnun olacağım teşekkürler.

  2. Cem dedi ki:

    CSS dosyalarını sırayla ekleyerek yapabilirsiniz.

Yorum yap

Önceki yazıyı okuyun:
Css ile divlerin köşelerini yuvarlama

Bu derste CSS3 ile gelen yeniliklerden biri olan köşe yuvarlatmayı anlatacağım arkadaşlar. Bunun için bir div oluşturuyoruz.

Kapat
Barış Ozcan Facebook Sayfasi
Barış Ozcan Twitter