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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

Креативное вертикальное меню на css3 и JQuery

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

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

Exterior DesignExterior Design

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

Mercina v3.4Mercina v3.4

Mercina - это современный шаблон для wordpress разработан специально для сайтов портфолио с многоцелевой тематикой....

Скрипт почтовой рассылки писем SendMailСкрипт почтовой рассылки писем

SendMail - это инструмент для организации рассылки почтовых сообщений с вашего сайта любой информации и включает в себя всё то, что нужно email-маркет...

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

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

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

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

Web HostingWeb Hosting

Современный html шаблон хостинг провайдера с готовым набором нужных страниц, имеется таблица тарифных планов, контактная форма....
  • Текущий 1.11/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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