» »

Универсальное адаптивное меню для сайта

Универсальное адаптивное меню для сайта

Вашему вниманию в чем то универсальное меню или вверх сайта, который полностью адаптивный под мобильные телефоны и есть под меню к него. Хочу обратить на несколько факторов в его создание, это логотип, который оригинален по своей ширине и на нем можно поставить как ваш знак сайта или надпись, и после этого еще много места останется, так что можно по этому желать отдельную тему. Это можно сказать, что по своей стилистике, горизонтальное меню, полностью заменит вверх сайта. И только там будет основные ссылки прописаны, что по тематике, здесь она обширна, все зависит от того, что вам предоставят в логотип, где нужно работать с форматом 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}  
}

Здесь если его сделать оригинальным, то можно каждому разделу или категорий подключить шрифтовые иконки, которые уже по своему виду, будут показывать, за что отвечает и что можно найти в категорий, все делается просто и главное доступными вещами.

И как говорил, в текстовом документе можете скачать под светлый оттенок.
07.05.2017 Загрузок: 3 Просмотров: 612 Комментарий: (12)

Поделиться в социальных сетях

Материал разместил

Комментарий: 12
Сопрано
Сопрано 07.05.2017 21:391
0
Нравятся широкой размер, а не просто горизонтальное, которое иногда как раз по своему размеру не заменит вверх сайт в отличие от этого.
Dagada
Dagada 07.05.2017 21:422
+2
Я залил с профилем и поиском ...Я думаю Kosten сейчас зальет
Kosten
Kosten 07.05.2017 21:493
0
Dagada, материал шикарны, приятно было его переделать по цвету, но сохранил, что вы залили по умолчанию, скачать можно. На счет второго, его на тестовом проверю, если все нормально, нужно скринов наделать, и залить с описанием.
Scheme
Scheme 07.05.2017 21:524
0
Dagada, да ты поставщик, только отборного материала, копируй да ставь на сайт.
Dagada
Dagada 07.05.2017 21:535
0
Материал просто востребован и адаптивный.
Kosten
Kosten 07.05.2017 21:597
0
По сути не чем не отличается, только функция добавлена, это поиск, который по клику появляется, здесь наверно также сделаю в другом оттенке, а по умолчанию оставлю в текстовом файле.
Марковичь
Марковичь 07.05.2017 22:0210
0
Это просто идет горизонтальное меню или еще плюс картинка с ним?
Scheme
Scheme 07.05.2017 21:546
0
Просто иконки для форума, что были залиты ранее, уже не кому не нужны, всем сейчас подавай только адаптивный, излинился народ, сам не хочет делать.
Kosten
Kosten 07.05.2017 22:008
0
Scheme, иконки пользователей,это часть дизайн, если у кого то они просто написаны, это не означает, что у всех так сделаны.
Марковичь
Марковичь 07.05.2017 22:019
0
Костен, мудрое решение, и кто заливал, его материал оставили, и новый цвет выставили, что по горизонтальному меню, но не чем от других не отличается, разве широкое, огромный плюс в нем, что под мобильные настроен как видно хорошо.
tsakonter
tsakonter 07.05.2017 22:0911
0
Где то согласен, что место под лого больше, но сейчас наоборот делают, под него место меньше делают, что как понимаю, можно самому уже все в плане произвести.
1 2 »
avatar