• Bu site çerezler kullanır. Bu siteyi kullanmaya devam ederek çerez kullanımımızı kabul etmiş olursunuz. Daha fazla bilgi edin.

Css İle Dikey Açılır Menü Yapımı

Konuyu Okuyan Kişiler (0)

GüçNet

webmaster.tc
Katılım
6 Ağu 2012
Mesajlar
965
Beğeniler
0
Yaş
27
Konum
Akkapı
#1
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.
HTML:
<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.

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

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

HTML:
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…

HTML:
ul li {
position: relative;
}

li:hover ul {
display: block;
}

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

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

HTML:
a {
color: #FFFFFF;
}
Menümüz hazır…










Kaynak : barisozcan.net
 

Doğan

webmaster.tc
Katılım
4 Ağu 2012
Mesajlar
492
Beğeniler
0
Konum
Cemaat Evi
#2
Konu dışı olabilir:
iki tane yan yana icon eklemek istiyorum ama br koduyla yapamadım. :(
*biraz yardımcı olur musunuz ?
 

GüçNet

webmaster.tc
Katılım
6 Ağu 2012
Mesajlar
965
Beğeniler
0
Yaş
27
Konum
Akkapı
#3
listeleme kodu ile ekleyin iconlarınızı sonrada "li" etiketlerine float:left komunutunu verin büyük ihtimal çözülür.