background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

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

Вертикальное мульти меню
Просмотров: 1376  Скачан: 212 раз  Комментариев в теме: 0

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

Шаг 1 - создание разметки

 

HTML

<div id="page-wrap">
    <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>
        </ul>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" >

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(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>
Материалы по теме:

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

Слайд эффект с помощью JavaScriptСлайд эффект с помощью JavaScript

Эффект в виде слайда, реализован с помощью javascript...

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

Многоуровневое меню, работает оно довольно интересным образом, меню привязывается к......

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

Отличное вертикальное меню, хорошо подойдёт к блогу или информационному сайту......

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

Вертикальное меню с прокруткой на JQueryВертикальное меню с прокруткой на JQuery

Меню с прокруткой, реализованое с помощью jquery, главная особенность такого меню......

Фиксированое меню (вертикальное и горизонтальное)Фиксированое меню (вертикальное и горизо...

Неплохое фиксированное меню для вашего сайта, меню может быть горизонтальным и вертикальным......
Интересные публикации:

Фиксированная форма обратной связи на PHP и jQueryФиксированная форма обратной связи на PH...

Довольно простая форма обратной связи без капчи, проверки полей, сообщений об ошибке и всего прочего......

Горизонтальное мульти менюГоризонтальное мульти меню

Выпадающее мульти меню, как вариант вывода безграничного количества пунктов....

Сборка кнопок на cssСборка кнопок на css

Лёгкая подборка кнопок на css, в подборку вошли восемь разных кнопок созданных с помощью css....

Kenburner слайдерKenburner слайдер v1.1

Сочетание в слайдере красивого дизайна, анимации текста и различных эффектов, приятно выделяет его среди подобных плагинов....

Admin PanelAdmin Panel

Шаблон для панели администратора созданный на HTML5, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

Полноэкранное слайд-шоу с помощью JQuery плагинаПолноэкранное слайд-шоу с помощью JQuery...

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....
  • Текущий 1.38/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.4/5( Голосов 8 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить