Animált menü
2013.05.23. 15:52
Demó:
HTML kód:
<ul class="menu2">
<li>
<a href="URL CÍM HELYE"><span>MENÜ NEVE 1</span></a></li>
<li>
<a href="URL CÍM HELYE"><span>MENÜ NEVE 2</span></a></li>
<li>
<a href="URL CÍM HELYE"><span>MENÜ NEVE 3</span></a></li>
<li>
<a href="URL CÍM HELYE"><span>MENÜ NEVE 4</span></a></li>
</ul>
CSS kód:
<style type="text/css">
ul.menu2{
margin: 0;
padding: 0;
list-style: none;
}
ul.menu2 li{
width: 150px; /*menü szélessége*/
clear:left;
overflow: hidden;
}
ul.menu2 li span{
display: block;
float: left;
min-width: 0px;
margin-bottom: 5px;
padding: 8px;
color: #5d5d5d;
}
ul.menu2 li:hover span{
color: #fff;
background: #ce3e3e;
border-left: 8px solid darkred;
min-width: 450px;
-webkit-box-shadow: 0 0 5px gray;
-moz-box-shadow: 0 0 5px gray;
box-shadow: 0 0 5px gray;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}</style>
|