Веб-дизайнеру
Веб-разработчику
Дополнительно
Красивое горизонтальное 3D меню для сайта – White
Скачать
Демо
↓ Также Вам будет интересно ↓
Хотите создать красивое горизонтальное меню для сайта? Хочу представить Вам современное 3D меню, которое подойдет практически для любого дизайна. Само меню прозрачное, поэтому может быть встроено в дизайн сайта. В данном случае оно представлено в светлом варианте. Темный вариант мы рассматривали в статье “Красивое горизонтальное 3D меню для сайта – Black”. Итак что же оно в себя включает?
HTML структура
Структура очень проста. Обычный список ul и каждый пункт меню заключен в тег li
|
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 стили
Ниже мы используем стили из CSS3, такие как градиент, тень, закругление углов.
|
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 96 97 98 99 100 101 102 103 104 105 106 |
.nav { height: 48px; display: inline-block; } .nav > li, .nav:active > .active { float: left; position: relative; margin: 0 0 4px; height: 44px; color: #595959; text-shadow: 0 1px white; background-color: rgba(0, 0, 0, 0.05); border: 1px solid; border-color: #cfcfcf #d6d6d6 #c8c8c8; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25)); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25)); -webkit-box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1); } .nav > li:hover { color: #539f07; text-shadow: 0 1px white, 0 0 20px white; } .nav > li.active, .nav > .active:active, .nav > li:active { z-index: 2; margin: 4px 0 0; height: 43px; color: #404040; background: transparent; border-color: #ccc; border-width: 1px 0; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0)); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.4); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.4); } .nav > li:active { z-index: 3; } .nav > li:first-child { border-left-width: 1px !important; border-left-color: #c6c6c6; border-radius: 5px 0 0 5px; } .nav > li:last-child { border-right-width: 1px !important; border-right-color: #c6c6c6; 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; position: relative; line-height: 44px; padding: 0 20px; font-size: 12px; font-weight: bold; color: inherit; text-decoration: none; outline: 0; } .nav > li > a:before { content: attr(title); position: absolute; top: 1px; left: 20px; color: rgba(255, 255, 255, 0.4); text-shadow: none; } .nav .nav-icon { padding: 0 15px; } .nav .nav-icon:before { display: none; } [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; } |
Вот мы и рассмотрели основные требования для создание подобного меню. Скачать горизонтальное меню Вы можете выше, нажав на ссылку “Скачать.” Надеюсь оно будет вам полезно!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Чтобы иметь возможность добавлять материал в закладки своего личного кабинета, Вам необходимо авторизоваться илизарегистрироваться.
Добавить комментарий
Авторизация / Регистрация
