Горизонтальное меню на CSS с эффектом
Горизонтальное меню на CSS с эффектом,также можно использовать в качестве кнопок.
В CSS в самый низ ставим:
Код
ul {
font-family: Georgia;
list-style-type: none;
font-size: 14px;
color: #fff;
height: 50px;
width: 510px;
margin: 0 auto;
padding-top: 15px;
}
ul li {
float: left;
padding: 1px;
text-align: center;
}
ul li a {
float: left;
display: block;
background: #0094D6;
text-decoration: none;
color: #fff;
position: relative;
}
ul li a:hover {
background: #FF7700;
z-index: 10;
margin: 0 -10px;
top: -10px;
opacity: 0.7;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
}
ul li a span {
float: left;
display: block;
padding: 10px 0;
text-decoration: none;
color: #fff;
width: 100px;
cursor: pointer;
}
ul li a:hover span {
width: 120px;
padding: 20px 0;
}
Там где хотим видеть ставим это:
Код
<ul>
<li><a href="http://ucozmafia.ru" title=""><span>Главная</span></a></li>
<li><a href="http://ucozmafia.ru" title=""><span>скрипты ucoz</span></a></li>
<li><a href="http://ucozmafia.ru" title=""><span> шаблоны ucoz</span></a></li>
<li><a href="http://ucozmafia.ru" title=""><span>Портфолио</span></a></li>
<li><a href="http://ucozmafia.ru" title=""><span>Форум</span></a></li>
</ul>
Меняем ссылки и название на нужное.
