Sadece css kullanılarak hazırlanmış drop down (açılır kapanır) üst menü örneği. Aslında bu menüyü kullanabilmek için css kodlar arasında baya bi dolanmanız gerekiyor. Herşeye rağmen bana göre kırmızı renk harici diğer menü özellikleri baya bi güzel hazırlanmış. Mouse butonların üzerinde gezdiğinde aşağı inen link paneli de metalik bir görüntüye sahip.
Css3 drop down üst menü örneğinde üç tane butona alt menü eklenebiliyor ve her buton için ayrı bir sınıf atanmış. Menu01, menu02, menu03, menu04 ve menu05 olarak adlandırılan bu sınıflar da 1. sınıf en soldaki buton ile 5. sınıf da en sağdaki buton ile ilişkilendirilmiş. En soldakinin sol tarafta kalan kenarları oval sağ tarafta kalan kenarıda düz olarak ayarlanmış. En sağdakide bunun tam tersi olarak ayarlanmış. Bu sayede menünün kenarları oval olarak görünüyor. Ortada kalan butonların kenarları düz. Yani 2,3 ve 4. sınıf olarak adlandıırlmış butonları en sağa yada en sola aldığınızda menüde bozulma göreceksiniz.
Css3 drop down üst menü örneğinde alt panele sahip olan menü sınıfları menu01, menu02 ve menu03 olarak adlandırılmış. Menu01de 5 tane link ekleyebileceğiniz bir panel açılıyor, menu02de 3 tane link ekleyebileceğiniz bir panel açılıyor ve menu03te ise 4 tane link ekleyebileceğiniz bir panel açılıyor. Açılan panel pencerelerinin boyları sabit yani ekleyeceğiniz linklere bağlı olarak yükseklikleri değişmiyor. Eğer bir butonda 6 yada yedi tane link eklemek istiyorsanız css kodlar içinde bunu ayarlamanız gerekmekte. Zaten html ve css menü kodlarını dikkatlice incelerseniz eğer aradaki farkı görebilirsiniz.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölüm.
Css :
* {
margin: 0;
padding: 0;
}
body {
background: #fff;
font-family: "Hiragino Kaku Gothic ProN", Verdana,Helvetica, sans-serif;
}
li {
list-style: none;
}
#nav {
width: 650px;
height: 33px;
margin: 20px auto;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 1px 1px 3px #999;
-webkit-box-shadow: 1px 1px 3px #999;
-moz-box-shadow: 1px 1px 3px #999;
}
.menu {
float: left;
position: relative;
width: 130px;
height: 1px;
transition: 0.3s ease-in-out;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 1px 1px 3px #999;
-webkit-box-shadow: 1px 1px 3px #999;
-moz-box-shadow: 1px 1px 3px #999;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background: -moz-linear-gradient(#fff, #eee);
}
.menu01:hover {
height: 180px;
}
.menu02:hover {
height: 120px;
}
.menu03:hover {
height: 150px;
}
.menu04:hover {
height: 20px;
}
.menu05:hover {
height: 20px;
}
.menu li {
position: absolute;
left: 0;
width: 128px;
border-left: solid 1px #ccc;
border-right: solid 1px #ccc;
}
.menu li a {
display: block;
height: 21px;
padding: 10px 0 0 5px;
color: #f52;
font-size: 10px;
text-decoration: none;
}
.menu li a:hover {
background: #FDC;
cursor: pointer;
}
.menu .main {
top: 0%;
z-index: 1;
text-align: center;
width: 130px;
border: none;
}
.menu .main a {
height: 25px;
font-size: 12px;
font-weight: bold;
color: #fff;
padding: 6px 0 0;
border-top: solid 1px #d21;
border-bottom: solid 1px #d21;
text-shadow: 0 -1px 1px #d21;
background: -webkit-gradient(linear, left top, left bottom, from(#f96), color-stop(90%, #f42), to(#f21));
background: -moz-linear-gradient(#f96, #f42 90%, #f21);
}
.menu01 .main {
border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
}
.menu01 .main a {
border-left: solid 1px #d21;
border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
}
.menu .main a:hover {
background: #A6E;
background: -webkit-gradient(linear, left top, left bottom, from(#f74), color-stop(90%, #f21), to(#f00));
background: -moz-linear-gradient(#f74, #f21 90%, #f00);
text-shadow: 0 -1px 1px #a11;
}
.menu01 .sub01 {
top: 17%;
}
.menu01 .sub02 {
top: 34%;
}
.menu01 .sub03 {
top: 50%;
}
.menu01 .sub04 {
top: 67%;
}
.menu01 .sub05 {
top: 84%;
border-bottom: solid 1px #ccc;
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
.menu01 .sub05 a {
height: 19px;
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
.menu02 .sub01 {
top: 25%;
}
.menu02 .sub02 {
top: 50%;
}
.menu02 .sub03 {
top: 75%;
border-bottom: solid 1px #ccc;
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
.menu02 .sub03 a {
height: 19px;
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
.menu03 .sub01 {
top: 20%;
}
.menu03 .sub02 {
top: 40%;
}
.menu03 .sub03 {
top: 60%;
}
.menu03 .sub04 {
top: 80%;
border-bottom: solid 1px #ccc;
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
.menu03 .sub04 a {
height: 19px;
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
.menu05 .main {
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
}
.menu05 .main a {
border-right: solid 1px #d21;
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
}
.menu05 .sub01 {
top: 25%;
}
.menu05 .sub02 {
top: 50%;
}
.menu05 .sub03 {
top: 75%;
border-bottom: solid 1px #ccc;
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
.menu05 .sub03 a {
height: 19px;
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div id="nav"> <ul class="menu menu01"> <li class="main"><a href="https://www.mintik.com/category/webmaster/">Webmaster</a></li> <li class="sub01"><a href="#">jQuery</a></li> <li class="sub02"><a href="#">Css3</a></li> <li class="sub03"><a href="#">JavaScript</a></li> <li class="sub04"><a href="#">Ajax</a></li> <li class="sub05"><a href="#">Html5</a></li> </ul> <ul class="menu menu02"> <li class="main"><a href="https://www.mintik.com/category/wordpress/">Wordpress</a></li> <li class="sub01"><a href="#">Tema</a></li> <li class="sub02"><a href="#">Eklenti</a></li> <li class="sub03"><a href="#">Widget</a></li> </ul> <ul class="menu menu03"> <li class="main"><a href="https://www.mintik.com/category/scritp/">Script</a></li> <li class="sub01"><a href="#">Php</a></li> <li class="sub02"><a href="#">Asp</a></li> <li class="sub03"><a href="#">Flash</a></li> <li class="sub04"><a href="#">Cms</a></li> </ul> <ul class="menu menu04"> <li class="main"><a href="https://www.mintik.com/category/photoshop-tutorials/">Photoshop</a></li> </ul> <ul class="menu menu05"> <li class="main"><a href="https://www.mintik.com/?p=14337">Tutorial</a></li> </ul> </div>