Красивое горизонтальное 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
