lostyazilim
tr.link

CSS DropDown Menü

3 Mesajlar 1.271 Okunma
acebozum
tr.link

CeDy CeDy www.dulye.net Kullanıcı
  • Üyelik 28.05.2013
  • Yaş/Cinsiyet 34 / E
  • Meslek Web Tasarım Arayüz Uzmanıyım
  • Konum İstanbul Anadolu
  • Ad Soyad ** **
  • Mesajlar 13
  • Beğeniler 1 / 5
  • Ticaret 0, (%0)


Öncelikle size CSS nedirden bahsetmicam.Hiç uzatmadan direk konuya girecam.

Sadece CSS kullanarak Deopdown menüler nasıl yapılır kısaca basitce anlatıcam.

Zaten yazıları okumadan sadece kodlara bakarakta yapabilirsiniz..

Öncelikle basitçe detaylarını verim size..

Burda önemli olan

ilk list menünün li tagı aşağıdaki şekilde olması gerekir.Çünkü ikinci list menün li nin içine gelecek

#menu ul li {
display: block;
position:relative;
float: left;
}

İkinci list menüde display nını none yapıyoruz görünmesin aşağıdaki şekilde olacak siz istediğiniz gibi renk boyut border vs ekliğyebilirsiniz.

#menu ul li ul {
display:none;
position:absolute;
top:65px;
background:#fff;
padding:0px;
margin:0px;
left:0px;
}


Şimdi menüye başlıyalım.

bir div oluşturduk.menu adında bir id verdik.margin leri sağ sol auto verdik ki ortalansın diye.

#menu {background-color:#f2f1f1;
margin: 0px auto 0px auto;
padding: 0px;
height: 70px;
width: 710px;
border: 4px double #f8cc66;}

Menünün ul tagının özelliklerini verdiğin dediğim gibi siz istediğin özellileri verebilirsiniz...

Aşağıdaki margin paddin 0 verilmiş genelde fazla kod yazılmamk için div ,ul,body vs bütün tagların genel özellikleri sıfırlamak için CSS resetler kullanılır.

#menu ul {
list-style-type: none;
display: block;
margin: 0px;
padding:0px;
}

Bu aşamada li tagının genel özelliklerini verdik.burda dikkat edilmesi gereken position reletive olması..

#menu ul li {display: block;
position:relative;
float: left;padding:24px;
margin: 0px 10px 0px 10px;
cursor:pointer;}

İlk list menünün son aşamsına geldik.link tagının genel özellikleri siz istediğin özellikleri ve değerleri verebilirsiniz.

#menu ul li a {
float: left;
font-family: "Comic Sans MS", cursive;
color: #7b7a7a;
font-weight: bold;
font-size: 15px;
line-height: 16px;
text-decoration: none;
}

Linkin üzerine gelince ne olmasını istiyorsakonu yapıyoruz.ben sadece border verdim.

#menu ul li:hover{border-bottom: 2px solid #e1472f;}

ikinci list menüye başlıyalım burda dikkat edilmesi gereken display none ve position absolute..

ve şunuda dikkat edin biz yukardaki ilk ul ye ne özellik verdik isek aynı özellikler bu ul tagınıda etkiler o yuzden o özellikerli burda nasıl olmasını isitıyorsak ona göre

yapmalıyız.renk boyut,arka plan vs gibi aynı şekil li ve tagı içinde geçerlidir.

#menu ul li ul {
display:none;
position:absolute;
top:65px;
background:#fff;
padding:0px;
margin:0px;
left:0px;
}


Evet geldi ilk menü li tagının üzerine gelince ikinci list menünün görünmesini sağlamak... display block

#menu ul li:hover ul {
display:block;
}

Biz li tagına istediğimiz özellikleri veriyoruz.. yukardaki li tagıyla aynı olmaması için yukardaki özellikleri bu li tagında kendi isteğimize göre değiştiryoruz.

#menu ul li ul li{
margin: 0px;
padding:2px;
display:block;
border-right: 1px solid #ccc;
border-top: 1px solid #ddd;
border-left: 1px solid #ccc;}

Şimdi geldik son taga link tagına burdada istediğimiz özellikleri veriyoruz.

#menu ul li ul li a {
font-family: "Comic Sans MS", cursive;
font-size: 15px;
line-height: 16px;
text-decoration: none;
color: #000;
display: block;
padding:12px;
float:none;
width:200px;


}

Son hover üzerine gelince yukarda li hover vardı o yüzden bunu sıfırlamalıyız..Çunku #menu ul,#menu ul li ul aynı algılanıyor.Biz değiştirmedğimiz sürece.

örnek olarak mesala içi içe divler olsun


deneme yazısı 1



deneme yazısı 2




yukardaki #m1 p {ne özellik verirsek}

m2 nin içindeki aynı özellik alacak Çünkü m1 hepsini kapsıyor.

#menu ul li ul li:hover{border-bottom:none;}
Kendimize göre a linkini hover özelliğini değiştiryoruz..

#menu ul li ul li a:hover{color:#fff;background:#e1472f}

Son olarak html kodlar..

Onur89TR kilitbilgi

kişi bu mesajı beğendi.

www.dulye.net
wmaraci
reklam

Onur89TR Onur89TR Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 04.12.2011
  • Yaş/Cinsiyet 35 / E
  • Meslek .
  • Konum İzmir
  • Ad Soyad ** **
  • Mesajlar 2376
  • Beğeniler 704 / 791
  • Ticaret 1, (%100)
İlerde dikey menü anlatımınızı bekliyoruz. Bir de jQuery veya CSS ile alt menüsü olan kısımlara nasıl ok konur, bunu da anlatırsanız sevinirim. İyi çalışmalar.
 

 

kilitbilgi kilitbilgi kilitbilgi@gmail.com Kullanıcı
  • Üyelik 13.06.2012
  • Yaş/Cinsiyet 31 / E
  • Meslek Bilgisayar Mühendisi
  • Konum İzmir
  • Ad Soyad B** Ç**
  • Mesajlar 396
  • Beğeniler 82 / 125
  • Ticaret 3, (%100)
Paylaşım için teşekkürler.
Demo olarak http://codepen.io/kilitbilgi/pen/fhsmw adresini inceleyebilirsiniz.
Kolay gelsin.
 

 

wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al