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

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

ОБСУЖДЕНИЕ

Функциональное вертикальное меню

Функциональное вертикальное меню
Просмотров: 1768  Скачан: 201 раз  Комментариев в теме: 0

Красивое вертикальное меню на css и jquery, хорошо подойдёт для блога или сайта. Меню создано с элементами слайдера, изначально имеются такие категории как избранное, последние комментарии, новости и другие. Меню хорошо работает во всех браузерах включая IE.

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

 

HTML

<div class="box">
    <ul id="tabMenu">
        <li class="posts selected"></li>
        <li class="comments"></li>
        <li class="category"></li>
        <li class="famous"></li>
        <li class="random"></li>
    </ul>
    <div class="boxTop"></div>
    <div class="boxBody"> 
        <div id="posts" class="show parent">
            <ul>
                <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
                <li>Simple JQuery Modal Window Tutorial.</li>
                <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
                <li>Exclusive RSS Icons from Queness.</li>
                <li>50 Monochromatic Website Designs.</li>
                <li>Food Plates and Creative Dishware Designs.</li>
                <li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
                <li class="last">New Smashing Freebies For Designers and Bloggers.</li>
            </ul>  
        </div>   
        <div id="comments" class="parent">
            <ul>
                <li><a>jQuery Tabbed Navigation Menu. <span> - kevin</span></a></li>
                <li><a>You can add links in here! <span> - kevin</span></a></li>
                <li><a>It's easy to understand. Though it's not the best, but hell yeah it works. <span> - kevin</span></a></li>
                <li><a>I hope you will like it. <span> - kevin</span></a></li>
                <li><a>My next tutorial will be jQuery-based Accordion. <span> - kevin</span></a></li>
                <li class="last"><a>And, I'm working on a free wordpress template as well : ) <span> - kevin</span></a></li>
            </ul>
        </div>  
        <div id="category" class="parent">
            <ul>
                <li><a href="#">ajax</a></li>
                <li><a href="#">css-html</a></li>
                <li><a href="#">freebies</a></li>
                <li><a href="#">icon</a></li>
                <li><a href="#">inspiration</a></li>
                <li><a href="#">javascript</a></li>
                <li><a href="#">logo</a></li>
                <li><a href="#">photography</a></li>
                <li><a href="#">photoshop</a></li>
                <li><a href="#">php</a></li>
                <li><a href="#">seo</a></li>
                <li><a href="#">tutorial</a></li>
                <li><a href="#">usability</a></li>
                <li><a href="#">wallpaper</a></li>
                <li class="last"><a href="#">wordpress</a></li>
            </ul>  
        </div> 
        <div id="famous" class="parent">
            <ul>
                <li>Simple JQuery Modal Window Tutorial.</li>
                <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
                <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
                <li class="last">Exclusive RSS Icons from Queness.</li>
            </ul>  
        </div>
        <div id="random" class="parent">
            <ul>
                <li>50 Monochromatic Website Designs.</li>
                <li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
                <li>Simple JQuery Modal Window Tutorial.</li>
                <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
                <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
                <li>Exclusive RSS Icons from Queness.</li>
                <li>New Smashing Freebies For Designers and Bloggers.</li>
                <li class="last">Food Plates and Creative Dishware Designs.</li>
            </ul>    
        </div>        
    </div>
    <div class="boxBottom"></div>
</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">
$(document).ready(function() {
    $('#tabMenu li').click(function(){
        if (!$(this).hasClass('selected')) {     
        $('#tabMenu li').removeClass('selected');
        $(this).addClass('selected');
        $('.boxBody div.parent').slideUp('1500');
        $('.boxBody div.parent:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');    
    }    
    }).mouseover(function() {
        $(this).addClass('mouseover');
        $(this).removeClass('mouseout');       
    }).mouseout(function() {
        $(this).addClass('mouseout');
        $(this).removeClass('mouseover');       
    });
    $('.boxBody #category li').click(function(){
        window.location = $(this).children().attr('href');
    }).mouseover(function() {
        $(this).css('backgroundColor','#888');
        $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
    }).mouseout(function() {
        $(this).css('backgroundColor','');
        $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
    });  
    $('#.boxBody li').click(function(){
        window.location = $(this).children().attr('href');
    }).mouseover(function() {
        $(this).css('backgroundColor','#888');
    }).mouseout(function() {
        $(this).css('backgroundColor','');
    });  
});
</script>
Материалы по теме:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ConsultingConsulting

Красивый html шаблон с прекрасной графикой, иконками и меню, хорошо подойдёт для бизнес проекта, в шаблоне имеется необычный слайдер......

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

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

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном на c...

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

Mazaya v1.0Mazaya v1.0

Mazaya - это современная универсальная новостная тема с оригинальным дизайном и предусмотренным тёмным и светлым стилем....

Web HostingWeb Hosting

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

TanyaCMS 1.0TanyaCMS 1.0

TanyaCMS - это довольно не плохой скрипт вопросов - ответов, скрипт отвечает всем современным требованиям....

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

Стильное вертикальное меню аккордеон.
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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