Раздвижное зеленое вертикальное меню для ucoz

5704 просмотров Alan_Writer 27.05.2013

Демо ▶️

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

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

1. Вставляете в самый низ сайта, перед </body>:
Код
<script src="http://fullweb.ucoz.ru/SCRIPTS/Green-menu/functions.js" type="text/javascript"></script>
Кроме того, в <head> обязательно должна быть установлена библиотека jQuery, но на uCoz она есть по-умолчанию.

2. Копируем код и вставляем в CSS:
Код
a:focus, a:hover {color : #7dbc00;}
a {color : #fff; text-decoration : none;}  
#navigation {margin-bottom : 5px;}  
.subnav {color : #d1d1d1; text-align:center;}  

.navhead, .navhead_blank {  
width:100%;
text-align:center;
height:21px;
padding-top:3px;
background:url('/SCRIPTS/Green-menu/greenrep.png') 0 0 repeat-x;
border:1px solid #7dbc00;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin-bottom:5px;}  

.selected {
background:url('/SCRIPTS/Green-menu/whiterep.png') 0 0 repeat-x;
border:1px solid #e8e8e8;
font-weight:bold;}

.selected span {color:#000!important;}
.navhead {cursor : pointer;}

.submenu {  
width:100%;
margin : 0;  
padding : 0;  
list-style : none;  
margin-bottom:20px;}  

.submenu li {  
margin:0 auto;  
width : 95%;}  

.submenu li a {
width:100%;  
display : block;  
color : #ccc;  
padding-top : 3px;  
height : 20px;  
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:#111;
  margin-bottom:3px;
  border:1px solid #222;}  

.submenu li a:hover {  
color : #fff;  
background:#222;
border:1px solid #333;}

3. Вставляем туда, где хотим видеть раздвижное меню для ucoz:
Код
<div id="navigation">  
<div class="sidenav">
<div class="navhead_blank">
<a href="http://fullweb.ucoz.ru/" style="display: none;"></a>
<span><a href="#" title="">Главная страница</a></span>
</div>  
<div class="navhead selected"><span>Меню 1</span></div>  
<div style="display: block;" class="subnav">  
  <ul class="submenu">  
  <li><a href="#" title="">Ссылка 1</a></li>  
  <li><a href="#" title="">Ссылка 2</a></li>  
  <li><a href="#" title="">Ссылка 3</a></li>  
  <li><a href="#" title="">Ссылка 4</a></li>  
  </ul>  
  </div>
<div class="navhead"><span>Меню 2</span></div>  
<div style="display: none;" class="subnav">  
  <ul class="submenu">  
  <li><a href="#" title="">Ссылка 1</a></li>  
  <li><a href="#" title="">Ссылка 2</a></li>  
  <li><a href="#" title="">Ссылка 3</a></li>  
  </ul>
  </div>  
<div class="navhead"><span>Меню 3</span></div>  
<div style="display: none;" class="subnav">  
  <ul class="submenu">  
  <li><a href="#" title="">Ссылка 1</a></li>  
  <li><a href="#" title="">Ссылка 2</a></li>  
  <li><a href="#" title="">Ссылка 3</a></li>  
  <li><a href="#" title="">Ссылка 4</a></li>  
  </ul>  
  </div>  
<div class="navhead"><span>Меню 4</span></div>  
<div style="display: none;" class="subnav">  
  <ul class="submenu">  
  <li><a href="#" title="">Ссылка 1</a></li>  
  <li><a href="#" title="">Ссылка 2</a></li>  
  <li><a href="#" title="">Ссылка 3</a></li>  
  </ul>  
  </div>  
<div class="navhead"><span>Меню 5</span></div>  
<div style="display: none;" class="subnav">  
  <ul class="submenu">  
  <li><a href="#" title="">Ссылка 1</a></li>  
  <li><a href="#" title="">Ссылка 2</a></li>  
  <li><a href="http://tpl.if.ua" title="">Ссылка 3</a></li>  
  </ul>  
  </div>  
</div>  
</div>

Все готово!

Теги: меню для сайта, раздвижное меню, меню для ucoz, вертикальное меню, зеленое меню
6 Комментариев
avatar
5
Всё сделал как надо но это полное "П" cry
avatar
6
Как надо сделано в демо, и там все работает.
avatar
3
А где архив шаблона?
avatar
4
Зачем, все что нужно тут прописано.
avatar
1
Добрый день!
Добавил это меню, но оно не работает!
Я так понимаю, что нужно еще добавить functions.js но где его взять?
avatar
2
Ссылку на скрипт заменил. Залей его себе на сайт, и потом замени ссылку.