Боба
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1

Для добавления необходима авторизация
Граффити
Форма входа

Закрыть

Синее горизонтальное меню с профилем пользователя
Скрипты

Всем привет! Сегодня хочу поделиться с вами очередной своей работай "Горизонтальное меню для сайтов uCoz"
Меню выполнено в синем тоне и имеет выпадающие списки их количество можно регулировать добавить или же удалить по своему усмотрению
Так же в меню есть мини профиль который появляется после авторизации пользователя он также имеет выпадающий список

Установка

Для начала нам нужно в Управление дизайном » Редактирование шаблонов » Верхняя часть сайта добавить данный код
Код
<!--Меню-->
<div id="menu_div">
  <div id="navigation">
  <div id="menu">
  <ul id="nav" class="nav">
  <li><a href="/" id="logo"><img src="Ссылка на картинку логотипа"></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="#">Пункт 1</a>
  <ul>
  <li><a href="#">Пункт 1</a></li>
  <li><a href="#">Пункт 2</a></li>
  <li><a href="#">Пункт 3</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="#">Пункт 4</a></li>
  <li><a href="#">Пункт 5</a></li>
  <li><a href="#">Пункт 6</a>
  </li>  
  </ul>  
  </li>  
   
  <li><a href="#">Пункт 2 </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>
  <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 КОНЕЦ-->
<!--/Меню-->
Теперь в таблицу стилей в самый конец добавим код
Код
/*Меню*/

#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: 60px;
  height: 60px;
  margin: 5px;
  object-fit: cover;
}
.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: #FFF;  
}

/* 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: #00A4E8;  
color: #FFF;
}
   

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

#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: 70px; /* menu height */

}

#menu {
width: 100%;
position: relative;
  background: #0096DA;
}

#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: 70px;
padding:0 15px;
text-decoration:none;
margin:0;
font-size:14px;
}

/*====================
  Подменю  
=====================*/
#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;
} /* стереть подменю */

#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 surprised pacity;  
-webkit-transition-duration: 0.5s, 0.5s; /* duration in seconds */
-webkit-transition-timing-function: linear, ease-out;
} /* Анимация прозрачности */
/*Меню*/
Теперь нам осталось только заменить текст в первом коде
Цитата
"Ссылка на картинку логотипа"
и
Цитата
"Ссылка на картинку нет аватара"
на соответствующие ссылки
Готово!

Особености:

Тематика
Для любого сайта
Браузеры
Одинаково работаее на всех браузерах последней версии
Адаптация
Нет
Архив
Нет

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

Запись добавлена

Комментарии

Нет комментариев

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