Basit bir yan-menü tasarımı

By

alt
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="http://mintik.com">Home</a></li>
 <li><a href="http://mintik.com/category/photoshop-tutorials/">Photoshop</a></li> 
 <li><a href="http://mintik.com/category/webmaster/">Webmaster</a>
 <ul>
 <li><a href="http://mintik.com/category/css/">Css3</a></li>
 <li><a href="http://mintik.com/category/jquery/">jQuery</a></li>
 <li><a href="http://mintik.com/category/mootools-ornekleri/">Mootools</a></li>
 <li><a href="http://mintik.com/category/yahoo-yui/">Yui</a></li>
 <li><a href="http://mintik.com/category/html5/">Html5</a></li>
 </ul>
 </li>
 <li><a href="http://mintik.com/category/wordpress/">Wordpress</a>
 <ul>
 <li><a href="http://mintik.com/category/theme/">Theme</a></li>
 <li><a href="http://mintik.com/category/wordpress-eklentiler/">Plugin</a></li>
 <li><a href="http://mintik.com/category/wordpress-widget/">Widget</a></li>
 </ul>
 </li> 
 <li><a href="http://mintik.com/2013/11/03/sag-tarafinda-alt-menuler-cikan-css3-dikey-menu-ornegi/">Tutorial</a></li>
 </ul>
 </nav>

 



Leave a Comment

Your email address will not be published.

You may also like

Trend