» »

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

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

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

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

Ниже как можно заметить идет кнопки "Вход и Регистрация" что очень удобно и заметно для гостей сделано и не ломает основу. Как вы зарегистрируетесь, то уже появятся другие надписи "Мой профиль и Выход" что думаю всем понятно.

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

Здесь видим как пользователь сайта:

Горизонтальная меню для сайта с поиском

Это под мобильные экраны сжатие:

Адаптированное горизонтальная панель на uCoz

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

Код вверх сайта:

Код
<header>
  <div class="header">
<div class="header-width">
  <div class="header-logo">
<a href="/">Z<b style="color: #C47575;">O</b>RNET.Ru</a>
  <span>«Полезности для web-мастера»</span>
</div>  
<div class="header-menu">
<li><a href="/">Главная</a></li><li><a href="http://zornet.ru/load/81">Скрипты</a></li><li><a href="http://zornet.ru/load/142">Шаблоны uCoz</a></li><li><a href="http://zornet.ru/load/84">Меню для сайта</a></li><li><a href="http://zornet.ru/load/85">Ajax для uCoz</a></li><li><a href="/index/0-3">Контакты</a></li>
</div>  
</div>  
  </div>

  <div class="header-duo">
  <div class="header-width">
  <div class="header-poisk">
  <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" placeholder="Поиск по сайту..." autocomplete="off">
  </div>
  <div align="center" class="schBtn">
  <input type="submit" class="searchSbmFl" name="sfSbm" value="Найти">
  </div>
  </form>
  </div>
<div class="header-user">
<?if($USER_LOGGED_IN$)?>
<a title="Мой профиль" class="proffit" href="$PERSONAL_PAGE_LINK$">Мой профиль</a><a title="Выход" class="vihod" href="$LOGOUT_LINK$">Выход</a>
<?else?>
<a title="Вход" class="vhod" href="$LOGIN_LINK$">Вход</a><a title="Регистрация" class="registr" href="$REGISTER_LINK$">Регистрация</a>
<?endif?>  
  </div>
  </div>
  </div>  
</header>


CSS:

Код
/*Header
-------------------------*/
header {padding-bottom: 40px;}

.header {background: #231917 url(http://zornet.ru/Aben/Gsa/zornet/header.jpg); height: 75px;}
.header-width {max-width: 961px; margin: 0 auto;}
.header-logo {float: left; padding-top: 13px;}
.header-logo a {font-size: 20px; color: #ECECEC; font-weight: 600; letter-spacing: .1em;}
.header-logo a:hover {color: #ffffff;}
.header-logo span {display: -webkit-box; color: #BABABA; font: 0.875em/1.429 'Open Sans', sans-serif;}
.header-menu {float: right;}
.header-menu li {list-style: none; float: left; }
.header-menu a {height: 75px; line-height: 75px; padding: 0 15px 0 15px; color: #777777; text-transform: uppercase; -webkit-transition: all .15s ease-out; transition: all .15s ease-out; display: inline-block; letter-spacing: .1em; font-family: "PT Sans";}
.header-menu a:hover {color: #ffffff; height: 69px; padding-top: 6px;}
.header-duo {height: 55px; background-color: rgba(255, 255, 255, .85);}
.header-poisk {float: left; position: relative; display: table-cell; width: 66.9%; height: 55px;}
.header-user {float: right; height: 55px; line-height: 55px;}
a.vhod {background-color: #75bcc4; height: 55px; display: inline-block; padding: 0 20px; font-weight: bold; text-transform: uppercase; color: #fff; width: 119px; text-align: center;}
a.vhod:hover {background-color: #529fa8;}
a.registr {background-color: #C47575; height: 55px; display: inline-block; padding: 0 20px; font-weight: bold; text-transform: uppercase; color: #fff; width: 119px; text-align: center;}
a.registr:hover {background-color: #A85F52;}
a.proffit {background-color: #75bcc4; height: 55px; display: inline-block; padding: 0 20px; font-weight: bold; text-transform: uppercase; color: #fff; width: 119px; text-align: center;}
a.proffit:hover {background-color: #529fa8;}
a.vihod {background-color: #C47575; height: 55px; display: inline-block; padding: 0 20px; font-weight: bold; text-transform: uppercase; color: #fff; width: 119px; text-align: center;}
a.vihod:hover {background-color: #A85F52;}
/*-----------------------*/

/*Inputs
-----------------------*/
input[type=text],
input[type=password],
textarea {
  display: inline-block;
  vertical-align: middle;
  padding: 5px 10px;
  font-size: 0.929em;
  background-color: #fff;
  border: 1px solid #e1e1e1;
  outline: none;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

input[type="text"], input[type="password"], textarea {
  padding: 5px;
  border: 1px solid #E7E7E7;
  transition: all .15s ease-out;
  margin-bottom: 3px;
  border-radius: 3px;
}

input[type="text"].queryField {
-webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 30px 0 55px;
  width: 100%;
  height: 55px;
  border: none;
  border-radius: 0;
  background: rgba(136, 130, 130, 0.03) url(http://zornet.ru/Aben/Gsa/zornet/search.png) no-repeat 25px 50%;
  color: #96999e;
  font-style: italic;
}

.searchSbmFl {
  display: none!important;
}

@media only screen and (max-width: 600px) {
  .publ_vid {float: none!important; margin-right: 0px!important; width: 100%!important;}
  .b-sidebar {margin-left: auto!important;}
  .header-menu, .header-user {display: none!important;}
  .header-poisk { display: block !important; width: 100% !important;none!important;}
  .header-logo a { font-size: 15px!important; }
  .header-logo span { display: block!important; }
  .header-logo { width: 100%!important; text-align: center!important; }


PS - здесь темный вверх идет ссылкой, что можете по размерам создать свою гамму цвета или перевести на цифровой цвет.

Источник: uCoNet.Ru
22.12.2016 Просмотров: 862 Комментарий: (9)

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

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

Комментарий: 9
FeStemBer
FeStemBer 22.12.2016 00:521
0
Это больше шапка сайта, если полностью вверх сайта менять, поставил и хорошо по мобильным устройствам работает. И так оно сделана оригинально, что по цвету, здесь он смотрится красиво, чем однотонный можно поставить, это кому как, по мне так лучше оставить.
tsakonter
tsakonter 22.12.2016 00:562
0
Мне больше меню нравится, похоже как на блоге uCoz, только там нет иконки, здесь и меньше оно. А вот по эффектам, здесь согласен, что оригинально, но шрифт нужно жирный поставить.
Советник
Советник 22.12.2016 05:119
0
При чем здесь блог, прочто редко можно увидеть блог на ucoz, для этого есть специальные площадки и на них делают.
Kosten
Kosten 22.12.2016 01:043
0
Сразу пропишу стиль, чтоб сменить ссылку на изображение, что темным идет и нам нужно в стилях найти и заменить.

Код
.header {background: #231917 url(http://zornet.ru/Aben/Gsa/zornet/header.jpg); height: 75px;}


И заменяем на эту:

Код
.header { height: 75px;background: #133C58;}


Получится так!

Сафрон
Сафрон 22.12.2016 01:124
0
Почему сразу под блог, просто сейчас основном все на фиксированной ширине стоят, и если поставить на этот сайт, то также подойдет, что под мобильный адаптирован, это нормально, по скрину видно.
Kosten
Kosten 22.12.2016 01:235
0
Да все можно сделать, и изображение добавить и также чтоб на нем были информер, вот как пример можно так сделать и как раз под этот дизайн.

FeStemBer
FeStemBer 22.12.2016 01:446
0
Если так делать, нужно учитывать много факторов как информер, да и зачем что то похожее, но хотя согласен, кому то интересней так будет. Но этот вверх так нормально сделан.
Kosten
Kosten 22.12.2016 01:497
0
Просто так прикинул, можно же все переиграть и сделать по своему, код правильный предоставлен, подход должен быть адекватен, чтоб если менять не разворотить основу.)
csretven
csretven 22.12.2016 05:018
0
Вот за это спасибо, попробую поставить на сайт, и тематика обшая, должно подойти. Если ставить картинку, то здесь можно найти уникальную, а не просто цвет вывести.
avatar