Главная » Файлы » Прочие скрипты » CSS |
Необычное горизонтальное меню на чистом CSS3 для uCoz
24.06.14, 18:55:42 | |
Достаточно оригинальное меню с необычным эффектом при наведении на пункты Для начала посмотрите ДЕМО Моё тестирование в фидле: КЛИК Установка: В самый низ вашего 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; } Следующий код в то место, где будет само меню: Код <nav class="menu2"> <ul> <li> <a href="#">Главная</a> </li> <li> <a href="#">О нас</a> </li> <li> <a class="selected" href="#">Контакты</a> </li> <li> <a href="#">Блог</a> </li> </ul> </nav> За основу материала взята ЭТА статья Материал подготовлен Apocalypse | |
Просмотров: 715 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |