Достаточно оригинальное меню с необычным эффектом при наведении на пункты. При наведение сама запись поднимается вверх как хинт в светлом оттенке цвета. Что очень оригинально смотрится и безусловно органично и красиво.
Установка:
В самый низ вашего css вставляйте:
Код
.menu2 {
font-family:arial;
margin-top : 50px;
width : 400px;
}
.menu2 ul {
border-radius : 3px;
margin:0;
padding:0;
}
.menu2 ul:after, .menu2 ul:before {
display : block;
content :'';
}
.menu2 ul:after {
clear : both;
}
.menu2 li {
list-style-type : none;
background : linear-gradient(rgba(220, 220, 255, 0.4) 85%, rgba(255, 255, 255, 0.5) 100%);
float : left;
cursor : pointer;
padding : 3px 10px;
border-top : 2px solid rgba(200, 200, 255, 0.5);
border-bottom : 2px solid rgba(50, 50, 50, 0.4);
}
.menu2 li:first-child {
border-radius : 5px 0 0 5px;
}
.menu2 li:last-child {
border-radius : 0 5px 5px 0;
}
.menu2 li a {
display : block;
padding : 10px 13px;
font-size : 13px;
text-decoration : none;
border-radius : 5px;
position : relative;
top : 0;
color : #FFF;
transition : all .4s;
}
.menu2 li:hover a {
top : -20px;
color : #4eacff;
background-color: #fff;
box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
transition : all .4s;
}
.menu2 li a:after {
display : block;
content :'';
position : absolute;
top : 100%;
left : 42%;
border-style : solid;
border-color : transparent;
border-width : 5px 5px 0 5px;
transition : all .4s;
}
.menu2 li:hover a:after {
border-color : white transparent transparent transparent;
transition : all .4s;
}
/*************************************/
.menu2 {
}
.menu2 a {
font-family : georgia;
font-size : 14px;
font-style : italic;
text-transform : capitalize;
}
.menu2 li {
border-right : 1px solid rgba(200, 200, 255, 0.5);
border-left : 1px solid rgba(40, 40, 40, 0.2);
}
.menu2 .selected {
top : -20px;
color : #4eacff;
background-color: #fff;
box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
transition : all .4s;
}
.menu2 .selected:after {
border-color : white transparent transparent transparent;
transition : all .4s;
}
Ну а этот код в то место, где будет само меню:
Код
<!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Код</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><nav class="menu2">
<ul>
<li>
<a href="#">Главная</a>
</li>
<li>
<a href="#">О нас</a>
</li>
<li>
<a href="#">Контакты</a>
</li>
<li>
<a href="#">Блог</a>
</li>
</ul>
</nav></div></div>
