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

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

ОБСУЖДЕНИЕ

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

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

Вертикальное разноцветное меню на css3Вертикальное разноцветное меню на css3

Вертикальное меню в разноцветном стиле, полностью на css3, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....

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

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

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

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

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

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

Прозрачный аккордеон с помощью css и jqueryПрозрачный аккордеон с помощью css и jqu...

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......

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

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

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......
Интересные публикации:

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

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

Обратная связь на PHP и JQuery «LightForm»Обратная связь на PHP и JQuery «LightFor...

Стильная обратная связь ( LightForm) на PHP, Ajax и JQuery. Форма использует FormCheck2 для проверки полей , NiceForms для стилей текстовых полей и.....

DeTube v1.3DeTube v1.3

DeTube - отличная wordpress тема для тех кто хочет сделать видео-портал, блог или журнал видео новостей....

Чекбокс на css3Чекбокс на css3

Чекбокс имитирующий реалистично кнопку включения, идея в принципе неплохая, но......

Кнопка с ценником на css3Кнопка с ценником на css3

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......

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

Красивая анимационная кнопка на css3, при наведении курсора на кнопку, с левой стороны......
  • Текущий 1.10/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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