» »

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


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

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

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

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

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

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

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

Установка:

Делал так, все сверх сайта убрал, но стандартный шаблон был, вы просто можете вверх сайта и в самый потолок установить этот скрипт.

Код
<!--Меню-->  
  <div id="menu_div">  
  <div id="navigation">  
  <div id="menu">  
  <ul id="nav" class="nav">  
  <li><a href="/" id="logo"><img src="http://i.imgur.com/c9BPNzI.png"></a></li>  
  <?if($USER_LOGGED_IN$)?> <li><a href="/index/8-$USER_ID$" title="Мой профиль" class="mini_prof_h"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$" ><?else?><img src="Ссылка на картинку нет аватара"><?endif?></a>  
  <ul>  
  <li><a href="/index/8-$USER_ID$">Мой профиль</a></li>  
  <li><a href="$PM_URL$">Сообщения</a></li>  
  <li><a href="/index/11">Настройки</a></li>  
  <li><a href="$LOGOUT_LINK$">Выйти</a></li>  
  </ul>  
  </li><?else?>  
  <li class="vxod"><a href="$LOGIN_LINK$">Войти</a></li><?endif?>  
  <div id="clr"></div>  
  </ul>  
  <ul id="nav">  
  <li><a href="#">Скрипты для uCoz</a>  
  <ul>  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  <li><a href="#">Пункт 5</a></li>  
  <li><a href="#">Пункт 6</a></li>  
  </li>  
  </ul>  
  </li>  
   
  <li><a href="#">Шаблон для uCoz</a>  
  <ul>  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  </ul>  
  </li>  
   
  <li><a href="#">ZORNET.Ru</a>  
  <ul>  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  </ul>  
  </li>  
   
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  <li><a href="#">Пункт 5</a></li>  

  </ul>  
   
   
   
  </div><!-- #menu КОНЕЦ-->  
  </div><!-- #navigation КОНЕЦ-->  
  </div><!-- #menu_div КОНЕЦ-->  
  <!--/Меню-->


Логотип стоит под ссылкой в коде а не в стилях.

Теперь CSS:

Код
/*Меню*/  

  #nav ul.nav {  
  width: 300px;  
  position: absolute;  
  float: left!important;  
  z-index: 9;  

  }  

  #logo {  
  width: 190px;  
  padding-left: 0px!important;  
  margin: 0px!important;  

  }  

  #nav li a.mini_prof_h img {
  width: 37px;
  height: 37px;
  margin: 5px;
  object-fit: cover;
  border-radius: 5px;
  }  
  .vxod a{  
  background: #FC7171;  
  color: #FFF!important;  
  padding: 0 15px!important;  
  }  
  .vxod a:hover {  
  background: #00A4E8;  
  color: #FFF!important;  
  }  
  /* Цветовая схема */  
  /* Menu bar background color */  
  #navigation,  
  #nav li ul li,  
  #nav li ul li a{
  background: #E2E2E2;
  }  

  /* Menu Item text color */  

  #nav li ul li,  
  #nav li ul li a,  
  #nav li ul li a:hover {  
  color: #4e3a40;  
  }  
  #nav li a {  
  color: #FFF;  
  }  

  /* Menu Item background color on hover */  
  #nav li a:hover,  
  #nav li ul li a:hover {
  background: #2194C3;
  color: #FFF;
  border-radius: 5px;
  font-weight: bold;
  }  
   

  /* /КОНЕЦ Цветовой схемы */  

  #menu_div {  
  clear: both;  
  position: relative;  

  } /* Free space to top specialy for menu */  

  #navigation, #menu_div {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  }  

  #menu_div, #navigation, #menu, #nav{
  height: 75px;/* menu height */
  }  

  #menu {
  width: 100%;
  position: relative;
  background: #1178A7;
  }  

  #nav{
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  float: left;
  z-index: 10;
  }  

  #nav li a,#nav li {
  float:left;
  }  

  #nav li {
  list-style:none;
  position:relative;
  }  

  #nav li a {
  line-height: 40px;
  padding:0 15px;
  text-decoration:none;
  margin:0;
  font-size:14px;
  font-weight: bold;
  }  

  /*====================  
  Подменю  
  =====================*/  
  #nav li ul {
  display:none;
  position:absolute;
  left:0;
  top:100%;
  padding:0;
  margin:0;
  border: 1px solid #eee;
  box-shadow: 0 1px 10px rgba(0,0,0,.15);
  z-index: 9999;
  border-radius: 3px;
  } /* стереть подменю */  

  #nav li:hover > ul {  
  display:block;  
  } /* show submenu on hover */  

  #nav li ul li,#nav li ul li a {  
  float:none;  
  height: 35px; /* submenu item height */  
  min-width: 180px; /* submenu item minimal width */  
  line-height: 35px;  
  border-right: 0;  
  text-shadow: none;  
  display:block;  
  font-size:13px;  
  font-weight:400;  
  text-transform:inherit;  
  } /* Submenu item */  

  #nav li ul li {  
  _display:inline; /* for IE */  
  }  

  /* == 12. Sub-Sub Menu == */  
  #nav li ul li ul {  
  display:none;  
  }  

  #nav li ul li:hover ul {  
  left:100%;  
  top:0;  
  }  

  /*========================  
  Переходы  
  ========================*/  

  .searchfield:focus,  
  .searchfield:not(:focus){  
  -webkit-transition-property:width;  
  -webkit-transition-duration: 0.5s, 0.5s;  
  -webkit-transition-timing-function: linear, ease-out;  
  }  

  #menu_div:hover,  
  #navigation:hover,  
  #nav li ul a,  
  #menu_div,  
  #navigation,  
  #nav li a,  
  #menu_div:not(:hover),  
  #navigation:not(:hover)  
  {  
  -webkit-transition-property:opacity;  
  -webkit-transition-duration: 0.5s, 0.5s; /* duration in seconds */  
  -webkit-transition-timing-function: linear, ease-out;  
  } /* Анимация прозрачности */  
  /*Меню*/


Готово, для тех кто копировать будете и сами пишите на своем портале, чтоб уважали чужой труд, так копируйте и источник.

Второе горизонтальное меню с профилем

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

Так будет с профилем:



Так как понимаете будет показываться под меню.



Установка:

Вверх сайта:

Код
<ul id="nav">  
<li><a href="news/" title="">Главная</a></li>
<li><a href="#" title="">Наш Блог</a></li>  
<li><a href="forum/" title="">Наш Форум</a></li>
<li><a class="hsubs" href="#" title="">News/Новости</a>  
<ul class="subs">  
<li><a href="#" title="">Новости Сайта</a></li>  
<li><a href="#" title="">Новости WarofDezarm</a></li>  
<li><a href="#" title="">Новости Игр</a></li>  
<li><a href="#" title="">Новости Ucoz</a></li>  
<li><a href="#" title="">Новости Заработка</a></li>  
</ul>  
</li>  
<li><a class="hsubs" href="#" title="">Все для Ucoz</a>  
<ul class="subs">  
<li><a href="#" title="">Шаблоны для Ucoz</a></li>  
<li><a href="#" title="">Скрипты для Ucoz</a></li>  
<li><a href="#" title="">Информеры для Ucoz</a></li>  
<li><a href="#" title="">Сайты системы Ucoz</a></li>  
<li><a href="#" title="">Сайты на Ucoz</a></li>  
</ul>  
</li>  
<li><a class="hsubs" href="#" title="">Графика для Сайта</a>  
<ul class="subs">  
<li><a href="#">PSD Исходники</a></li>  
<li><a href="#">Разные Иконки</a></li>  
<li><a href="#">Бесплатная Графика</a></li>  
<li><a href="#">Платная Графика</a></li>  
<li><a href="#">Онлайн PhotoShop</a></li>  
</ul>  
</li>
<li><a class="hsubs" href="#" title="">Видео Каталог</a>  
<ul class="subs">  
<li><a href="#" title="">Уроки WarofDezarm</a></li>  
<li><a href="#" title="">Уроки для 3dunity</a></li>  
<li><a href="#" title="">Уроки для Игр</a></li>  
<li><a href="#">Уроки для Ucoz</a></li>  
<li><a href="#">Уроки для Заработка</a></li>  
</ul>  
</li>  
<li><a class="hsubs" href="#" title="">Онлайн Сервисы</a>  
<ul class="subs">  
<li><a href="#">HTML Таблица цветов</a></li>  
<li><a href="#">Генератор Мета Тегов</a></li>  
<li><a href="#">Страница Юзербаров</a></li>  
<li><a href="#">Создание Кода Банера</a></li>  
</ul>  
</li>  
</ul>

<?if($USER_LOGGED_IN$)?>  
<div class="profile">  
<div class="profile-menu">  
  <a href="$PERSONAL_PAGE_LINK$" class="profile-button" title=""><span class="profile-avatar"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$" alt="" title=""><?else?><img src="http://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.jpg" alt="" title=""><?endif?></span> $USERNAME$ <i></i></a>  
  <div class="profile-list">  
  <div class="profile-list-in">  
  <a href="$PERSONAL_PAGE_LINK$" title="">Мой профиль</a>  
  <a href="/index/14" title="">Сообщения</a>  
  <a href="/index/15" title="">Пользователи</a>  
  <a href="/load/0-0-0-0-1" title="">Добавить материал</a>  
  <a href="/index/11" title="">Настройки</a>  
  <a href="/index/10" class="last" title="">Выйти</a>  
  </div>  
  </div>  
</div>  
</div>  
<?else?>  
<div class="profile">  
<div class="profile-menu">  
  <a href="$PERSONAL_PAGE_LINK$" class="profile-button" title=""><span class="profile-avatar"><img src="http://internetempire.ru/ava/coll/avatar_4.png" alt="" title=""></span> Гость <i></i></a>  
  <div class="profile-list">  
  <div class="profile-list-in">  
  <a href="$LOGIN_LINK$" title="">Войти</a>  
  <a href="/index/3" class="last" title="">Регистрация</a>  
  </div>  
  </div>  
</div>  
</div>  
<?endif?>


CSS:

Код
/* Разноцветное меню CSS для uCoz */  
#nav,#nav ul { list-style: none outside none; margin: 0; padding: 0; }  
#nav {background-color: #1B5277;display: table; padding: 10px; position: relative;margin: auto;width: 1350px;}  
#nav ul { background-color: #00415D; border:1px solid #00415D; border-radius: 0 5px 5px 5px; border-width: 0 1px 1px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); left: -9999px; overflow: hidden; padding: 20px 0 10px; position: absolute; top: -9999px; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -moz-transition: -moz-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; transition: transform 0.1s linear; }  
#nav li { float: left; position: relative; }  
#nav li a { color: #FFFFFF; display: block; font-size: 11.5px; padding: 10px 20px; text-decoration: none;text-transform: uppercase;}  
#nav li:hover > a { background-color: #00415D; border-radius: 5px 5px 5px 5px; color: #FFFFFF; }  
#nav li:hover > a.hsubs { border-radius: 5px 5px 0 0; }  
#nav li:hover ul.subs { left: 0; top: 31px; width: 180px; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); -webkit-transform: scaleY(1); }  
#nav ul li { width: 100%; }  
#nav ul li:hover > a { background-color: #222222 !important; border-radius: 5px 5px 5px 5px; }  
/* colors */  
.colorScheme { height: 32px; list-style: none outside none; margin: 0 auto 25px; width: 320px; }  
.colorScheme a { cursor: pointer; float: left; height: 30px; margin: 0 5px; width: 30px; }  
.colorScheme .red { background-color: red; }  
.colorScheme .orange { background-color: orange; }  
.colorScheme .pink { background-color: pink; }  
.colorScheme .green { background-color: green; }  
.colorScheme .blue { background-color: blue; }  
.colorScheme .indigo { background-color: indigo; }  
.colorScheme .violet { background-color: violet; }  
.colorScheme .grey { background-color: grey; }  
/* ------------------------- */

/* Мини-профиль */
.profile-menu {position:relative!important}  
.profile-button s {display:inline-block;z-index:9;background:#3297db;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:30px;padding-left:39px;padding-right:18px;text-decoration:none}  
.profile-button i {position:absolute;right:0px;top:14px;width: 0;height: 0;border-left: 3px solid transparent;border-right: 3px solid transparent;border-top: 4px solid rgba(255,255,255,0.7);}  
.profile-avatar, .profile-avatar img {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}  
.profile-avatar {display:inline-block;width:28px;height:28px;position:absolute;top:-0px;left:0px;border-radius: 20px;}  
.profile-avatar img {width:28px;height:28px;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:20px;padding-top:18px;visibility:hidden;z-index:9;}  
.profile-list-in {background:#00415D;width:190px!important;max-width:190px!important;padding:3px 0px;box-shadow:0px 8px 35px rgba(0,0,0,0.1);-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}  
.profile-list-in a {display:block;padding:10px 20px;text-decoration:none;border-bottom:1px solid #02344A;font-size:12px;color:#fff}  
.profile-list-in a:hover {color:#3498db;}  
.profile-list-in a.last {border-bottom:0px !important}  
.profile-list-in a i {background:#3297db;color:#fff;font-style:normal;font-size:10px;padding:2px 6px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}  

.profile {margin: -42px 110px;height:30px;font-size:13px;float:right}  

.profile_avatar, .profile_avatar img {-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;}  
.profile_avatar {width:27px;height:27px;overflow:hidden;float:left;margin-right:7px;margin-top:2px;border:2px solid #fff}  
.profile_avatar img {width:27px;height:27px;object-fit:cover}  
/* ------------------------- */


Но думаю с этим материалом понятно, если вы первое не настроите как вам нужно, второе полностью настроено, там только в стилях ширину выставите какую вам нужно.
20.03.2016 Просмотров: 755 Комментарий: (19)

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

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

Комментарий: 15
Сафрон
Сафрон 20.03.2016 00:431
0
Меню задумано отлично, но правильно, можно еще оставить на логотипе, чтоб при клике появлялись бордюры, но на аве, но совершено не нужно. Сделал так, но пока не поставил, вообще убрал их, можно и без обозначение, просто в скрипте LI убрать, но хотелось бы на разделах оставить.
Kosten
Kosten 20.03.2016 00:513
0
Да решил поменять LI на LO и в стилях прописать, просто не мог разобраться, так хотел сделать, чтоб только эффект распространялся на разделы, но что то не вышло, хотя должно по идее сработать.
Tergran
Tergran 20.03.2016 00:472
0
Видел на тестовом сайте, но там намного шире было горизонтальное меню, мне больше понравилось.
Kosten
Kosten 20.03.2016 00:534
0
Можно шире делать, но эффекты автоматически шире делаются, в таком случай выставить как есть у источника и Avarat сделать по размеру меньше, тогда что то получается. Все функций проверил, работает все отлично и также все операторы стоят.
Scheme
Scheme 20.03.2016 00:545
0
Сейчас попробую сделать, как то раз с таким почти встречался, здесь главное узнать, стили которые отвечают за это.
Сопрано
Сопрано 20.03.2016 00:586
0
А стили то одни, если уберешь, то пропадет везде, лучше оставить как есть, думаю самый оптимальный вариант.
Kosten
Kosten 20.03.2016 01:017
0
Здесь не понять, там вообще есть за прозрачность стили, но не мог найти, чтоб они отвечали за что то.
Kosten
Kosten 20.03.2016 01:028
0
Здесь лучше дождаться автора или как есть ставить и самому что то делать, но не нужно забывать, что скрипт полностью рабочий.
Kosten
Kosten 20.03.2016 21:109
0
waak, как раз в них разбирался, думаю как первоисточник поможете, чтоб на аварат не было эффекта и на логотипе, тогда бы вообще шикарно было.
Kosten
Kosten 23.03.2016 01:0610
0
waak, с вашего оригинала начинал, там сразу были бардюры на линк, и так получилось, что и на аватар и на лого, что по идее не должно быть. Их можно убрать, но на разделы бы оставить, а то убираешь, с разделов также уходят.
Kosten
Kosten 23.03.2016 03:1611
0
waak, точно нет, а можете скинуть этот скрипт, но если вас не затруднит и он не сильно засекречен.)
Kosten
Kosten 23.03.2016 03:5812
0
Вообщем это первое меню горизонтальное, которое понять не могу.)
Kosten
Kosten 24.03.2016 05:0313
0
waak, про то говорю, может на тестовом сайте сделает, но хотя бы попробуем.
Сафрон
Сафрон 24.03.2016 07:4614
0
Kosten, ты что, человек тебя отморозил как видно по описанию, не первый раз спрашиваешь, но не хочет он, не знаю, помочь или нормальный код дать, может у него есть на это причины.
Kosten
Kosten 24.03.2016 12:0315
0
Сафрон, да что то занесло не по детски, хотел понять этот скрипт, закрываю тему, думаю что мог то сделал.
avatar