Merhaba arkadaşlar bu yazıda, CSS ile nasıl açılır menü yapılacağını öğreneceğiz. Bu işlemi gerçekleştirebilmek için CSS mantığını iyi bir şekilde kavramış olmamız lazım.
Açılır Menü Mantığı nedir?
Eğer iyi derecede CSS bilgisine sahipseniz kolaylıkla bunun mantığını öğrenebilirsiniz. Fakat CSS bilgisi az olanlar ise biraz daha uğraşmaları gerekecek. Peki Açılır menü mantığı nedir?
CSS iç içe tagların sırasıyla nelerin olacağını belirler. Yani bir div oluşturduğumuz zaman bunu içine ul eklersek ve eğer bunu CSS ile görsellik kazandırmak istersek daha anlaşılır olması için; Bir örnekle açıklayalım.
ÖRNEK : menu divi içinde ul ve li taglarıyla menü oluşturulmuş.CSS ile li tagına dinamiklik kazandıracağız.
Yani :
<div id="menu"> //en dışta menu var
<ul> //menu içinde ul
<li>Anasayfa</li> //ul içinde li
<li>Hakkımda</li>
<li>iletişim</li>
</ul>
</div>
<ul> //menu içinde ul
<li>Anasayfa</li> //ul içinde li
<li>Hakkımda</li>
<li>iletişim</li>
</ul>
</div>
CSS olarak ise :
#menu ul li {
background:blue; //li tag'ının artık arka plan rengi mavi oldu.
}
background:blue; //li tag'ının artık arka plan rengi mavi oldu.
}
şeklinde sırasıyla tagları yazarak bu işlemli gerçekleştiriyoruz.
Ayrıca bir diğer önemli konu olan hover özelliğine de değinmek gerekiyor.
Hover ise belirlenen alanın mouse ile üzerine gelince neler olacağı anlamına geliyor. Bunu bir diğer dersim olan CSS Resmin Üzerine Gelince Efekt Vermek adlı derste daha iyi öğrenebilirsiniz.
Kısaca : hover (css kodu)
#menu ul li:hover
{
background:yellow; //menü divi içindeki ul ve onun içindeki li mouse ile üzerine gelince arkaplanı sarı olacak.
}
{
background:yellow; //menü divi içindeki ul ve onun içindeki li mouse ile üzerine gelince arkaplanı sarı olacak.
}
şimdi de asıl meselemiz olan Açılır Menü Nasıl Yapılır'a gelelim.
Css Kodları Ile Dikey Açılır Menü Yapımı
HTML KOD
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS ile Açılır Menü Yapımı</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li class="acilir-menu-icon"><a href="#">Kategoriler</a>
<ul>
<li><a href="#">Araba</a></li>
<li><a href="#">Motor</a></li>
<li><a href="#">Bisiklet</a></li>
</ul>
</li>
<li><a href="#">iletişim</a></li>
</ul>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS ile Açılır Menü Yapımı</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li class="acilir-menu-icon"><a href="#">Kategoriler</a>
<ul>
<li><a href="#">Araba</a></li>
<li><a href="#">Motor</a></li>
<li><a href="#">Bisiklet</a></li>
</ul>
</li>
<li><a href="#">iletişim</a></li>
</ul>
</div>
</body>
</html>
CSS KOD
.menu
{
width:auto;
height:40px;
background:#333;
margin:0 auto;
}
.menu ul
{
margin:0;
list-style:none;
}
.menu ul li
{
width:120px;
padding:5px;
height:30px;
line-height:30px;
float:left;
color:#fff;
text-align:center;
position:relative;
border-right:1px solid #CCC;
}
.menu ul li:hover
{
background:#CCC;
border-right:1px solid #CCC;
}
.menu ul li ul
{
display:none;
position:absolute;
background:#666;
left:10px;
top:40px;
}
.menu ul li:hover ul
{
display:block;
border-right:1px solid #CCC;
}
.menu ul li a
{
color:#fff;
font-family:Tahoma, Geneva, sans-serif;
font-size:15px;
}
{
width:auto;
height:40px;
background:#333;
margin:0 auto;
}
.menu ul
{
margin:0;
list-style:none;
}
.menu ul li
{
width:120px;
padding:5px;
height:30px;
line-height:30px;
float:left;
color:#fff;
text-align:center;
position:relative;
border-right:1px solid #CCC;
}
.menu ul li:hover
{
background:#CCC;
border-right:1px solid #CCC;
}
.menu ul li ul
{
display:none;
position:absolute;
background:#666;
left:10px;
top:40px;
}
.menu ul li:hover ul
{
display:block;
border-right:1px solid #CCC;
}
.menu ul li a
{
color:#fff;
font-family:Tahoma, Geneva, sans-serif;
font-size:15px;
}
Bir sorunuz olursa yorum yaparak sorabilirsiniz. Yardımcı olmaya çalışırım.
Umarım faydalı olmuştur.
İlk Yorumu Sen Yap