Sağ tarafında alt menüler çıkan Css3 dikey menü örneği diye başlık attım ama sanırım bu örneğe dikey menü örneği demek için bin şahit lazım 🙂 Aslında demonun arkaplanına uygun birşeyler yapayım derken bu hale geldi. Görüntü olarak yinede bana göre hoş bir tasarım olarak görünsede sitelerde kullanılabilecek bir örnek olmaması biraz kötü işte. Kim bu koca çerçevelere ait menüleri kullanır ki ? 🙂 Yine de bu Css3 dikey menü örneğinde işinize yarayacak parçalar mutlaka olacaktır. Sağ tarafta çıkan alt menüler tooltip benzeri bir çerçeve içerisinde açılıyor ve herhangi bir resim dosyadı kullanmadım. Css3 dikey menü örneğinin biraz büyük olması dışında pek fazla kusuru yok gibi. Biraz daha küçülterek kullanabilirsiniz. Özellikle 3D olarak hazırlanmış (text generator kullandım ben yapmadım) olan kategori başlıklarının üzerine mouseyi götürdüğünüzde resimde de gördüğünüz gibi yazı rengi açık gri oluyor. Yazı efekti 3D olması ve renginin de bu şekilde olması biraz gerçekçi, metalik yazı tiplerini andırıyor.
Kullanım
- Head etiketleriarasına eklemeniz gereken bölüm.
Css :
* {
margin: 0;
padding:0;
font-family: sans-serif;
}
body {
background-color:#999999;
}
nav {
padding: 10px;
width: 500px;
height:auto;
margin: 50px auto;
border-radius: 3px;
text-align: center;
}
#menu > li {
display: inline-block;
width: 250px;
height: 50px;
margin: 5px 5px 5px 5px;
line-height: 50px;
position: relative;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow: inset 5px 5px 20px #000000;
-webkit-box-shadow: inset 5px 5px 20px #000000;
box-shadow: inset 5px 5px 20px #000000;
/*Inner elements should not cover inner shadows*/
/*Chrome renders inset shadows incorrectly with border-radius*/
/*IE 7 AND 8 DO NOT SUPPORT INSET SHADOWS*/
}
#menu > li > a{
display: block;
color:#333333;
text-decoration: none;
text-transform: uppercase;
padding: 15px 10px;
border-radius: 3px;
font-family: Garamond, serif;
line-height: 1em;
font-weight:bold;
font-size: 25px;
text-shadow:0px 0px 0 rgb(-104,-104,-104),1px 1px 0 rgb(-232,-232,-232), 2px 2px 0 rgb(-359,-359,-359),3px 3px 2px rgba(0,0,0,0),3px 3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);
}
#menu > li > a:hover {
color:#CCCCCC; box-shadow: 0px 1px 2px rgba(0,0,0, 0.2);
}
#menu > li > ul {
visibility:hidden;
position: absolute;
background-color:#999999;
border-radius: 10px;
width: 172px;
opacity: 0;
top:-70px;
left:270px;
border:4px solid #CCCCCC;
text-align: left;
-webkit-transition: top 0.2s ease-in 0.1s ,opacity 0.3s ease-in 0.1s, visibility 0.3s ease-in;
}
#menu > li:hover ul{
opacity: 1;
top: -70px;
left:270px;
visibility:visible;
}
#menu > li > ul:before {
content: '';
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid white;
position: absolute;
top: 75px;
left: -20px;
}
#menu > li > ul > li {
position: relative;
width:170px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border:1px solid #CCCCCC;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c2c2c2', endColorstr='#b8b8b8');
background: -ms-linear-gradient(top, #c2c2c2 0%, #bdbdbd 50%, #b8b8b8 51%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(50%, #bdbdbd), color-stop(51%, #b8b8b8));
background: -moz-linear-gradient(top, #c2c2c2 0%, #bdbdbd 50%, #b8b8b8 51%);
background: -o-linear-gradient(top, #c2c2c2 0%, #bdbdbd 50%, #b8b8b8 51%);
background: linear-gradient(top, #c2c2c2 0%, #bdbdbd 50%, #b8b8b8 51%);s
}
#menu > li > ul > li > a {
font-size: 30px;
color:#333333;
text-decoration:none;
padding: 10 8px;
padding-left: 30px;
text-shadow: 1px 1px grey, -1px -1px #444;
}
#menu > li > ul > li > a:hover {
font-size: 30px;
color:#999999;
text-decoration:none;
padding: 10 8px;
padding-left: 30px;
text-shadow: 1px 1px grey, -1px -1px #444;
}
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<nav> <ul id="menu"> <li><a href="https://www.mintik.com">Home</a></li> <li><a href="https://www.mintik.com/category/photoshop-tutorials/">Photoshop</a></li> <li><a href="https://www.mintik.com/category/webmaster/">Webmaster</a> <ul> <li><a href="https://www.mintik.com/category/css/">Css3</a></li> <li><a href="https://www.mintik.com/category/jquery/">jQuery</a></li> <li><a href="https://www.mintik.com/category/mootools-ornekleri/">Mootools</a></li> <li><a href="https://www.mintik.com/category/yahoo-yui/">Yui</a></li> <li><a href="https://www.mintik.com/category/html5/">Html5</a></li> </ul> </li> <li><a href="https://www.mintik.com/category/wordpress/">Wordpress</a> <ul> <li><a href="https://www.mintik.com/category/theme/">Theme</a></li> <li><a href="https://www.mintik.com/category/wordpress-eklentiler/">Plugin</a></li> <li><a href="https://www.mintik.com/category/wordpress-widget/">Widget</a></li> </ul> </li> <li><a href="https://www.mintik.com/2013/11/03/sag-tarafinda-alt-menuler-cikan-css3-dikey-menu-ornegi/">Tutorial</a></li> </ul> </nav>