17-03-2015 Saat: 15:20
(Son Düzenleme: 17-03-2015 Saat: 15:20, Düzenleyen: abdullahozturk.)
Yeni bir menü ile karşınızdayım.Sadece CSS ile yapılmıştır.Çok kullanışlı ve güzeldir.Ben yapmadım menüyü.
HTML KODLARI;
CSS KODLARI;
HTML KODLARI;
PHP Kod:
<ul id="menu">
<li>
<a href="http://genelforum.10tr.net/">
HOME
</a>
<span></span>
</li>
<li>
<a href="http://genelforum.10tr.net/">
ARTICLES
</a>
<span></span>
</li>
<li>
<a href="http://genelforum.10tr.net/">
TUTORIALS
</a>
<span></span>
</li>
<li>
<a href="http://genelforum.10tr.net/">
RESOURCES
</a>
<span></span>
</li>
<li>
<a href="http://genelforum.10tr.net/">
SNIPPETS
</a>
<span></span>
</li>
<li>
<a href="http://genelforum.10tr.net/">
WORDPRESS
</a>
<span></span>
</li>
<li>
<a href="http://genelforum.10tr.net/">
INSPIRATION
</a>
<span></span>
</li>
</ul>
CSS KODLARI;
PHP Kod:
#menu, #menu ul {
/* Remove bullet points and add fonts */
list-style: none;
font-family: Helvetica, Arial, sans-serif;
}
#menu li {
/* Horizontal menu, not vertical. Then just a little extra positioning */
float: left;
position: relative;
margin-right: 20px;
height: 40px;
}
#menu li a {
/* Clear up the links and position them correctly */
color: #000;
padding: 0 15px;
text-decoration: none;
display: block;
position: relative;
height: 40px;
padding: 10px 15px;
font-weight: bold;
/* Quick animations to animate the anchor */
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
}
#menu li span {
/* Default width of the span (acts as border). Z-index so it appears behind the words. */
width: 6px;
z-index: -1;
/* Position it absolutely so it goes where we want it to go */
position: absolute;
left: 0;
top: 0;
height: 100%;
/* Animation again, because both the span and the anchor will be animated */
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
}
PHP Kod:
#menu li:nth-of-type(1) span { background: #c04545; }
#menu li:nth-of-type(2) span { background: #c06b45; }
#menu li:nth-of-type(3) span { background: #88c045; }
#menu li:nth-of-type(4) span { background: #48c045; }
#menu li:nth-of-type(5) span { background: #45c0aa; }
#menu li:nth-of-type(6) span { background: #4576c0; }
#menu li:nth-of-type(7) span { background: #7945c0; }
PHP Kod:
#amenu li:hover > span {
/*Change the width of this span to 100% */
min-width: 100%;
}
#menu li a:hover {
color: #fff;
}
#menu li:hover {
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
}
