Интересное адаптивное меню сайта с поиском
 | |
| Одно из оригинальных адаптивное горизонтальное меню, где есть как под категорий и кнопка поиска, где при нажатии он появляется. Все настроено под пользователя, и разбито по разделам, где очень много информация оно может содержать. Но и как можно заметить, это размер его, что и на полноценный интернет ресурс подойдет, также и на блог. Будет навигация полностью занимать вверх сайта, что по правую и по левую сторону. Сам поиск визуально по умолчанию не видно, но только стоит нажать на кнопку, что идет с правой стороны, так оно появится и не как все привыкли снизу. Здесь все как раз наоборот, сам вверх съедет в низ и появится окно, а точнее где нужно написать, то что вы хотите найти на сайте. Сами шрифты на нем стандартные и в этом не стал делать, просто здесь можно их увеличить или сделать меньше, но они визуально отлично видны. Разве что только изменить сам оттенок цвета, но здесь уже вам решать, чтоб отлично по своей стилистике вписался в основной дизайн. Что по мини профилю, то он сделан немного стандартно, но главное понятно, это при регистрациях выведет ваш логин, где при клике на его, появятся все функций, где можно перейти на персональную страницу или редактировать свои данные. И, как всегда, делают, последнее функция, это выход сайта, который по сути нужен. Если у вас уже нет админ бара, то он конструктора профиль не помешает, а наоборот будет дополнять, где его можно поставить по всем углам. Но все же отличие не в одном поиске, а это место под логотип, так как здесь реально нужно его устанавливать. Да, кто-то скажет, что можно сделать и написать знаками, но это будет не красиво, так как ширина не позволяет сделать, чтоб смотрелось корректно. И здесь нужно оставить как идет от автора, и место под описание и можно поставить картинку, чтоб видно было, вообще стилистика совершенно меняется в таком случай и все визуально, просто выглядеть красиво. Так смотрится, когда вы открыли портал, в общем по умолчанию установлен вверх сайта с навигацией и поиском.  Здесь вы уже нажали на кнопку, где подключены шрифтовые иконки, и как видите появиться под поиск окно. Не нужно забывать, при любой функций, все отлично адаптированно.  Но это то же самое, но уже с мобильного аппарата, так что можно сравнить, и увидеть, что почти не чего поменялось.  Когда зашли к примеру смартфона, то нажимаем кнопку меню, и откроется разделы, и если есть под категорий, то они также визуально все видны будут. Это вид с широкого монитора, где решил открыть поиск и посмотреть на работоспособность, да вид будет такой.  Но с функциями разобрались, переходим к установке: Идем в админ панель и меняем полностью вверх сайта. Код <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} } Также хочу добавить, что вы можете скачать текстовый документ на точно такой материал, только в светлом дизайн. Все функций на нем сохранены, вам только поменять нужно логотип и выстроить уже по своему, как видите установка здесь не сложная и чего не нужно загружать файловый менеджер, а только прописать и сохранить обязательно. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 8 | |
|
| |
