Веб-дизайнеру
Веб-разработчику
Дополнительно
Красивое горизонтальное 3D меню для сайта – Black
Скачать
Демо
↓ Также Вам будет интересно ↓
Сегодня мы создаем простое, но креативное, красивое горизонтальное 3D меню в темном стиле. Точно такое меню, но только светлое, мы описывали в статье “Красивое горизонтальное 3D меню для сайта – White”. Это меню будет полезно практически любому сайту, который имеет основное навигационное меню по страницам. Оно имеет простую структуру. Скачать горизонтальное меню беплатно можно по ссылку выше.
HTML
Ну что, коротко напомним структуру меню:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<section class="container"> <nav> <ul class="nav"> <li><a href="#" class="nav-icon" title="Главная"><span class="icon-home">Главная</span></a></li> <li class="active"><a href="#" title="Продукты">Продукты</a></li> <li><a href="#" title="">Поддержка</a></li> <li><a href="#" title="Обучение">Обучение</a></li> <li><a href="#" title="О нас">О нас</a></li> <li><a href="#" title="Блог">Блог</a></li> <li><a href="#" title="Контакты">Контакты</a></li> </ul> </nav> </section> |
Итак, что мы имеем? Обычный маркированный список, который впрочем обычно и используется для создания горизонтального меню.
CSS
Основный стили, которые необходимо применить:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
.nav { height: 48px; display: inline-block; } .nav > li, .nav:active > .active { float: left; position: relative; margin: 0 0 4px; height: 44px; color: #ccc; text-shadow: 0 1px rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.05); border: 1px solid #232428; border-bottom-color: #1f2326; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px #262a2e, 0 3px #1f2326, 0 4px 3px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px #262a2e, 0 3px #1f2326, 0 4px 3px rgba(0, 0, 0, 0.2); } .nav > li:hover { color: #b0d157; text-shadow: 0 1px black, 0 0 20px rgba(255, 255, 255, 0.5); } .nav > li.active, .nav > .active:active, .nav > li:active { z-index: 2; margin: 4px 0 0; height: 43px; color: #aaa; text-shadow: 0 1px black; background-color: rgba(255, 255, 255, 0.03); border-color: #212425; border-width: 1px 0; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.05); } .nav > li:active { z-index: 3; } .nav > li:first-child { border-left-width: 1px !important; border-left-color: #212425; border-radius: 5px 0 0 5px; } .nav > li:last-child { border-right-width: 1px !important; border-right-color: #212425; border-radius: 0 5px 5px 0; } .nav > li + li, .nav:active > .active + li, .nav:active > li + .active { border-left-width: 0; } .nav > .active + li, .nav > .active:active + li, .nav > li:active + li, .nav > li:active + .active { border-left-width: 1px; } .nav > li > a { display: block; line-height: 44px; padding: 0 20px; font-size: 12px; font-weight: bold; color: inherit; text-decoration: none; outline: 0; } .nav .nav-icon { padding: 0 15px; } [class*="icon-"] { display: inline-block; width: 16px; height: 16px; vertical-align: text-top; background-image: url("../img/icons.png"); background-repeat: no-repeat; background-color: transparent; font: 0/0 serif; text-shadow: none; color: transparent; } .icon-home { background-position: 0 0; } |
В данных стилях мы используем популярные основные стили из CSS3 – градиент, тень и закругление углов.
Надеюсь это меню пригодится Вам. Все вопросы, пожалуйста, пишите в комментариях!
Данный урок подготовлен для вас командой сайта vladmaxi.net.
Чтобы иметь возможность добавлять материал в закладки своего личного кабинета, Вам необходимо авторизоваться илизарегистрироваться.
Добавить комментарий
Авторизация / Регистрация
