» »

Горизонтальное меню Regta для uCoz


Горизонтальное меню Regta для uCoz

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

Так вы будете видеть как гость на сайте.

горизонтальное меню на сайт

Как пройдете регистраций, то все изменится и будет по другому.

Темное горизонтальное меню на uCoz

Сделано под светлый дизайн, но не исключаю, что и темный может подойти, ведь стили присутствуют, и можно его под уникальный сделать. Но можно много говорить, все видно, и приступаем, как его поставить на интернет ресурс.

Установка

Сам каркас в вверх сайта:

Код
<div class="bg_topbar">
  <div class="topbar_fix clearfix">
  <div class="logo"><a href="/">ZORNET.<b>Ru</b></b></a></div>
  <div class="userbar">
  <ul>
  <?if($LOGIN_FORM$)?><li><a href="javascript://" rel="nofollow" onclick="new _uWnd('LF',' ',-250,-110,{autosize:0,closeonesc:1,resize:1},{url:'/index/40'});return false;"><i class="fa fa-sign-in" aria-hidden="true"></i> Вход</a></li>
  <li><a href="/index/3"><i class="fa fa-paw" aria-hidden="true"></i> Регистрация</a></li><?endif?>
   
  <div class="userbar">
  <ul>
  <?if($LOGOUT_LINK$)?><li><a href="/index/8" target="_blank"><i class="fa fa-user" aria-hidden="true"></i> Профиль</a> </li>
  <li><a href="/index/10"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Выход</a></li><?endif?>
  </ul>
  </div>
   
  </ul>
  </div>
<nav class="hnav">
  <ul>
  <li><a href="/news">Скрипты</a></li>
  <li><a href="/load">Файлы</a></li>
  <li><a href="/publ">Статьи</a></li>
  <li><a href="/board">Видео</a></li>
  <li><a href="/blog">Блог</a></li>
  <li><a href="/">Шаблоны <i class="fa fa-chevron-down" aria-hidden="true" style="font-size:11px"></i></a>
  <ul>
  <li><a href="/">Игровые шаблоны</a></li>
  <li><a href="/">Паблик шаблоны</a></li>
  <li><a href="/">Новостные шаблоны</a></li>
  </ul>  
  </li>  
  <li><a href="/">Обратная связь</a></li>
  </ul>
  </nav>
  </div>
  </div>


CSS:

Код
.bg_topbar{ background:#333;height: 70px; position:fixed; z-index:99; top:0; left:0; right:0}
.bg_topbar .topbar_fix{ width:1060px; margin:0 auto}
.bg_topbar .topbar_fix .logo{ float:left;font: bold 18px/70px 'Play'; color:#fff; margin:0 20px 0 0; text-transform: uppercase;}
.bg_topbar .topbar_fix .logo a{ color:#fff; text-decoration:none}
.bg_topbar .topbar_fix .logo a b {color: #2290D3;}
.bg_topbar .topbar_fix nav.hnav{ float:left}
.bg_topbar .topbar_fix nav.hnav ul,  
.bg_topbar .topbar_fix nav.hnav ul li,  
.bg_topbar .topbar_fix .userbar ul,  
.bg_topbar .topbar_fix .userbar ul li{ display:block; list-style:none; padding:0; margin:0}
.bg_topbar .topbar_fix nav.hnav ul li,  
.bg_topbar .topbar_fix .userbar ul li{ float:left; position: relative; z-index: 9;}
.bg_topbar .topbar_fix nav.hnav ul li a,  
.bg_topbar .topbar_fix .userbar ul li a{ display:block;font: bold 16px/70px 'Play';position: relative; z-index: 9; color:#aaa; border-bottom: 3px solid transparent; text-decoration:none;padding:0 15px; -webkit-transition:all 0.2s 0.05s ease; -moz-transition:all 0.2s 0.05s ease; -ms-transition:all 0.2s 0.05s ease; -o-transition:all 0.2s 0.05s ease; transition:all 0.2s 0.05s ease}
.bg_topbar .topbar_fix nav.hnav ul li a:hover,  
.bg_topbar .topbar_fix .userbar ul li a:hover,
.bg_topbar .topbar_fix nav.hnav ul li:hover a {border-color: #225ED3; color:#fff; background:#222}
.bg_topbar .topbar_fix nav.hnav ul li:hover ul {visibility: visible; opacity: 1;}
.bg_topbar .topbar_fix nav.hnav ul li ul { transition-property:opacity; transition-duration:0.10s; transition-delay:0.03s; transition-timing-function:linear;position: absolute; padding: 20px 0; visibility: hidden; opacity: 0; left: 0; top: 60px; background: #222; z-index: 8; width: 200px;}
.bg_topbar .topbar_fix nav.hnav ul li ul li {float: none;}
.bg_topbar .topbar_fix nav.hnav ul li ul li a {display: inline-block;font: 13px/2 'Play'; color: #888 !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; padding: 0; margin: 0 20px 10px 20px;}
.bg_topbar .topbar_fix nav.hnav ul li ul li:last-child a {margin-bottom: 0;}
.bg_topbar .topbar_fix nav.hnav ul li ul li a:hover {color: #bbb !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
.bg_topbar .topbar_fix .userbar{ float:right}


Но на этом еще не все, нам нужно стили, что выводят иконки на меню вывести. А это копируем ниже стиль и в самый вверх шапки его прописываем в head и сохранить. Если вам нужны другие кнопки, то здесь все подробно написано по этой теме.

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


К материалу DEMO представлено

23.05.2016 Просмотров: 668 Комментарий: (9)

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

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

Комментарий: 9
Сафрон
Сафрон 23.05.2016 21:481
0
Встречал это меню, у него поиск должен быть, но он по оригинальному показывается, по клику и во все горизонтальное меню.
Kosten
Kosten 23.05.2016 22:014
+1
Да там поиск есть, но что то не стал его ставить, если честно, то вообще выехал за не го.
FeStemBer
FeStemBer 23.05.2016 21:532
+1
Что то с левой стороны много места, вот туда можно было иконку большую дом поставить, чтоб на главную выводило. А что по функциям, но не скажу что сильно от других отличается, но разве мини профилем, который простой, что больше нравится других.
Сопрано
Сопрано 23.05.2016 21:583
+1
Да сейчас идут основном так, что то в одной плоскости. Не как раньше, что где то прогибы были, но и весило от этого больше, а здесь просто поменялся цвет и в низу синее полоса, думаю больше не чего и не требуется пока, что завтра будет не известно.
Kosten
Kosten 23.05.2016 22:035
0
Здесь соглашусь, что сейчас больше найдешь такое меню с таким дизайн. А вот что с дизайнерские, то там основном на ссылках идут, но есть и на стилях.
Kosten
Kosten 24.05.2016 13:536
0
Форму поиска, можно этот скрипт поставить на горизонтальное меню.
FeStemBer
FeStemBer 24.05.2016 14:567
0
Так то поиск этот будет нормально на любом горизонтальном меню и вообще на или на вверх сайта.
feliksteg
feliksteg 24.05.2016 17:338
0
Что на счет поиска, то по этому случаю нужно в последние очередь делать. Его можно просто в благ поставить и будет колоссальной смотрится, если еще блок такой как на этом сайте, что почти не видно его.
Scheme
Scheme 30.05.2016 18:519
0
Что то не пойму, на яндекс браузер у меня такая картина, а вот на остальных, это гугл и мозила, нормально.

avatar