CSS ile Açılır Menü Yapma

Açılır menüleri javascriptle de yapabiliriz ama CSS ile bu işlem çok kolay bir şekilde halledebiliriz.

Başlayalım..

Önce Görüntüsü:

CSS Kodlarımız:

[css]
#menu {
width:400px;
display:inline-block;
padding:0px;
background-color: #069;
text-align:center;
cursor: pointer;
}
.fatihmenu{
display:inline-block;
padding:0px;
margin:0px;
list-style:none;
border-left: 2px #933 solid;
}
ul.fatihmenu ul {
position:absolute;
list-style:none;
display:none;
min-width:140px;
margin-top:3px;
left:-1px;
}
ul.fatihmenu > li{
float:left;
position:relative;
display:block;
color: #FFF;
border-right: 2px #933 solid;
padding: 3px 10px 3px 20px;
min-height:20px;
}
ul.fatihmenu li:hover{
background-color: #000;
}
ul.fatihmenu ul li{
background-color: #935;
margin:1px;
text-align: left;
padding:3px 20px;
}
ul.fatihmenu ul ul {
top: -150;
left:100%;
margin-top:-20px;
}
ul.fatihmenu ul ul > li {
background-color: #551;
}
ul.fatihmenu li > ul{
display:none;
}

ul.fatihmenu li:hover > ul{
position:absolute;
display:block;
padding:0px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
}
[/css]

HTML Kodlarımız:

[php htmlscript=”true”]
<div id="menu">
<ul class="fatihmenu">
<li>Menü 1</li>
<li>Menü 2 (+)
<ul>
<li>Menü2 Alt1
<ul>
<li>En Alt 1</li>
<li>En Alt 2</li>
</ul>
</li>
<li>Menü2 Alt2</li>
<li>Menü2 Alt3 (+)
<ul>
<li>En Alt 1</li>
<li>En Alt 2</li>
</ul>
</li>
<li>Menü2 Alt4</li>
</ul>
</li>
<li>Menü 3</li>
<li>Menü 4 (+)
<ul>
<li>Menü4 Alt1</li>
<li>Menü4 Alt2</li>
</ul>
</li>
</ul>
</div>
[/php]

#menu arka plandaki div tagımız. Böylelikle menünün arka planına istediğimiz gibi şekil veya boyut verebiliriz.

.fatihmenu(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.fatihmenu ana menümüz ise onun içerisindeki diğer ul ise alt menümüzdür bu durumda tanımlamayı ul.fatihmenu ulolarak yaptık. Alt menümüzün görünürlüğünü ise none olarak belirledik. Bu durumda alt menü görünmeyecektir.

ul.fatihmenu 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 uygulama aşağıdaki gibidir.

[php htmlscript=”true”]
<!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=iso-8859-9" />
<title>CSS ile Açılır Menü Yapma</title>
<style type="text/css">
body{
font: bold 13px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
#menu {
width:400px;
display:inline-block;
padding:0px;
background-color: #069;
text-align:center;
cursor: pointer;
}
.fatihmenu{
display:inline-block;
padding:0px;
margin:0px;
list-style:none;
border-left: 2px #933 solid;
}
ul.fatihmenu ul {
position:absolute;
list-style:none;
display:none;
min-width:140px;
margin-top:3px;
left:-1px;
}
ul.fatihmenu > li{
float:left;
position:relative;
display:block;
color: #FFF;
border-right: 2px #933 solid;
padding: 3px 10px 3px 20px;
min-height:20px;
}
ul.fatihmenu li:hover{
background-color: #000;
}
ul.fatihmenu ul li{
background-color: #935;
margin:1px;
text-align: left;
padding:3px 20px;
}
ul.fatihmenu ul ul {
top: -150;
left:100%;
margin-top:-20px;
}
ul.fatihmenu ul ul > li {
background-color: #551;
}
ul.fatihmenu li > ul{
display:none;
}

ul.fatihmenu li:hover > ul{
position:absolute;
display:block;
padding:0px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
}
</style>
</head>

<body>
<div id="menu">
<ul class="fatihmenu">
<li>Menü 1</li>
<li>Menü 2 (+)
<ul>
<li>Menü2 Alt1
<ul>
<li>En Alt 1</li>
<li>En Alt 2</li>
</ul>
</li>
<li>Menü2 Alt2</li>
<li>Menü2 Alt3 (+)
<ul>
<li>En Alt 1</li>
<li>En Alt 2</li>
</ul>
</li>
<li>Menü2 Alt4</li>
</ul>
</li>
<li>Menü 3</li>
<li>Menü 4 (+)
<ul>
<li>Menü4 Alt1</li>
<li>Menü4 Alt2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
[/php]

“CSS ile Açılır Menü Yapma” üzerine 12 yorum

  1. Merhaba,
    Anlatımda açılır menü dikey. Peki bunu yatay yapmak mümkün mü? Yani yatay menüde açılır menüde yatay olacak.

  2. İnsanları saçma sapan sorularla meşgul edenler var gerçekten. Gayet açık ve net anlatımlı olmuş anlaşılmayacak bir şey yok. Zaten html ve css alt yapınız varsa ne nereye gelir çok iyi bilirsiniz. Bilmeseniz de en son noktada göstermiş zaten.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir