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