Универсальное адаптивное меню для сайта
 | |
| Вашему вниманию в чем то универсальное меню или вверх сайта, который полностью адаптивный под мобильные телефоны и есть под меню к него. Хочу обратить на несколько факторов в его создание, это логотип, который оригинален по своей ширине и на нем можно поставить как ваш знак сайта или надпись, и после этого еще много места останется, так что можно по этому желать отдельную тему. Это можно сказать, что по своей стилистике, горизонтальное меню, полностью заменит вверх сайта. И только там будет основные ссылки прописаны, что по тематике, здесь она обширна, все зависит от того, что вам предоставят в логотип, где нужно работать с форматом PNG. Здесь нет как мини профиля и поиска по сайту, но можно заметить, что если логотип убрать на его место можно одно из многих установить, но в нашем случай осталось название, так как оно нестандартно и по высоте, что позволяет больше возможности поставить или нарисовать по тематику интернет ресурса. Изначально он шел светлый, и все настройки в CSS были на строены на эту гамму цвета, но все же решил его сделать, немного по другому. Где также сами можете поставить под свой основной дизайн, если к примеру у вас он зеленый, то просто в стилях находим цвет, что будет отвечать за него, и ставим тот который вам нужен. Если вам нужна светлая гамма, то ее оставил по умолчанию, и вы можете скачать ее, а в материале уже будет по цветовой гамме изменен. Если посмотреть по всем функциям, то так будет по умолчанию, и под меню со скругленными углами, просто решил так сделать, чтоб немного от основы было отличие.  А здесь гость и пользователь в таком виде будет визуально наблюдать с мобильных аппаратах, как видите все очень понятна, и кнопка с право выведена, где по клику оно раскрывается.  Но думаю вы поняли, как выглядеть будет и работать. Приступаем к установке: Вверх сайта полностью заменяем: Код <header> <div class="h-header"> <div class="container"> <div class="tp-over"> <div class="tp-1"><a class="h-logo" href="/"><img src="http://zornet.ru/zorner_ru_1/Veb/4c606185f38f4b4ebd0defcc10827edf.png" alt="" /></a></div> <div class="tp-2"> <nav class="h-menu"> <div id="uNMenuDiv1" class="uMenuV"><ul class="uMenuRoot"> <li><a href="/index/0-2"><span>О нас</span></a></li> <li><a href="/photo"><span>Портфолио</span></a></li> <li><a href="/news"><span>Блог</span></a></li> <li class="uWithSubmenu"><a class=" uMenuItemA" href="/"><span>Суб. меню</span></a><ul> <li><a class=" uMenuItemA" href="/"><span>Простой пункт</span></a></li> <li><a class=" uMenuItemA" href="/"><span>Москва и регионы</span></a></li> <li><a class=" uMenuItemA" href="/"><span>Офисы в городах</span></a></li></ul></li> <li><a href="/index/0-3"><span>Контакты</span></a></li></ul></div> </nav> <div class="h-menu-button" onclick="$('.h-menu').slideToggle()"><div><span class="hm1"></span><span class="hm2"></span><span class="hm3"></span></div></div> </div> </div> </div> </div> </header> CSS: Код /***********************************/ header {width:100%;z-index:9;border-bottom:1px solid rgba(0,0,0,0.1)} .h-logo, .h-logo:hover {display:inline-block;text-decoration:none;} .h-logo img {vertical-align:bottom} .h-menu-button {display:none} .h-menu-button div {position:relative;width:33px;height:20px} .hm1, .hm2, .hm3 {display:inline-block;width:100%;height:2px;background: #d8d8d8;position:absolute;left:0px;} .hm1 {top:0px;} .hm2 {top:9px;} .hm3 {bottom:0px;} .h-header {position:relative;background: #18547D;} .h-cover {height:0px} .h-menu ul, .h-menu li {margin:0px;padding:0px;list-style-type:none} .h-menu ul {display:nline-block;border-collapse:collapse;} /*table-layout: fixed; white-space: nowrap;*/ .h-menu li {display: inline-block;position:relative;} .h-menu li:last-child {border-right:0px;} .h-menu li a {display:block;padding:0px 13px;text-align:center;font-size:13px;color: #f5f5f5;text-decoration:none;text-transform:uppercase;} .h-menu li a:hover {color: #b3b3b3;} .h-menu li:hover > ul {visibility:visible;opacity:1;} .h-menu li li:hover > ul {top:10px;} .h-menu li ul {visibility:hidden;opacity:0;position:absolute;top:104px;left:0px;display:block;white-space: nowrap;background:#fff;padding:10px 0px;z-index:9;border:1px solid #dedede;background: #18547D;border-radius: 5px;} .h-menu li ul li {display:block;} .h-menu li ul li a, .h-menu li ul li a:hover {line-height:38px;text-align:left;padding:0px 20px;font-size:12px} .h-menu li ul li a:hover {color:#b3b3b3} .h-menu li li ul {top:-20px;left:100%} .h-menu .uWithSubmenu {padding-right:10px} .h-menu .uWithSubmenu:after {content:'';position:absolute;right:11px;top:50px;display:inline-block;width: 0;height: 0;border-left: 3px solid transparent;border-right: 3px solid transparent;border-top: 3px solid rgba(0,0,0,0.3);} .h-menu li .uWithSubmenu {padding-right:0px} .h-menu li .uWithSubmenu:after {display:none} .h-logo, .h-logo:hover, .h-phone, .h-menu a, .h-menu a:hover {line-height:104px;} .header-fixed {padding:5px 0px;} .tp-over {display:table;width:100%} .tp-1,.tp-2 {display:table-cell;vertical-align:top;text-align:right} .tp-1 {text-align:left} .container {width:1100px;margin:0px auto;background: #18547D;} @media only screen and (max-width: 1180px) { .container {width:auto;padding:0px 20px;} .h-menu-button {display:inline-block!important;float:right;position:relative;margin-top:43px;cursor:pointer;font-size:24px;color:#b9d1e4} .h-menu-hidden {display:block !important} .h-menu {display:none;background:#3f475c;line-height: normal!important;height:auto;z-index:9;position:absolute;top:104px;left:0px;right:0px;overflow:auto} .h-menu * {line-height: normal!important;text-align:left!important} .h-menu ul, .h-menu li {display:block !important;padding:0px!important;margin:0px!important;} .h-menu li {border-top:1px solid rgba(255,255,255,0.1)} .h-menu ul {visibility:visible!important;position:static!important;opacity:1!important;background:none!important;box-shadow:none!important;border-top:none!important} .h-menu ul ul li {padding-left:30px!important} .h-menu .uWithSubmenu:after {display:none!important} .h-menu li a, .h-menu li a:hover {color:#fff!important;padding:10px 20px!important;display:block!important;background:none!important;} } @media only screen and (min-width: 1190px) { .h-menu {display:block!important} } Здесь если его сделать оригинальным, то можно каждому разделу или категорий подключить шрифтовые иконки, которые уже по своему виду, будут показывать, за что отвечает и что можно найти в категорий, все делается просто и главное доступными вещами. И как говорил, в текстовом документе можете скачать под светлый оттенок. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 12 | |
|
| |
| 1 2 » | |
