» »

Раздвижное меню для системы ucoz


Раздвижное меню для системы ucoz

Еще одно не ординарное меню для системы ucoz, меню оригинальное на ваше усмотрение ставить или нет подойдет к вашему дизайну. Как говориться всегда зеленый оттенок цвета сочетается с темным. А это означает что его так на темный фон можно поставить о оно будит смотреться шикарно. Так и на светлый сайт, но чтоб на сайте в дизайне его привуалировал зеленая гамма цвета.
Приступим к установке:
1. Копируем код и вставляем в 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('http://zornet.ru/Ajaxoskrip/greenrep.png') 0 0 repeat-x;  
border:1px solid #7dbc00;  
-moz-border-radius:5px;  
-webkit-border-radius:5px;  
margin-bottom:5px;  
}  

.selected {  
  background:url('http://zornet.ru/Ajaxoskrip/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;  
}

2. Вставляем в любой блок на сайте(туда, где хотим видеть раздвижное меню для ucoz):
Код
<div id="navigation">  
  <div class="sidenav">  
  <div class="navhead_blank"><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>

3. Перед на каждой странице:
Код
<script src="http://zornet.ru/Ajaxoskrip/jquery.js" type="text/javascript"></script>  
  <script src="http://zornet.ru/Ajaxoskrip/functions.js" type="text/javascript"></script>
16.04.2012 Просмотров: 1974 Комментарий: (3)

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

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

Комментарий: 3
AnTron
AnTron 25.12.2015 15:521
0
А эта навигация точно работает. То один раз установлял, что то ровно не встала это меню.
nikolla76
nikolla76 25.12.2015 16:052
0
Вот то что его вообще не кто не видил, но думаю на щаблоне стоит оно.
Kvint
Kvint 25.12.2015 16:273
0
Так установите и проверите за одно.
avatar