» »

Интересное адаптивное меню сайта с поиском


Интересное адаптивное меню сайта с поиском

Одно из оригинальных адаптивное горизонтальное меню, где есть как под категорий и кнопка поиска, где при нажатии он появляется. Все настроено под пользователя, и разбито по разделам, где очень много информация оно может содержать. Но и как можно заметить, это размер его, что и на полноценный интернет ресурс подойдет, также и на блог. Будет навигация полностью занимать вверх сайта, что по правую и по левую сторону. Сам поиск визуально по умолчанию не видно, но только стоит нажать на кнопку, что идет с правой стороны, так оно появится и не как все привыкли снизу. Здесь все как раз наоборот, сам вверх съедет в низ и появится окно, а точнее где нужно написать, то что вы хотите найти на сайте.

Сами шрифты на нем стандартные и в этом не стал делать, просто здесь можно их увеличить или сделать меньше, но они визуально отлично видны. Разве что только изменить сам оттенок цвета, но здесь уже вам решать, чтоб отлично по своей стилистике вписался в основной дизайн. Что по мини профилю, то он сделан немного стандартно, но главное понятно, это при регистрациях выведет ваш логин, где при клике на его, появятся все функций, где можно перейти на персональную страницу или редактировать свои данные. И, как всегда, делают, последнее функция, это выход сайта, который по сути нужен. Если у вас уже нет админ бара, то он конструктора профиль не помешает, а наоборот будет дополнять, где его можно поставить по всем углам.

Но все же отличие не в одном поиске, а это место под логотип, так как здесь реально нужно его устанавливать. Да, кто-то скажет, что можно сделать и написать знаками, но это будет не красиво, так как ширина не позволяет сделать, чтоб смотрелось корректно. И здесь нужно оставить как идет от автора, и место под описание и можно поставить картинку, чтоб видно было, вообще стилистика совершенно меняется в таком случай и все визуально, просто выглядеть красиво.

Так смотрится, когда вы открыли портал, в общем по умолчанию установлен вверх сайта с навигацией и поиском.

Адаптивное горизонтальное меню сайта

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

Меню сайта под мобильные устройства

Но это то же самое, но уже с мобильного аппарата, так что можно сравнить, и увидеть, что почти не чего поменялось.

Меню с под категориями

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

Это вид с широкого монитора, где решил открыть поиск и посмотреть на работоспособность, да вид будет такой.

Разворот поиска на навигаций сайта

Но с функциями разобрались, переходим к установке:

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

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<div class="h-form-search"><div class="container"><form action="/search/"><input type="text" id="focused" name="q" placeholder="Что ищем..." /></form></div></div>
<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/Aben/Kino/cd3b21f522f749598998a17ec508a2c4.png" alt="" /></a></div>
<div class="tp-2">
<nav class="h-menu">
  <div id="uNMenuDiv1" class="uMenuV"><ul class="uMenuRoot">
<li><a href="/"><span>Главная</span></a></li>
<li><a href="/index/stranichka_vospitatelja/0-9"><span>Скрипты для uCoz</span></a></li>
<li><a href="/index/profsojuznaja_stranichka/0-8"><span>Стилистика</span></a></li>
<li><a href="/photo"><span>Фото</span></a></li>  
<li class="uWithSubmenu"><a class=" uMenuItemA" href="/"><span>Безопастность</span></a><ul>
<li><a class=" uMenuItemA" href="/"><span>ZORNET.RU</span></a></li>
<li><a class=" uMenuItemA" href="/"><span>САЙТ ZORNET.RU</span></a></li>
<li><a class=" uMenuItemA" href="/"><span>ВСЕ О ZORNET.RU</span></a></li>
<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>  
<li><a class=" uMenuItemA" href="/"><span>ИНСТРУКЦИЙ</span></a></li></ul></li>  
<li class="uWithSubmenu"><a class=" uMenuItemA" href="/"><span>ШАБЛОНЫ НА ПОРТАЛ</span></a><ul>
<li><a class=" uMenuItemA" href="/"><span>Конструктор</span></a></li></ul></li>  
<?if($USER_LOGGED_IN$)?>  
<li class="uWithSubmenu"><a href="$PERSONAL_PAGE_LINK$" class="profile-button">$USER_FULL_NAME$</a><ul>  
<li><a href="$PERSONAL_PAGE_LINK$">Мой профиль</a></li>  
<li><a href="$PM_URL$"><?if($UNREAD_PM$>0)?><i>$UNREAD_PM$</i><?endif?>Сообщения</a></li>  
<li><a href="$USERS_LIST_URL$"><span>Пользователи</span></a></li>  
<li><a href="/index/11"><span>Настройки</span></a></li>  
<li><a href="$LOGOUT_LINK$"><span>Выйти</span></a></li></ul>  
<?else?>  
<li class="uWithSubmenu"><a href="$PERSONAL_PAGE_LINK$"><span>Гость</span></a><ul>  
<li><a href="/register"><span>Регистрация</span></a></li>  
<li><a href="$LOGIN_LINK$" class="last"><span>Вход</span></a></li></ul>  
<?endif?>  
</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 class="tp-3">
<a href="javascript:;" onclick="$('.h-form-search').slideToggle(200);$('#focused').focus()"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
</div>
</header>

CSS:

Код
/*****************************************************/
header {width:100%;z-index:9;border-bottom: 1px solid rgba(0, 0, 0, 0.09);}
.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:#fff;position:absolute;left:0px}
.hm1 {top:0px;}
.hm2 {top:9px;}
.hm3 {bottom:0px;}

.h-header {position:relative;background: #072940;}
.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 8px;text-align:center;font-size:13px;color:#9296a0;text-decoration:none;text-transform:uppercase}
.h-menu li a:hover {color: #a9a9a9;}
.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: #0b2538;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: #71c8d8;}
.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, .tp-3 a {line-height:104px;}

.tp-3 a {font-size:14px;color:#9296a0;display:inline-block}
.tp-3 a:hover {color:#000;}

.header-fixed {padding:5px 0px;}
.tp-over {display:table;width:100%}
.tp-1,.tp-2,.tp-3 {display:table-cell;vertical-align:top;text-align:right;}
.tp-1 {text-align:left}
.tp-3 {width:34px;position:relative}

.container {width:1100px;margin:0px auto;background: #072940;}
.container2 {width:1130px;margin:0px auto}
.h-relative {position:relative;}

.h-form-search {display:none;padding:20px 0px;background: #072940;}
/* .h-form-search {display:none;position:absolute;top:94px;right:0px;z-index:99}  
.h-form-search input {padding:0px 20px!important;height:40px!important;width:200px!important;border:1px solid #A2A2A2;}*/
.h-form-search input {padding:0px!important;margin:0px!important;height:100px!important;width:86%!important;border:0px!important;font-size:32px!important;background:rgba(255,255,255,0) !important;}

.h-cpage-tab {display:table;width:100%}
.h-cpage-left, .h-cpage-right {display:table-cell;vertical-align:top}
.h-cpage-left {padding-right:50px;color:#fff}
.h-cpage-one {font-size:24px;margin-top:20px}
.h-cpage-one i {color:#39d7ff;}
.h-cpage-one span {width:40px;display:inline-block}
.h-cpage-tab .h-contact-form {background:#fff}

.h-mtr-tab {display:block;width:100%;margin-bottom:40px}
.h-mtr-img, .h-mtr-right {display:block;vertical-align:top;margin-bottom:20px}
.h-mtr-img {width:100%;position:relative}
.h-mtr-img img {width:100%}
.h-mtr-det {margin-top:10px;color:#a5adb4;font-size:13px}
.h-mtr-det span {margin-right:8px}
.h-mtr-det i {margin-right:8px}
.h-mtr-det a {color:#a5adb4;text-decoration:none}
.h-mtr-title {font-size:18px}
.h-mtr-title2 {font-size:28px}
.h-mtr-short {margin-top:10px;}
.h-mtr-short2 {margin-top:30px}

@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: #5a6a96;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 Загрузок: 5 Просмотров: 492 Комментарий: (8)

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

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

Комментарий: 8
Марковичь
Марковичь 08.05.2017 00:221
0
Сделано хорошо, только одно не понятное, почему с этим меню в один файл не сделать. Или просто у одного есть поиск и мини профиль, у другого нет.
Kosten
Kosten 08.05.2017 00:545
0
Думаю, когда есть выбор, это прекрасно, и если кому то не нужен поиск и мини профиль, он может поставить точно такой код, но без этой функций.
tsakonter
tsakonter 08.05.2017 00:252
0
Сколько уже на сайте такого типа меню, радует одно, что последнее пошли все адаптированные под мобильные.
Kosten
Kosten 08.05.2017 00:273
0
Давайте говорить крайние, то как то последнее напрягает.)
Kosten
Kosten 08.05.2017 00:566
0
Но а зачем сейчас что то не адаптивное, как пример, горизонтальное меню, которое на ссылках, и эффект у них красивый при клике, но под адаптацию они не попадают, а значит неликвид.
Tergran
Tergran 08.05.2017 00:474
0
Черт его возьми, вообще отлично на сайт подошел, спасибо на меню. Хотя еще не решил, нужен поиск или нет, его можно убрать, это стили на шрифтовые иконки, что по вверх стоять снести и кнопка пропадет, но главное и сам эффект работать не будет, но пока оставил.
Kosten
Kosten 08.05.2017 00:577
0
Забыл в описание написать, что гамму цвета менять нужна на двух стилях, это сам центр, и стороны идут отдельно.
Сопрано
Сопрано 08.05.2017 04:228
0
Это больше уже на какой то порядок новшество, просто раньше не приходилось, не то что встречать такой материал, а на сайте видеть.
avatar