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