ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Верхняя панель с поиском для сайта uCoz

Верхняя панель с поиском для сайта uCoz

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

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

PS - если говорить об мобильной адаптаций, то здесь сделана она, но если немного только подредактировать, но на тестовом сайте проверено было, при сужение экрана, поиск идет в низ, а логотип остается в пенале.

Также можно ознакомится по этому материалу на форуме сайта.

Приступаем к установке:

html

В шапку сайта в самый вверх ставим:

Код

<header>
  <div class="wrapper clearfix">
  <a href="/"><div class="logo"></div></a>
  <div class="right">
  <?if($USER_LOGGED_IN$)?><a href="/index/8" target="_blank">Профиль</a>
  <a href="$LOGOUT_LINK$">Выход</a><?else?><a href="$LOGIN_LINK$">Вход</a>
  <a href="$REGISTER_LINK$">Регистрация</a>
  <?endif?>
  <div class="searchall"><div class="searchForm"><form onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0" action="/search/"><div align="center" class="schQuery"><input type="text" name="q" maxlength="30" size="20" class="queryField"></div><div align="center" class="schBtn"><input type="submit" class="searchSbmFl" name="sfSbm" value="Найти"></div></form></div></div>
  </div>
  </div>
</header>

в css:

Код

@media screen and (max-width: 850px) {
.logo {float:none !important;margin: auto !important;}
header .right {float: none !important;display:block !important;text-align:center !important;}
.wrapper .content {width:100% !important;float: none !important;display:block !important;}
}
.wrapper {width:100%;padding: 0 15px 0 15px;max-width: 1030px;margin: auto;}
header {background:#2488b7;height:71px;}
body {font: 14px/22px PT Sans; color: #4e4e4e;padding:0;margin:0;}
.logo {width:271px; height: 62px; display: block; float: left; background:url(http://zornet.ru/Aben/Gsa/zartyn/5a1.png) 0px 0px no-repeat;margin: 4px 0 3px 0;}
.searchall {display: inline-block;vertical-align:middle;margin: 0 0 0 30px;}
.searchall .schQuery {float:left;}
.searchall .schBtn {float:right;}
.searchall input[type="text"] {background: #fff;border: 0px;height: 28px;width:200px;padding: 0 10px 0 10px;font: 14px/28px PT Sans;color:#777;}
.searchall input[type="submit"] {background: #5eccff;border: 0px;height: 28px;font: 14px/28px PT Sans;color:#fff;margin:0;width:79px;}
.searchall input[type="submit"]:hover {background: #2ab9fb;}
.searchall input[type="submit"]:active {background: #333;}
header .right {padding: 23px 0 20px 0 ;}
header .right a {display: inline-block;vertical-align:middle;color: #fff;margin: 0 0 0 30px;}
header .right a:hover {color: #91dcff;}
.right {float:right;}
body .searchForm input[type="submit"] {height: 28px !important;}
.clearfix:after, .clearfix:before, .lastcomments li:after, footer:after, footer:before, .showallsp:before, .showallsp:after, .seccode:before, .seccode:after {content: " ";display: block;clear: both;height: 0;overflow: hidden;}

Материал от: Alexandrhhh
Источник: xMp3.su

16 Декабря 2016 Просмотров: 1854 Комментариев: (7)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 7
Порядок вывода комментариев: Kolinkor 16 Декабря 2016 23:54¹ 0 Это уже не первая панель, но здесь с поиском что хорошо. Но хотел просто добавить, если решили горизонтальное меню ставить. То все через оператор в конструкторе меню работать нужно, и ставим SMENU_1 что отвечает за горизонтальное положение. Kosten 17 Декабря 2016 00:06² +1 Здесь можно в правой стороне просто поставить мини профиль, который отлично мсторется будет. И как раз вот этот мини профиль подойдет по теме. FeStemBer 17 Декабря 2016 00:14³ 0 Почему информационная панель, но на ней всего поиск, информаций не содержит. Но это так мелкое, просто его если доработать и информация появится, так как меню можно считать за информацию и навигацию. Так отличное решение будет для многих сайтов, кто бы только написал, как сделать, чтоб при прокрутки оно оставалось, и чтоб прокручивалось. Kosten 17 Декабря 2016 00:24⁴ 0 Но не могу же сказать, что это горизонтальное меню, так как не является таким, здесь специально написал, что вы можете его поставить так, или поставить навигацию, или поменять профиль. Alexandrhhh 17 Декабря 2016 00:43⁶ 0 просто body задаёте position:relative; header задаёте position:fixed (можно ещё через absolute);top:0; а контенту margin-top, но отступ нужно делать разный, для каждого media)удачи в установке. Kosten 17 Декабря 2016 00:49⁷ 0 Alexandrhhh, а пропишите плиз, как можно сделать, чтоб при прокрутке оставалось панель, сейчас она пропадает, но как основном идет, возможно кому то нужно так. FeStemBer 17 Декабря 2016 00:30⁵ 0 Просто вижу что изображение сменили, так как на нем профиля не было, а вот в коде он есть.