Вертикальное меню для uCoz

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1 1
Модератор форума: Diaz

Tarina

Дата: Суббота, 29.11.2014, 23:22:18 | Сообщение # 1

Генералиссимус

Группа: Администраторы

Сообщений: 491

Награды: 3

Статус: Offline

Многофункциональное вертикальное меню для uCoz

Демо

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

Установка меню

Шаг 1: Установка HTML
Добавляем HTML-код бокового меню: Панель управления → Дизайн → Управление дизайном (шаблоны) → Верхняя часть сайта:

Код

<div id="main">
<ul id="navigationMenu">
 <li><a class="m_home " href="$HOME_PAGE_LINK$">На главную</a></li>
 <li><a class="m_gost" href="/gb">Гостевая</a></li>
 <li><a class="m_forum" href="/forum">Форум</a></li>
 <li><a class="m_pochta" href="/index/0-3">Обратная связь</a></li>
 <?if($USER_LOGGED_IN$)?>
 <li><a class="m_vixod" href="$LOGOUT_LINK$">Выход</a></li>
 <?else?>
 <li><a class="m_vxod" href="$LOGIN_LINK$">Вход</a></li>
 <?endif?>
</ul>
</div>

Шаг 2: Установка CSS

Добавляем CSS-код стилей бокового меню. Для этого переходим в Панель управления → Дизайн → Управление дизайном (CSS) и вставляем код (для вывода цветного или темного меню):

Цветное боковое меню uCoz. Расположение слева:

Код

#main{
   position:fixed;
   top: 150px;
   left: 0px;
   padding:0;
}

#main ul{
   padding:0;
}

#navigationMenu li{
   list-style:none;
   height:35px;
   width:35px;
}

#navigationMenu span{
   position:absolute;
   overflow:hidden;
   width:0;
   left:35px;
   padding:0;
   font:12px Verdana,Arial,Helvetica,sans-serif;
   font-weight:bold;
   line-height:35px;
   white-space:nowrap;
   -webkit-transition: 0.25s;
   -moz-transition: 0.25s;
   transition: 0.25s;
}

#navigationMenu a{
   display:block;
   position:relative;
   background:url(http://uguide.ru/img/ucoz/navigation_1.png) no-repeat;
   height:35px;
   width:35px;
}

#navigationMenu a:hover span{
   overflow:hidden;
   text-align:center;
   width:110px;
   padding:0px 10px;
}

#navigationMenu a:hover{
   text-decoration:none;
}

#navigationMenu .m_home {background-position:0 0;}
#navigationMenu .m_home :hover {background-position:0 -35px;}
#navigationMenu .m_home span{
   background:#7da315;
   color:#3d4f0c;
   text-shadow:1px 1px 0 #99bf31;
}

#navigationMenu .m_gost {background-position:-35px 0;}
#navigationMenu .m_gost:hover {background-position:-35px -35px;}
#navigationMenu .m_gost span{
   background:#1e8bb4;
   color:#223a44;
   text-shadow:1px 1px 0 #44a8d0;
}

#navigationMenu .m_forum {background-position:-70px 0;}
#navigationMenu .m_forum:hover {background-position:-70px -35px;}
#navigationMenu .m_forum span{
   background:#c86c1f;
   color:#5a3517;
   text-shadow:1px 1px 0 #d28344;
}

#navigationMenu .m_pochta { background-position:-105px 0;}
#navigationMenu .m_pochta:hover{ background-position:-105px -35px;}
#navigationMenu .m_pochta span{
   background-color:#d0a525;
   color:#604e18;
   text-shadow:1px 1px 0 #d8b54b;
}

#navigationMenu .m_vxod { background-position:-140px 0;}
#navigationMenu .m_vxod:hover { background-position:-140px -35px;}
#navigationMenu .m_vxod span{
   background-color:#af1e83;
   color:#460f35;
   text-shadow:1px 1px 0 #d244a6;
}

#navigationMenu .m_vixod { background-position:-175px 0;}
#navigationMenu .m_vixod:hover { background-position:-175px -35px;}
#navigationMenu .m_vixod span{
   background-color:#27ddbf;
   color:#097863;
   text-shadow:1px 1px 0 #87ffe7;
}

Темное боковое меню uCoz. Расположение справа:

Код

#main{
   position:fixed;
   top: 150px;
   right: 0px;
   padding:0;
}

#main ul{
   padding:0;
}

#navigationMenu li{
   list-style:none;
   height:35px;
   width:35px;
}

#navigationMenu span{
   position:absolute;
   overflow:hidden;
   width:0;
   right:35px;
   padding:0;
   font:12px Verdana,Arial,Helvetica,sans-serif;
   font-weight:bold;
   line-height:35px;
   white-space:nowrap;
   -webkit-transition: 0.25s;
   -moz-transition: 0.25s;
   transition: 0.25s;
}

#navigationMenu a{
   display:block;
   position:relative;
   background:url(http://uguide.ru/img/ucoz/navigation_2.png) no-repeat;
   height:35px;
   width:35px;
}

#navigationMenu a:hover span{
   overflow:hidden;
   text-align:center;
   width:110px;
   padding:0px 10px;
}

#navigationMenu a:hover{
   text-decoration:none;
}

#navigationMenu .m_home {background-position:0 0;}
#navigationMenu .m_home :hover {background-position:0 -35px;}

#navigationMenu .m_gost {background-position:-35px 0;}
#navigationMenu .m_gost:hover {background-position:-35px -35px;}

#navigationMenu .m_forum {background-position:-70px 0;}
#navigationMenu .m_forum:hover {background-position:-70px -35px;}

#navigationMenu .m_pochta { background-position:-105px 0;}
#navigationMenu .m_pochta:hover{ background-position:-105px -35px;}

#navigationMenu .m_vxod { background-position:-140px 0;}
#navigationMenu .m_vxod:hover { background-position:-140px -35px;}

#navigationMenu .m_vixod { background-position:-175px 0;}
#navigationMenu .m_vixod:hover { background-position:-175px -35px;}

#navigationMenu .m_gost span,
#navigationMenu .m_forum span,
#navigationMenu .m_pochta span,
#navigationMenu .m_vxod span,
#navigationMenu .m_vixod span,
#navigationMenu .m_home span {
   background:#575757;
   color:#fff;
   text-shadow:1px 1px 0 #000;
}

Анимированное вертикальное меню для сайта на CSS3

Демо

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

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

Установка меню

Шаг 1: HTML

Приведенный ниже HTML-код необходимо вставить в верхнюю часть сайта: Панель управления → Дизайн → Управление дизайном (шаблоны) → Верхняя часть сайта:

Код

<div id='snav' class='en'>
<ul>
<li>
<a href="$HOME_PAGE_LINK$">

Главная
</a>
</li>
<li>
<a href="/news/">

Новости
</a>
</li>
<li>
<a href="/photo/">

Фотографии
</a>
</li>
<li>
<a href="/load/">

Файлы
</a>
</li>
<li>
<a href="/index/0-3">

Контакты
</a>
</li>
<li>
<a href="/video/">

Видео
</a>
</li>
<li>
<a href="/faq/">

FAQ
</a>
</li>
<li>
<a href="/news/rss">

RSS
</a>
</li>
<li>
<a href="/forum/">

Форум
</a>
</li>
<li>
<a href="/shop/">

Магазин
</a>
</li>
</ul>
</div>

Шаг 2: CSS
Теперь самое главное: нам необходимо стилизовать нашу навигацию. Для этого в самый верх таблицы стилей (Панель управления → Дизайн → Управление дизайном (CSS) → Таблица стилей) добавляем следующий CSS-код :

Расположение слева

Код

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
#snav.en {
   left: 0;
   text-align: left;
}
#snav.en li span {
   left: -100px;
}
#snav.en li a:hover span {
   left: 35px;
}

/* Настройка навигации */
#snav {
   position: fixed;
   top:20%;
   z-index: 9999;
   font-size: 18px;
   font-family: 'Open Sans', sans-serif;
}
#snav ul {
   list-style: none;
}
#snav * {
   margin: 0;
   padding: 0;
   outline: 0;
   transition: all .5s ease;
   -webkit-transition: all .5s ease;
   -moz-transition: all .5s ease;
   -o-transition: all .5s ease;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
#snav li a {
   text-decoration: none;
   color: #fff;
   display: block;
   position: relative;
}
#snav .fa {
   vertical-align: middle;
   font-size: 18px;
   width: 35px;
   height: 35px;
   line-height: 35px;
   text-align: center;
   position: relative;
   z-index: 4;
}
#snav li span {
   font-size: 15px;
   vertical-align: middle;
   height: 35px;
   line-height: 35px;
   width: auto;
   white-space: nowrap;
   overflow: hidden;
   display: block;
   padding: 0 15px;
   position: absolute;
   top: 0;
   visibility: hidden;
   z-index: 3;
}
#snav li a:hover .fa {
   transform: rotate(720deg);
}
#snav li a:hover span {
   visibility: visible;
}

/*Цветовые настройки */
/* Параметры для браузера который поддерживает :nth-child */
#snav li span {
   background-color: #555;
}

/* Цвет фона за иконкой*/
#snav li .fa {
   background-color: #EEE;
   color: #555
}

/* Цвет иконки */
#snav li a:hover .fa {
   color: #fff;
}
#snav li:nth-child(10n+1) span, #snav li:nth-child(10n+1) a:hover .fa {
   background-color: #8350DD;
}
#snav li:nth-child(10n+2) span, #snav li:nth-child(10n+2) a:hover .fa {
   background-color: #4EC5DB;
}
#snav li:nth-child(10n+3) span, #snav li:nth-child(10n+3) a:hover .fa {
   background-color: #3DC25D;
}
#snav li:nth-child(10n+4) span, #snav li:nth-child(10n+4) a:hover .fa {
   background-color: #99BE24;
}
#snav li:nth-child(10n+5) span, #snav li:nth-child(10n+5) a:hover .fa {
   background-color: #38c;
}
#snav li:nth-child(10n+6) span, #snav li:nth-child(10n+6) a:hover .fa {
   background-color: #ff0000;
}
#snav li:nth-child(10n+7) span, #snav li:nth-child(10n+7) a:hover .fa {
   background-color: #000;
}
#snav li:nth-child(10n+8) span, #snav li:nth-child(10n+8) a:hover .fa {
   background-color: #F1A111;
}
#snav li:nth-child(10n+9) span, #snav li:nth-child(10n+9) a:hover .fa {
   background-color: #777;
}
#snav li:nth-child(10n+10) span, #snav li:nth-child(10n+10) a:hover .fa {
   background-color: #30555C;
}

Расположение справа

Код

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
#snav.en {
   right: 0;
   text-align: right;
}
#snav.en li span {
   right: -100px;
}
#snav.en li a:hover span {
   right: 35px;
}

#snav {
   position: fixed;
   top:20%;
   z-index: 9999;
   font-size: 18px;
   font-family: 'Open Sans', sans-serif;
}
#snav ul {
   list-style: none;
}
#snav * {
   margin: 0;
   padding: 0;
   outline: 0;
   transition: all .5s ease;
   -webkit-transition: all .5s ease;
   -moz-transition: all .5s ease;
   -o-transition: all .5s ease;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
#snav li a {
   text-decoration: none;
   color: #fff;
   display: block;
   position: relative;
}
#snav .fa {
   vertical-align: middle;
   font-size: 18px;
   width: 35px;
   height: 35px;
   line-height: 35px;
   text-align: center;
   position: relative;
   z-index: 4;
}
#snav li span {
   font-size: 15px;
   vertical-align: middle;
   height: 35px;
   line-height: 35px;
   width: auto;
   white-space: nowrap;
   overflow: hidden;
   display: block;
   padding: 0 15px;
   position: absolute;
   top: 0;
   visibility: hidden;
   z-index: 3;
}
#snav li a:hover .fa {
   transform: rotate(720deg);
}
#snav li a:hover span {
   visibility: visible;
}

#snav li span {
   background-color: #555;
}

#snav li .fa {
   background-color: #EEE;
   color: #555
}
/* icons hover color */
#snav li a:hover .fa {
   color: #fff;
}

#snav li:nth-child(10n+1) span, #snav li:nth-child(10n+1) a:hover .fa {
   background-color: #8350DD;
}
#snav li:nth-child(10n+2) span, #snav li:nth-child(10n+2) a:hover .fa {
   background-color: #4EC5DB;
}
#snav li:nth-child(10n+3) span, #snav li:nth-child(10n+3) a:hover .fa {
   background-color: #3DC25D;
}
#snav li:nth-child(10n+4) span, #snav li:nth-child(10n+4) a:hover .fa {
   background-color: #99BE24;
}
#snav li:nth-child(10n+5) span, #snav li:nth-child(10n+5) a:hover .fa {
   background-color: #38c;
}
#snav li:nth-child(10n+6) span, #snav li:nth-child(10n+6) a:hover .fa {
   background-color: #ff0000;
}
#snav li:nth-child(10n+7) span, #snav li:nth-child(10n+7) a:hover .fa {
   background-color: #000;
}
#snav li:nth-child(10n+8) span, #snav li:nth-child(10n+8) a:hover .fa {
   background-color: #F1A111;
}
#snav li:nth-child(10n+9) span, #snav li:nth-child(10n+9) a:hover .fa {
   background-color: #777;
}
#snav li:nth-child(10n+10) span, #snav li:nth-child(10n+10) a:hover .fa {
   background-color: #30555C;
}

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

Н.С.Н

Вертикальное меню для uCoz

Страница 1 из 1
1