ZorNet.Ru — сайт для вебмастера » Меню для сайта » Раздвижное меню для системы uCoz

Раздвижное меню для системы 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 Апреля 2012 Просмотров: 4049 Комментариев: (3)

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

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

Оставь свой отзыв

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