Bu dersimizde sizlere css ile açılır menü hakkında bilgi vereceğim.
Css Kodları
HTML:
/* MENU ana cerceve*/
#menu {
width:1000px;
display:inline-block;
padding:0px;
background-color: #575762;
text-align:center;
}
/* Ana menu */
.hmenu {
display:inline-block;
padding:0px;
margin:0px;
list-style:none;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;
}
/* Ana Menu elemanlari */
ul.hmenu>li {
float:left;
position:relative;
display:block;
color: #FFF;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
padding-right: 10px;
padding-left: 10px;
padding-bottom:3px;
padding-top:3px;
}
/* Ana Menu uzerine gelince arka plan rengi */
ul.hmenu li:hover {
background-color: #67697A;
}
/* Ana menu link bicimlendirme */
ul.hmenu li a {
color: #FFF;
text-decoration: none;
display:block;
}
/* alt menu */
ul.hmenu ul {
position:absolute;
list-style:none;
display:none;
min-width:120px;
margin-top:3px;
left:-1px;
}
/* Alt menu bicimlendirme */
ul.hmenu ul li {
background-color:#505E69;
margin:1px;
text-align: left;
padding:3px;
}
/* Ana menu uzerine gelince alt menuyu ac */
ul.hmenu li:hover>ul {
position:absolute;
display:block;
padding:0px;
}
/* bitti */.hmenu(horizontal(yatay) menü) ana menumuz oluyor, tabi içinde ise menü elemanlarimiz var. bu durumda menümüz ul ve li etiketlerinden oluşmaktadır.
ul.hmenu ana menümüz ise onun içerisindeki diğer ul ise alt menümüzdür bu durumda tanımlamayı ul.hmenu ul olarak yaptık. Alt menümüzün görünürlüğünü ise none olarak belirledik. Bu durumda alt menü görünmeyecektir.
ul.hmenu li:hover>ul Burada ise ana menü elemanı üzerine gelince alt menümüzü görünür yapıyoruz ve böylelikle de alt menümüz açılmış oluyor.
ÖRNEK KODLARIMIZ AŞAĞIDAKİ GİBİDİR.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Nav Menu</title>
<style type="text/css">
#menu {
width:1000px;
display:inline-block;
padding:0px;
background-color: #575762;
text-align:center;
}
.hmenu {
display:inline-block;
padding:0px;
margin:0px;
list-style:none;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;
}
ul.hmenu>li {
float:left;
position:relative;
display:block;
color: #FFF;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
padding-right: 10px;
padding-left: 10px;
padding-bottom:3px;
padding-top:3px;
min-height:20px;
}
ul.hmenu li:hover {
background-color: #67697A;
}
ul.hmenu li a {
color: #FFF;
text-decoration: none;
display:block;
}
ul.hmenu ul {
position:absolute;
list-style:none;
display:none;
min-width:120px;
margin-top:3px;
left:-1px;
}
ul.hmenu ul li {
background-color:#505E69;
margin:1px;
text-align: left;
padding:3px;
}
ul.hmenu li:hover>ul {
position:absolute;
display:block;
padding:0px;
}
</style>
</head>
<body>
<div id="menu">
<ul class="hmenu">
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Kategoriler (+)</a>
<ul>
<li><a href="#">Alt Menü 1</a></li>
<li><a href="#">Alt Menü 2</a></li>
<li><a href="#">Alt Menü 3</a></li>
</ul>
</li>
<li><a href="#">İşlemler</a>
<ul>
<li><a href="#">Alt Menü 1</a></li>
<li><a href="#">Alt Menü 2</a></li>
<li><a href="#">Alt Menü 3</a></li>
</ul>
</li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
</body>
</html>