вРазные полезности

Раздвижное меню для системы 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>

источник: zornet.ru

Похожие посты