Главная » Статьи » Меню

..::Горизонтальное меню на CSS::..

Посмотрите ДЕМО
В то место где будет Меню
Код
<nav class="menu2"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Контакты</a></li>

В CSS
Код
@font-face { font-family: 'LigatureSymbols'; src: url('LigatureSymbols-2.05.eot'); src: url('LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'), url('LigatureSymbols-2.05.woff') format('woff'), url('LigatureSymbols-2.05.ttf') format('truetype'), url('LigatureSymbols-2.05.svg#LigatureSymbols') format('svg'); font-weight: normal; font-style: normal; } nav { font-family: 'LigatureSymbols'; margin : 50px auto; width : 260px; } ul { border-radius : 3px; margin:0; padding:0; } ul:after , ul:before { display : block; content : ''; } ul:after { clear : both; } 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); } li:first-child { border-radius : 5px 0 0 5px; } li:last-child { border-radius : 0 5px 5px 0; } li a { display : block; padding : 10px 13px; font-size : 26px; text-decoration : none; border-radius : 5px; position : relative; top : 0; color : #FFF; transition : all .4s; } 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; } 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; } li:hover a:after { border-color : white transparent transparent transparent; transition : all .4s; } /*************************************/ .menu2 { width : 394px; } .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); } .selected { top : -20px; color : #4eacff; background-color: #fff; box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7); transition : all .4s; } .selected:after { border-color : white transparent transparent transparent; transition : all .4s; }

P.S Меню Само по себе полу-прозрачное поэтому на разных фонах будет смотреться по разному
Категория: Меню | Добавил: slavick (26.07.2013)
Просмотров: 97 | Теги: css, Горизонтальное, меню, на | Рейтинг: 1.0/2
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]