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

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

ОБСУЖДЕНИЕ

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

Вертикальное меню с прокруткой на JQuery
Просмотров: 2919  Скачан: 304 раз  Комментариев в теме: 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>
Материалы по теме:

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

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......

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

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

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

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

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

Красивое вертикальное меню, реализованное с помощью JavaScript...

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

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

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

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

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

Вертикальное меню на css3 с применением иконических шрифтов......
Интересные публикации:

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Infinite...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

Шаблон Desire Night ClubШаблон Desire Night Club

HTML шаблон ночного клуба, на главной странице располагается привлекательный слайдер, есть галерея, видео проигрыватель, заготовлена контактная форма ...

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

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

Valenti v1.1.8Valenti v1.1.8

Многофункциональная журнальная тема с полной адаптивной вёрсткой для WordPress....

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

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

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......
  • Текущий 1.11/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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