Colorful horizontal

By

renkli
Sadece Css  kullanılarak hazırlanmış  açılır (drop down) üst menü örneği. Css3 drop down menü örneğinde beş tane  kategori eklenecek  şekilde  hazırlanmış olup her kategorinin arka planına farklı farklı  renkler  atanmış. Dilerseniz bu şekilde  rengarenk olarak kullanırsınız yada #menu1, #menu2, #menu3, #menu4, #menu5 sınıflarını css  kodlardan silerek yada hepsini aynı renk yaparak tek renk şeklinde  kullanablirsiniz.   Örnek olarak eklediğimresim tam anlamıyla  demonun nasıl çalıştığını gösteriyor sanırım. Css3 drop down menü örneğinde mouse ile alt linklere  sahip  kategorilerin üzerinde gezdiğinizde yavaşça netleşip yukarı doğru çıkan alt menü penceresini görebilirsiniz. Yukardan aşağı  değilde  aşağıdan yukarıya doğru bir  anda belirirp  yükseliyor. Mouseyi çektiğinizde  ise  yavaşça  aşağı inerken kayboluyor.

 

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css :

* {
 margin: 0;
 padding:0;
 font-family: sans-serif;
}
nav {
 padding: 10px;
 width: 770px;
 margin: 150px auto;
 border-radius: 5px;
 text-align: center;
}
#menu li {
 display: inline-block;
 width:150px;
 height: 30px;
 line-height: 30px;
 position: relative;
}
#menu ul {
 visibility:hidden;
 position: absolute;
 background-color:#333333;
 border-radius: 3px;
 width: 150px;
 opacity: 0;
 top:50px;
 border:1px solid black;
 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: 32px;
 visibility:visible;
}
#menu ul li {
 display: block;
 position: relative;
}
#menu ul li a {
 font-size: 0.6em;
 padding: 0 8px;
}
#menu a{
 display: block;
 color: #fff;
 text-decoration: none;
 text-transform: uppercase;
 padding: 0px 10px;
 border-radius: 3px;
 font-size: 0.9em;
}
#menu a:hover {
 background-color: white;
 color: #468ECD;
 box-shadow: 0px 1px 2px rgba(0,0,0, 0.2);
 text-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}
#menu ul li a {
 border-radius: 0px;
 padding-left: 30px;
}
#menu li.menu1{ background-color:#ea5080;color:#aa2a52;}
#menu li.menu2{ background-color:#53bfe2;color:#2884a2;}
#menu li.menu3{ background-color:#f8c54d;color:#ab8426;}
#menu li.menu4{ background-color:#df6dc2;color:#9f3c85;}
#menu li.menu5{ background-color:#33CC00;;color:#9f3c85;}

  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<nav>
 <ul id="menu">
 <li class="menu1"><a href="http://mintik.com">Home</a></li>
 <li class="menu2"><a href="http://mintik.com/category/photoshop-tutorials/">Photoshop</a></li> 
 <li class="menu3"><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 class="menu4"><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 class="menu5"><a href="http://mintik.com/?p=14369">Tutorial</a></li>
 </ul>
 </nav>

 



Leave a Comment

Your email address will not be published.

You may also like

Trend