RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery
Интересные публикации:

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

Красивая анимационная кнопка на css3, при наведении курсора на кнопку, с левой стороны......

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jquery

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

GameleonGameleon

Gameleon – это отличная тема для создания игрового портала. Большой набор функций и гибкие настройки делают её очень удобной в использовании....

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

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

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на css3

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Menu»

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......
  • Текущий 1.11/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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