Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Необычное горизонтальное меню на чистом CSS
Необычное горизонтальное меню на чистом CSS
workman
Дата: Воскресенье, 10.08.2014, 14:33 | Сообщение # 1
Vip
Сообщений:1576
Награды: 7


Достаточно оригинальное меню с необычным эффектом при наведении на пункты. При наведение сама запись поднимается вверх как хинт в светлом оттенке цвета. Что очень оригинально смотрится и безусловно органично и красиво.
Для начала посмотрите демо работы

Установка:
В самый низ вашего 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>


Прикрепления: 1818654.jpg(24Kb)


Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...

Сообщение отредактировал workman - Воскресенье, 10.08.2014, 14:35
Kosten
Дата: Понедельник, 11.08.2014, 13:48 | Сообщение # 2
Администраторы
Сообщений:12675
Награды: 39


В первые вижу функцию у такого горизонтального меню. Чтоб само название при наведение плавно переходила в хинт с этой же надписью. А главное как понимаю оно прозрачное и на любой оттенок цвета подойдет отлично.

Slavik
Дата: Понедельник, 11.08.2014, 18:47 | Сообщение # 3
Проверенные
Сообщений:1439
Награды: 1


Супер сделано!!! cool wink

MIR-HACK.RU - Добро пожаловать в мир читов!
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Необычное горизонтальное меню на чистом CSS
Страница 1 из 11
Поиск: