Приветствую Вас Прохожий | RSS Суббота, 03.12.2016, 09:45
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 8
Гостей: 7
Пользователей: 1
LESIYI



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

Вертикальное мульти меню

Вертикальное мульти меню Вертикальное, мульти, меню
Такое меню может оказаться вполне удачным решением для дизайна сайта, при наличии огромного количества пунктов.Идея заключается в том, что получается очень длинный список ссылок, который не входит целиком в область видимости или отведенное для него место.А если перемещаться курсор мыши по его пунктам, то список будет сам прокручиваться и выводить невидимые элементы.

CSS

Code
* { margin: 0; padding: 0; }
body { font: 11px/1.4 Helvetica, Arial, Sans-Serif; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#page-wrap { width: 960px; margin: 80px auto; position: relative; }

#title { position: absolute; top: 100px; left: 0; z-index: 3; }

#menu { width: 400px; padding-left: 250px; overflow: auto; height: 360px; position: relative; z-index: 1; }
#menu:before { content: " "; position: absolute; top: 0; left: 0; height: 50px; width: 100%; z-index: 2; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,100)),color-stop(1, rgba(255,255,255,0))); }
#menu:after { content: " "; position: absolute; bottom: 0; left: 0; height: 50px; width: 100%; z-index: 2; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0)),color-stop(1, rgba(255,255,255,100))); }
#menu ul { list-style: none; }
#menu a { text-decoration: none; display: block; color: black; }
#mover { position: absolute; width: 100%; padding-top: 40px; height: 360px; }
#mover div { padding: 0 30px; }

#menu .hover { font-weight: bold; font-size: 18px; color: #FF8400; margin-left: -5px; }

HTML

Code
<!DOCTYPE html>
<html>

<head>
  <meta charset='UTF-8'>
   
  <title>Мульти меню</title>
   
  <link rel='stylesheet' href='css/style.css'>
   
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
  <script>
  // DOM готов
  $(function() {  
   
  $("#menu").css("overflow", "hidden").wrapInner("<div id='mover' />");
   
  var $el,
  speed = 13.5,
  cur = -1,
  items = $("#menu a"),
  max = items.length - 1;
   
  items
  .each(function(i) {
  $(this).attr("data-pos", i);
  })
  .hover(function() {
   
  $el = $(this);
  $el.addClass("hover");  
   
  $("#mover").css("top", -($el.data("pos") * speed - 40));
  // 40 - верхний отсутп для затухания
   
  cur = $el.data("pos");
   
  }, function() {
  $(this).removeClass("hover");
  });
   
  $(document).keydown(function(event) {
   
  cur = $(".hover").attr("data-pos");
   
  // Стрелка вниз
  if (event.keyCode == 40) {
   
  $("[data-pos=" + cur + "]").trigger("mouseleave");
  if (cur != max) { cur++; }
  $("[data-pos=" + cur + "]").trigger("mouseenter");
   
  }
   
  // Стрелка вверх
  if (event.keyCode == 38) {
   
  $("[data-pos=" + cur + "]").trigger("mouseleave");
  if (cur > 0) { cur--; }
  $("[data-pos=" + cur + "]").trigger("mouseenter");
   
  }
   
  });
   
  });
  </script>
</head>

<body>

  <div id="page-wrap">
   
  <div id="title">

  <h1>Мульти меню</h1>
  <p>Используйте мышь</p>
  <p>или клавиши ВВЕРХ и ВНИЗ. </p>
   
  </div>
   
  <div id="menu">
   
  <ul>
   
  <li><a href="#">Природа </a></li>
  <li><a href="#">Receivability </a></li>
  <li><a href="#">Alone time </a></li>
  <li><a href="#">Togetherness </a></li>
  <li><a href="#">Imperfection </a></li>
  <li><a href="#">Exercise </a></li>
  <li><a href="#">Rest </a></li>
  <li><a href="#">Бог </a></li>
  <li><a href="#">Thankfulness </a></li>
  <li><a href="#">Forgiveness </a></li>
  <li><a href="#">Inner peace </a></li>
  <li><a href="#">Тишина </a></li>
  <li><a href="#">Trust </a></li>
  <li><a href="#">Contentness </a></li>
  <li><a href="#">Sustainable visions </a></li>
  <li><a href="#">Reflection </a></li>
  <li><a href="#">Prayer+meditation </a></li>
  <li><a href="#">Compassion </a></li>
  <li><a href="#">Качество </a></li>
  <li><a href="#">Patience </a></li>
  <li><a href="#">Non-doing </a></li>
  <li><a href="#">Presence </a></li>
  <li><a href="#">Self-love </a></li>
  <li><a href="#">Non-judging </a></li>
  <li><a href="#">Non-comparing </a></li>
  <li><a href="#">Интимность </a></li>
  <li><a href="#">Inaccessibility </a></li>
  <li><a href="#">Letting go </a></li>
  <li><a href="#">Holistic thinking </a></li>
  <li><a href="#">Respecting boundaries </a></li>
  <li><a href="#">Wholeheartedness </a></li>
  <li><a href="#">Свобода </a></li>
  <li><a href="#">Openness </a></li>
  <li><a href="#">Courage to fail </a></li>
  <li><a href="#">Spiritual awareness </a></li>
  <li><a href="#">Unselfish motives </a></li>
  <li><a href="#">Authenticity </a></li>
  <li><a href="#">Good energy </a></li>
  <li><a href="#">Intuitive confidence </a></li>
  <li><a href="#">Emotional expression </a></li>
  <li><a href="#">Change coping </a></li>
  <li><a href="#">Body grounding </a></li>
  <li><a href="#">Courage to be me </a></li>
  <li><a href="#">Unconditional love </a></li>
  <li><a href="#">Effortlessness </a></li>
  <li><a href="#">Listening to my body </a></li>
  <li><a href="#">Cravings liberation </a></li>
  <li><a href="#">Courage to ask for help </a></li>
  <li><a href="#">Терпение </a></li>
  <li><a href="#">Courage to be honest </a></li>
  <li><a href="#">Self-esteem </a></li>
  <li><a href="#">Nonharming consumption </a></li>
  <li><a href="#">Happiness from within </a></li>
  <li><a href="#">Commercial free-space </a></li>
  <li><a href="#">Nontoxic food </a></li>
  <li><a href="#">Respect for others truth </a></li>
  <li><a href="#">Psychosomatic awareness </a></li>
  <li><a href="#">Life-enjoyment </a></li>
  <li><a href="#">Embracement </a></li>
  <li><a href="#">Чистый воздух </a></li>
  <li><a href="#">The loving choice </a></li>
  <li><a href="#">Letting be </a></li>
  <li><a href="#">Ups&downs </a></li>
  <li><a href="#">Shamelessness </a></li>
  <li><a href="#">No worries </a></li>
  <li><a href="#">Accept of powerlessness </a></li>
  <li><a href="#">Speaking for oneself </a></li>
  <li><a href="#">Creative expression </a></li>
  <li><a href="#">Environmental sensitivity </a></li>
  <li><a href="#">Chi </a></li>
  <li><a href="#">Soul-searching </a></li>
  <li><a href="#">Non-expecting </a></li>
  <li><a href="#">Well-being </a></li>
  <li><a href="#">Stores </a></li>
  <li><a href="#">Posters </a></li>
  <li><a href="#">About </a></li>
  <li><a href="#">Пресса </a></li>
  </ul>
  </div>
   
  </div>
   
</body>

</html>

DEMO

Автор\Источник: www.ruseller.com

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 1361 | Рейтинг: 3.0/2 | |Категория: Скрипты Разное | Добавил: Pauk | Дата: 06.01.2011 | Скачали: 0 | Теги: вертикальное, меню, мульти
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Куплю сайты с ТИЦ/PR (п...

9

2 Предлагаю услуги для ан...

0

3 Предлагаю услуги по про...

0

4 Комплексный прогон сайт...

51

5 Сайт онлайн фильмов на ...

1

6 Проблема с таблицей

9

7 Отредактировать фото

2

8 Уже все перепробовал )

1

9 Скрипт "Нравится&q...

3

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

3


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru