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

Как сделать вертикальное меню для uCoz

  • Обновлено:
    2014-08-14
  • Просмотров:
    8484
  • Отзывов:
    17
  • Рейтинг: 4.5

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

Но прежде чем перейти к инструкции по установке бокового меню хотелось бы вернуться к моей заметке о монетизации сайта при помощи GoGetLinks. Уже после ее публикации я нашел очень хороший материал, который еще более детально описывает процесс работы с этой биржей. Так что если вы решили попробовать поработать с этой системой - рекомендую ознакомиться с подробной инструкцией от Сергея Первушина: gogetlinks.

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

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

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

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

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

Также я расскажу об ещё одном варианте создания бокового меню на сайте uCoz.

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

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

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

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

Шаг 1: HTML

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

Код
<div id='snav' class='en'>
<ul>
<li>
<a href="$HOME_PAGE_LINK$">
<i class="fa fa-home"></i>
<span>Главная</span>
</a>
</li>
<li>
<a href="/news/">
<i class="fa fa-file-text"></i>
<span>Новости</span>
</a>
</li>
<li>
<a href="/photo/">
<i class="fa fa-camera"></i>
<span>Фотографии</span>
</a>
</li>
<li>
<a href="/load/">
<i class="fa fa-download"></i>
<span>Файлы</span>
</a>
</li>
<li>
<a href="/index/0-3">
<i class="fa fa-envelope"></i>
<span>Контакты</span>
</a>
</li>
<li>
<a href="/video/">
<i class="fa fa-video-camera"></i>
<span>Видео</span>
</a>
</li>
<li>
<a href="/faq/">
<i class="fa fa-comments-o"></i>
<span>FAQ</span>
</a>
</li>
<li>
<a href="/news/rss">
<i class="fa fa-rss"></i>
<span>RSS</span>
</a>
</li>
<li>
<a href="/forum/">
<i class="fa fa-bullhorn"></i>
<span>Форум</span>
</a>
</li>
<li>
<a href="/shop/">
<i class="fa fa-shopping-cart"></i>
<span>Магазин</span>
</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;
}

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


P.S.: после установки обновите кэш страницы, нажмите Ctrl+F5.
  • Автор: Дмитрий Луценко

avatar

Комментариев:17

Аватар lika_star6
17 vk Анна Дубко • 20:34, 2016-03-22
Доброго времени суток! ничего не вышло.
Просто обычное меню, пробовала сдклать по Вашей инструкции Анимированное вертикальное меню для сайта на CSS3
нет аватара
16 uid hrust hrust • 02:00, 2016-02-28
Привет!
Спасибо за прекрасное меню!
Маленькие траблы со вторым вариантом:
1. При расположении меню слева слегка наползает на контент, съедая 1-2 буквы. В какой строчке кода можно чуть уменьшить ширину меню в неактивном состоянии?
2. При отображении на мобильном эта проблема усугубляется. Съедается еще больше букв, ибо контент располагается компакто по самые стенки жкрана мобильника по ширине. Думаю, уменьшать меню в этом случае нет.... Надо сделать так, чтобы на мобильнике оно не отображалось уже тогда совсем. Как это организовать?
нет аватара
15 uid Дима Белкин • 18:02, 2015-10-26
Спасибо,крутой скрипт.
Аватар akula-z
14 uid akula-z • 11:28, 2015-06-20
Скажите, а можно в этом меню сделать выпадающее подменю и чтобы оно было такого же цвета, как и само меню?
Аватар mishel
13 uid mishel • 08:08, 2015-03-21
Многофункциональное вертикальное меню для uCoz
Спасибо, все получилось. Подскажите, пожалуйста: можно-ли добавить кнопки, изменить надписи, ссылки на модули? Я новичок (чайник).
Аватар скарлетт
8 uid скарлетт • 18:40, 2015-03-16
после добавления скрипта исчезло мое меню.Почему так?
Аватар uGuide
Хороший пост0Плохой пост
9 uid Дмитрий Луценко • 18:43, 2015-03-16
Трудно сказать, взаимосвязи между вашим меню и этим скриптом нету.
Вы точно все по инструкции устанавливали?
Аватар скарлетт
10 uid скарлетт • 18:59, 2015-03-16
Думаю да. Как теперь исправлять, помогите
Аватар uGuide
Хороший пост0Плохой пост
11 uid Дмитрий Луценко • 19:00, 2015-03-16
Покажите свой сайт. Этот http://www.knigalyb.ru/ ?
Аватар скарлетт
12 uid скарлетт • 19:03, 2015-03-16
да  этот
Аватар mega_mujyk
7 vk Ігорёня Юхименко • 23:07, 2015-01-21
Второй вариан, шаг 1: HTML-код добавлял в "Первый контейнер", не сработало. Первый вариант сработал.
Аватар
6 vk Кристина Полякова • 22:26, 2014-08-15
P.S.: после установки обновите кэш страницы, нажмите Ctrl+F5. - моя тема )) Спасибо за помощь ! v
Аватар
1 vk Кристина Полякова • 00:18, 2014-08-15
и кстати.. 1 вариант не работает )  thumb
Аватар
2 vk Дмитрий Луценко • 11:51, 2014-08-15
Что именно я указал не верно? О какой конкретно ошибке вы говорите, об этой: "<еще> это что за коды такие?" Где вы это увидели? Покажите сайт, на котором не работает?
Я несколько раз перепроверял, все отлично работает.
Аватар
3 vk Кристина Полякова • 13:52, 2014-08-15
http://7tigrov.com - вот пожалуйста ) Да, именно о той ошибке... или то, что данный отрезок кода был указан русскими буквами это не ошибка ? Ну в принципе еще раз проверили... почему то не работает )
Аватар
4 vk Дмитрий Луценко • 14:29, 2014-08-15
Давайте помогу вам, если не получается. Предоставьте доступ в админ панель своего сайта
Аватар
5 vk Кристина Полякова • 17:32, 2014-08-15
отправили в ЛС )
Добавить комментарий