Навигатор

Шаблоны для Joomla
Шаблоны для uCoz
Категории раздела
Профиль для ucoz [9]
Новый профиль для ucoz, мини профиль для ucoz, скрипт для ucoz профиль, профиль для сайта ucoz
Ajax для ucoz [13]
Ucoz ajax, ajax окна для ucoz, скрипты ajax для ucoz, новые ajax окна для ucoz, новый вид ajax ucoz
Скрипты для ucoz [128]
скачать скрипты для ucoz, скрипты ucoz
Меню для ucoz [45]
меню для ucoz, горизонтальное меню для ucoz, раздвижное меню ucoz, вертикальное, выпадающие меню ucoz
Календари для ucoz [20]
скрипт календарь cs, скрипт для ucoz календарь, календарь для ucoz cs 1.6, календари ucoz
Часы для ucoz [31]
часы для ucoz, часы для ucoz cs 1.6
Статистика для ucoz [11]
статистика cs для ucoz
Форма входа для ucoz [15]
форма входа для ucoz
Переключатели для ucoz [9]
Переключатели страниц для ucoz
Шапки для ucoz [13]
шапки для ucoz cs 1.6
Интересное
Мини профиль + Форма входа
Рейтинг: 59710
Красивое горизонтальное меню для ucoz
Рейтинг: 51511
Мини-чат для ucoz
Рейтинг: 45871
Скрипт мониторинга cs серверов
Рейтинг: 41329
Слайдер новостей для uCoz
Рейтинг: 18600

Меню для сайта ucoz

меню для сайта ucoz
Навигация на сайте должна быть красивой и удобной, именно эти функции выполняет данное вертикальное меню для uCoz. Цветовая гамма меню выполнена в 2 тонах: синий и оранжевый, которые менются при наведении на ссылку меню. Скрипт меню ucoz не содержить тяжелых для сайта js и jquery.
Меню для uCoz в серых тонах

Если кто-то захочет изменить цветовую гамму меню, увидеть его в серых тонах под Ваш дизайн, напишите это в комментарих и я предоставлю серую вариацию меню.

Шаг-1 Установка CSS

Заходим в П.У - Дизайн - Упр. Дизайном(CSS) и в самый низ вставляем:

Code
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  }
   
img {
  border: none;
  }
   
#menu {
  width: 200px;
  margin: 10px;
  }
   
#menu li a {
  height: 32px;
  voice-family: "\"}\"";  
  voice-family: inherit;
  height: 24px;
  text-decoration: none;
  }  
   
#menu li a:link, #menu li a:visited {
  color: #FFF;
  display: block;
  background: url(https://wallaby.ucoz.ru/demo/img/menu.gif);
  padding: 8px 0 0 35px;
  }
   
#menu li a:hover {
  color: #FFF;
  background: url(https://wallaby.ucoz.ru/demo/img/menu.gif) 0 -32px;
  padding: 8px 0 0 35px;
  }
#menu li span {
  position: absolute;
  left: 12em;
  margin-top: -1.4em;
  width: 10em;
  display: none;
  }
#menu li:hover span { display: block;}
#menu li span a { display: inline; }

 

Шаг-2 Установка HTML

Вставляем в нужное на сайте место, обычно это Глобальные блоки: Верхняя часть сайта.

 

Code
<div id="menu">
  <ul>
  <li><a href="https://wallaby.ucoz.ru">CSS Главная</a></li>
  <li><a href="#">CSS Меню</a>
  <span>  
  <a href="#">1Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>  
  </span>
  </li>
  <li><a href="#">CSS Меню</a>
  <span>  
  <a href="#">2Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>  
  </span>
  </li>
  <li><a href="#">CSS Меню</a>
  <span>  
  <a href="#">3Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>  
  </span>
  </li>
  <li><a href="#">CSS Меню</a>
  <span>  
  <a href="#">4Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>  
  </span>
  </li>
  <li><a href="#">CSS Меню</a>
  <span>  
  <a href="#">5Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>  
  </span>
  </li>
  <li><a href="#">CSS Меню</a>
  <span>  
  <a href="#">6Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>  
  </span>
  </li>
  </ul>
</div>
Категория Меню для ucoz | Добавил: Wallaby | Просмотров: 13186 |

Комментарии отсутствуют

по актуальности
Чтобы оставить комментарий, необходимо или