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!

ben yaptım sadece liste göründü diğer özellikler hiç biri olmadı
Css oluşturmayı biliyor musunuz acaba? Eğer css'i nasıl uygulayacağınızı biliyorsanız uygulamada bir sorun olmaz...
ç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
guzel ve ogretici bir ornek Allah sizden razi olsun
çok güzel ve öğretici bir ders olmuş ellerine, klavyene mousena sağlık Allah sende ve sizden razı olsun.
O zaman bir derstede css olusturma yaparsanız sevinirim :)
O zaman bir derstede css olusturma yaparsanız sevinirim :)
elinize sağlık güzel bir çalışma cok iyi anlatmışsınız =)
Ders İçin tşkler. Sade ve anlaşılır bir ders olmuş.
Expolorer da açılır menuleri göremiyorum. Firefox görünüyoo. Bunun nedeni ne olabilir acaba? Script kodumu lazım.
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
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