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

Css ile dikey açılır menü yapımı...

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





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







  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

• 11 yıl önce
ben yaptım sadece liste göründü diğer özellikler hiç biri olmadı
• 11 yıl önce
Css oluşturmayı biliyor musunuz acaba? Eğer css'i nasıl uygulayacağınızı biliyorsanız uygulamada bir sorun olmaz...
• 11 yıl önce
çok teşekkürler gerçeken güzel bir çalışma , bir sorum olcak, burda iki bölmeli bir menü var bir bölme daha eklemek istersek yani üçüncü bölmeyi sağ tarafa doğru açmak istersek nasıl bir kod yazmalıyız? Teşekkürler
• 11 yıl önce
guzel ve ogretici bir ornek Allah sizden razi olsun
• 11 yıl önce
çok güzel ve öğretici bir ders olmuş ellerine, klavyene mousena sağlık Allah sende ve sizden razı olsun.
• 11 yıl önce
O zaman bir derstede css olusturma yaparsanız sevinirim :)
• 11 yıl önce
O zaman bir derstede css olusturma yaparsanız sevinirim :)
• 11 yıl önce
elinize sağlık güzel bir çalışma cok iyi anlatmışsınız =)
• 11 yıl önce
Ders İçin tşkler. Sade ve anlaşılır bir ders olmuş.
• 10 yıl önce
Expolorer da açılır menuleri göremiyorum. Firefox görünüyoo. Bunun nedeni ne olabilir acaba? Script kodumu lazım.
• 9 yıl önce
bi konuyu yarım anlatıp insanlara işkence yapacaksanız anlatmayın yada bilmiyorsanız bırakın bilenler anlatsın bu kod hiç bir şekilde ie de çalışmaz yatay konuda da bunda yazmışsın ama javascript kodunu vermemişsin ilgilenen arkadaşlar bu kod bu şekilde çalışmaz boşuna denemeyin
• 9 yıl önce
DAİMA DERİM bilgi paylaştıkça artan hazinedir.Allah bilgisini sadece kendine saklayanlara lanet etsin.çok saol emeğine sağlık

Yukarı Git