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

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

ОБСУЖДЕНИЕ

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

Функциональное вертикальное меню
Просмотров: 1590  Скачан: 179 раз  Комментариев в теме: 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...

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

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

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

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

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

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

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

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

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

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Infinite...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

PHP скрипт комментариевСкрипт комментариев

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....

Good Inc v1.2.1Good Inc v1.2.1

Стильный журнальный шаблон для WordPress в светлом минималистском стиле....

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

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

Текстовый слайдерТекстовый слайдер

Простой текстовый слайдер с прокруткой влево, вправо, не плохо подойдёт для вывода кратких новостей. Имеется три вида слайдера...

Форма обратной связи на PHP, AJAX, JSФорма обратной связи на PHP, AJAX, JS

Красивая форма обратной связи для вашего сайта на php, ajax и js. Форма может похвастаться капчей, проверкой полей формы на валидность и сообщениях об...

ZeniZeni

Красивый шаблон построенный на html5 для блога или портфолио, на главной странице расположен привлекательный слайдер......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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