Dikey Açılır Menü Yapımı

sanalkurs.net anlatımıdır...

Evet arkadaşlar.

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.

Kod:

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

[Resimleri görebilmek için üye olun veya giriş yapın.]

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

[Resimleri görebilmek için üye olun veya giriş yapın.]

Kod:

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

Kod:

ul li {
position: relative;
}

li:hover ul {
display: block;
}

[Resimleri görebilmek için üye olun veya giriş yapın.]

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

Kod:

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

[Resimleri görebilmek için üye olun veya giriş yapın.]

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

Kod:

a {
color: #FFFFFF;
}

[Resimleri görebilmek için üye olun veya giriş yapın.]

teşekkürler

Güzel Anlatım

Teşekkürler.

gifleri nereye ekliyoruz

teşekkürler