Воскресенье, 06.07.2025, 17:16
Главная Регистрация RSS
Приветствую Вас, Гость
Никнейм Шампусик зарегистрирован!
Категории раздела
Наш опрос
Оцените мой сайт
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Вход на сайт
Поиск
Главная » Файлы » всё для uCoz

Красивое раздвижное меню для uCoz
[ Скачать с сервера (3.4 Kb) ] 16.01.2015, 17:39

Установка:
========


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://alkir71.ru/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('http://alkir71.ru/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;
}


2)Вставляем этот код в любой блок на сайте (туда, где хотим видеть раздвижное меню )
 

Код
<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://amdxxx.ru" title="">Софт 3</a></li>
  </ul>
  </div>
  </div>
  </div>


3)Вставляем последний код перед на странице сайта или на каждой странице:

 

Код
<script src="http://alkir71.ru/js/jquery.js" type="text/javascript"></script>
<script src="http://alkir71.ru/js/functions.js" type="text/javascript"></script>

 


Вот и всё готово !!!

 

Категория: всё для uCoz | Добавил: skupev | Теги: красивое, меню, Раздвижное
Просмотров: 267 | Загрузок: 36 | Рейтинг: 0.0/0
Всего комментариев: 0
Подписка:1

Код *: