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

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

ОБСУЖДЕНИЕ

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

Функциональное вертикальное меню
Просмотров: 1852  Скачан: 208 раз  Комментариев в теме: 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 (Аккордеон)Вертикальное меню на css (Аккордеон)

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

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

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

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

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

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

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

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

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

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

Стильное вертикальное меню аккордеон.
Интересные публикации:

FolderFolder

Универсальный html шаблон Folder, на главной странице располагается слайдер с миниатюрами и комментариями к изображению, есть галерея......

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

Картинки расположены в ряд по сетке с наложенным на них затемнением, при наведении курсора на картинку, затемнение......

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

Неплохая социальная панель, при наведении курсора мыши, панель, плавно раскрывается, за тем уже видны сами иконки....

Kenburner слайдерKenburner слайдер v1.1

Сочетание в слайдере красивого дизайна, анимации текста и различных эффектов, приятно выделяет его среди подобных плагинов....

Кнопки с градиентом на css3Кнопки с градиентом на css3

Кнопки с градиентом, такие кнопки можно встретить довольно часто......

Галерея на PHP и JqueryГалерея на PHP и Jquery

Галерея на php и jquery. PHP даёт некие привилегии перед обычным html кодом, например вам как правило приходиться...

Горизонтальное меню на jQuery «Slick Menu»Горизонтальное меню на jQuery «Slick Men...

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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