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

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

ОБСУЖДЕНИЕ

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

Функциональное вертикальное меню
Просмотров: 1692  Скачан: 189 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

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

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

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

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

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

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....

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

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

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

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

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню на css

Горизонтальное многоуровневое фиксированного меню в темном стиле...

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

Довольно интересная идея создать такую анимацию с кнопками. Когда вы наводите на кнопку курсор мыши, она начинает быстро вращаться, когда......

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery «Elas...

Красивая адаптивная карусель для вашего сайта, а если быть точнее, то это плагин «Elastislide», особенности такого плагина, заключаются в умении адапт...

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

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

Paris ClarkParis Clark

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

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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