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

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

ОБСУЖДЕНИЕ

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

Вертикальное меню с прокруткой на JQuery
Просмотров: 2395  Скачан: 274 раз  Комментариев в теме: 0

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

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

 

HTML

<div id="sidebar">
    <ul id="menu">
        <li><a href="#">MENU 1 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE 2 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE LONG 3 <span> / 2007</span></a></li>
        <li><a href="#">MENU 4 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE 5 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE LONG 6 <span> / 2007</span></a></li>
        <li><a href="#">MENU 7 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE 8 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE LONG 9 <span> / 2007</span></a></li>
        <li><a href="#">MENU 10 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE 11 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE LONG 12 <span> / 2007</span></a></li>
        <li><a href="#">MENU 13 <span> / 2007</span></a></li>
        <li><a href="#">SUPER LONG MENU MENU MENU MENU SIZE 14 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE LONG 15 <span> / 2007</span></a></li>
        <li><a href="#">MENU 16 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE 17 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE LONG 18 <span> / 2007</span></a></li>
        <li><a href="#">MENU 19 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE 20 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE LONG 21 <span> / 2007</span></a></li>
        <li><a href="#">MENU 22 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE 5 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE LONG 23 <span> / 2007</span></a></li>
        <li><a href="#">MENU 24 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE 25 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE LONG 26 <span> / 2007</span></a></li>
        <li><a href="#">MENU 27 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE 28 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE LONG 29 <span> / 2007</span></a></li>
        <li><a href="#">MENU 30 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE 31 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE LONG 32 <span> / 2007</span></a></li>
        <li><a href="#">MENU 33 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE 34 <span> / 2007</span></a></li>
        <li><a href="#">MENU SIZE LONG 35 <span> / 2007</span></a></li>
    </ul>
</div>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    //Background color, mouseover and mouseout
    var colorOver = '#31b8da';
    var colorOut = '#1f1f1f';
    //Padding, mouseover
    var padLeft = '20px';
    var padRight = '20px';
    //Default Padding
    var defpadLeft = $('#menu li a').css('paddingLeft');
    var defpadRight = $('#menu li a').css('paddingRight');
    //Animate the LI on mouse over, mouse out
    $('#menu li').click(function () {
        //Make LI clickable
        window.location = $(this).find('a').attr('href');
    }).mouseover(function (){
        //mouse over LI and look for A element for transition
        $(this).find('a')
        .animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )
        .animate( { backgroundColor: colorOver }, { queue:false, duration:200 });
    }).mouseout(function () {
        //mouse oout LI and look for A element and discard the mouse over transition
        $(this).find('a')
        .animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
        .animate( { backgroundColor: colorOut }, { queue:false, duration:200 });
    });
    //Scroll the menu on mouse move above the #sidebar layer
    $('#sidebar').mousemove(function(e) {
        //Sidebar Offset, Top value
        var s_top = parseInt($('#sidebar').offset().top);
        //Sidebar Offset, Bottom value
        var s_bottom = parseInt($('#sidebar').height() + s_top);
        //Roughly calculate the height of the menu by multiply height of a single LI with the total of LIs
        var mheight = parseInt($('#menu li').height() * $('#menu li').length);
        //I used this coordinate and offset values for debuggin
        $('#debugging_mouse_axis').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
        $('#debugging_status').html(Math.round(((s_top - e.pageY)/100) * mheight / 2));
        //Calculate the top value
        //This equation is not the perfect, but it 's very close
        var top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);
        //Animate the #menu by chaging the top value
        $('#menu').animate({top: top_value}, { queue:false, duration:500});
    });
});
</script>
Материалы по теме:

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

Вертикальное мульти-меню неплохое решение если вам нужно вывести на сайте огромного количества пунктов......

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

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

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

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

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

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

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......

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

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

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

Стильное вертикальное меню аккордеон.
Интересные публикации:

Горизонтальное анимированое меню с помощью JQueryГоризонтальное анимированое меню с помощ...

Красивое горизонтальное меню, используется изображения и анимация текста....

Sooshal v2.4Sooshal v2.4

Sooshal - это первая в режиме реального времени, социальная и не социальная медиа поисковая система, которая использует новейшие данные с помощью 10 р...

ClockerClocker

Универсальный html шаблон Clocker, на главной странице располагается слайдер, есть портфолио, выпадающее меню, заготовка контактной формы......

Галерея на PHP и JqueryГалерея на PHP и Jquery

Галерея на php и jquery. PHP даёт некие привилегии перед обычным html кодом, например вам как правило приходиться...

12 кнопок с анимацией на css312 кнопок с анимацией на css3

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi-Item...

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

Социальные иконки на css3Социальные иконки на css3

Социальные иконки на css3, при наведении курсора на иконку, она делается полупрозрачной....
  • Текущий 1.14/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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