» »

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

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

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

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

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

Давайте рассмотрим как будет визуально отображаться.

Это для тех кто не прошел регистрацию:

Меню сайта с функцией регистраций

Это показано, что вы уже пользователь и нажали, чтоб появилась вторая информация.

Навигация на сайт с категориями

И меняется оттенок цвета:

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

Теперь с мини профилем и это по умолчанию.

Горизонтальная навигация плюс мини профиль сайта

Здесь вы решили искать материал и нажали на кнопку с право и появилась вторая раскладка.

Функциональное меню с профилем пользователя

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

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

Код
<link rel="stylesheet" href="http://zornet.ru/Aben/Aben-Abag/fer/reset.css"> <!-- CSS reset -->  
<link rel="stylesheet" href="http://zornet.ru/Aben/Aben-Abag/fer/style.css"> <!-- Resource style -->  
<script src="http://zornet.ru/Aben/Aben-Abag/fer/modernizr.js"></script> <!-- Modernizr -->  
<script src="http://zornet.ru/Aben/Aben-Abag/fer/main.js"></script> <!-- Resource jQuery -->  
  <header>  
  <div class="cd-logo">

  <?if($LOGIN_LINK$)?>
<div class="login">
<div class="login_in">
<a href="javascript://" rel="nofollow" onclick="new _uWnd('LF',' ',-250,-110,{autosize:0,resize:0,modal:1,fadetype:1,fadeclosetype:1},{url:'/index/40'});return false;" title="">Вход</a> / <a href="/index/3" title="">Регистрация</a>
</div>
</div>
   
<?else?>  
<div class="profile">  
<div class="profile-menu">  
  <a href="$PERSONAL_PAGE_LINK$" class="profile-button"><?if($UNREAD_PM$>0)?><s>$UNREAD_PM$</s><?endif?><span class="profile-avatar"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>/.s/t/1090/logo-img.png<?endif?>" alt="" /></span> $USER_FULL_NAME$ <i></i></a>  
  <div class="profile-list">  
  <div class="profile-list-in">  
  <a href="$PERSONAL_PAGE_LINK$">Мой профиль</a>  
  <a href="$PM_URL$"><?if($UNREAD_PM$>0)?><i>$UNREAD_PM$</i><?endif?>Сообщения</a>  
  <a href="$USERS_LIST_URL$">Пользователи</a>  
  <a href="/index/11">Настройки</a>  
  <a href="$LOGOUT_LINK$" class="last">Выйти</a>  
  </div>  
  </div>  
</div>  
</div>
  <?endif?>  

   
  </div>  
  <nav class="cd-main-nav-wrapper">  
  <ul class="cd-main-nav">  
  <li><a href="http://zornet.ru/">ZORNET.RU</a></li>  
  <li><a href="#0">Проекты</a></li>  
  <li><a href="#0">Блог</a></li>  
  <li><a href="#0">Контакты</a></li>  
  <li>  
  <a href="#0" class="cd-subnav-trigger"><span>Категории</span></a>  
  <ul>  
  <li class="go-back"><a href="http://zornet.ru/">Меню</a></li>  
  <li><a href="#0">Категория 1</a></li>  
  <li><a href="#0">Категория 2</a></li>  
  <li><a href="#0">Категория 3</a></li>  
  <li><a href="#0">Категория 4</a></li>  
  <li><a href="#0">Категория 5</a></li>  
  <li><a href="#0" class="placeholder">Placeholder</a></li>  
  </ul>  
  </li>  
  </ul> <!-- .cd-main-nav -->  
  </nav> <!-- .cd-main-nav-wrapper -->  
  <a href="#0" class="cd-nav-trigger">Меню<span></span></a>  
  </header>


CSS

Код
.login {float:right;margin-top: 21px;margin-right: 20px;height:30px;background: url('http://zornet.ru/Ajaxoskrip/Abren/fingerprint.png') #38A3EC 7px 7px no-repeat;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 10px;border: 1px solid #286894;}
.login_in {padding: 7px;padding-left:32px;padding-right:10px;color: rgba(255, 255, 255, 0.4);font-size:13px;}
.login_in a {text-decoration:none;color:rgba(255,255,255,0.9);}
.login_in a:hover {text-decoration:none;color:#FFF}

.profile {height:30px;font-size:13px;display:inline-block;position:relative}  

.profile-menu {position:relative!important}  
.profile-button s {display:inline-block;z-index:9;background:#3297db;color:#fff;font-size:10px;margin-right:10px;margin-left:1px;line-height:14px;padding:2px 6px;text-decoration:none;-webkit-border-radius: 55px;-moz-border-radius: 55px;border-radius: 55px;}  
.profile-button, .profile-button:hover {display:inline-block;color: #FFF;position:relative;line-height: 60px;padding-left: 39px;padding-right: 18px;text-decoration:none;line-height: 73px;}  
.profile-button i {position:absolute;right:0px;top: 35px;width: 0;height: 0;border-left: 3px solid transparent;border-right: 3px solid transparent;border-top: 4px solid rgba(0, 0, 0, 0.67);}  
.profile-avatar, .profile-avatar img {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}  
.profile-avatar {display:inline-block;width:24px;height:24px;position:absolute;top: 5px;left:0px;border-radius: 20px;}  
.profile-avatar img {width:24px;height:24px;object-fit:cover;vertical-align:bottom;background:#fff;border:2px solid #fff;}  

.profile-menu:hover .profile-list {visibility:visible;}  
.profile-list {position:absolute;/* width: 190px!important; */right:0px!important;top: 65px;padding-top:18px;visibility:hidden;z-index:9;}  
.profile-list-in {background: #3F494F;width:190px!important;max-width:190px!important;padding:3px 0px;box-shadow: 0px 8px 35px rgba(119, 119, 119, 1);/* -webkit-border-radius: 5px; */-moz-border-radius: 5px;border-radius: 5px;}  
.profile-list-in a {display: block;padding:0px 20px!important;line-height:42px!important;text-decoration:none;text-align:left;border-bottom: 1px solid #6A6A6B;font-size:12px;color: #FFFFFF;}  
.profile-list-in a:hover {color: #C0C0C0;}  
.profile-list-in a.last {border-bottom:0px !important}  
.profile-list-in a i {background:#3297db;color:#fff;float:right;font-style:normal;font-size:10px;padding:0px 6px;line-height:16px !important;margin-top:12px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}


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

Источник: Yrааа и codyhouse.co
26.02.2017 Просмотров: 587 Комментарий: (10)

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

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

Комментарий: 10
Сопрано
Сопрано 26.02.2017 16:231
0
Что то это меню пошло по рукам, всяко его переделывают, вот бы его до конца довести на мобильную адаптацию, то так они есть, но вот не показывает главное, это меню.

Здесь согласен, что с мини профилем намного лучше, но думал что как на веб мастере будет профиль.
FeStemBer
FeStemBer 26.02.2017 16:312
0
Всегда больше нравился как раз этот мини профиль, смотрю ему тени больше сделали, на раскладку, и теперь не понять, тут оказывается 2 раскладки, но все правильно, не вижу смысла логотип там держать, на этом сайте вообще он в блоге, что тоже в первые вижу.
Kosten
Kosten 26.02.2017 16:426
0
Не мог определить, как в название написать, раскладка, что то ближе, вот и написал, что по профилю, то уже складывал на сайт старый мини профиль от веб мастера, и его можно было поставить, там с текстовыми иконками был, здесь каждый может сделать.
tsakonter
tsakonter 26.02.2017 16:353
0
Сопрано, но здесь хоть какая то адаптация существует, то на некоторых вообще ее нет. Не чего нового, просто немного изменен и согласен, что в правильную сторону, лого есть или нет, его можно вообще написать, а вот мини профиль обязан быть.
ucozmental
ucozmental 26.02.2017 16:374
0
Опять негде посмотреть, что демо можно было сделать.
Kosten
Kosten 26.02.2017 16:405
0
Да мне надоело его собирать, хотя быстро собрал, только нужно было мини профиль по центру вывести, а на счет дело, уже делал на эту навигацию, так есть только на тестовом сайте можно посмотреть, пока установлено.
Kosten
Kosten 26.02.2017 16:447
0
Можно посмотреть, только без профиля а с логотипом, что переходим сюда и смотрим и проверяем функций, они все похоже как здесь представлены.
Советник
Советник 26.02.2017 19:558
0
Не могу найти старый мини профиль от сайта на шрифтовых иконках, мне больше оннравится, там можно изменить кнопки и сделать по теме.
1 2 »
avatar