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

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

ОБСУЖДЕНИЕ

Раскрывающиеся меню для сайта

Раскрывающиеся горизонтальное меню на css и JQuery
Просмотров: 1317  Скачан: 207 раз  Комментариев в теме: 0

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа. В меню реализован прекрасный эффект раскрытия, когда вы наводите курсор мыши на категорию меню, происходит красивый эффект, заглавный текст плавно уходит вниз, за тем происходит раскрытие подменю, весь этот процесс сопровождается появлением изображения. Также стоит отметить один интересный момент, это правильное реагирование на раскрытие подменю, то есть, если категория меню имеет подменю, оно будет раскрываться с правой стороны, а если категория является последней в меню, то раскрытие подменю будет происходит с левой стороны. Это предотвратит развал дизайна.

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

 

HTML

<div class="container">
    <ul id="sdt_menu" class="sdt_menu">
        <li>
            <a href="#">
                <img src="images/2.jpg" alt=""/>
                <span class="sdt_active"></span>
                <span class="sdt_wrap">
                    <span class="sdt_link">Обо мне</span>
                    <span class="sdt_descr">Интересные факты</span>
                </span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/1.jpg" alt=""/>
                <span class="sdt_active"></span>
                <span class="sdt_wrap">
                    <span class="sdt_link">Портфолио</span>
                    <span class="sdt_descr">Мои работы</span>
                </span>
            </a>
            <div class="sdt_box">
                <a href="#">Веб сайты</a>
                <a href="#">Иллюстрации</a>
                <a href="#">Фотографии</a>
            </div>
        </li>
        <li>
            <a href="#">
                <img src="images/3.jpg" alt=""/>
                <span class="sdt_active"></span>
                <span class="sdt_wrap">
                    <span class="sdt_link">Вдохновение</span>
                    <span class="sdt_descr">Откуда приходят идеи</span>
                </span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/4.jpg" alt=""/>
                <span class="sdt_active"></span>
                <span class="sdt_wrap">
                    <span class="sdt_link">Фотографии</span>
                    <span class="sdt_descr">Мне нравится фотографировать</span>
                </span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/5.jpg" alt=""/>
                <span class="sdt_active"></span>
                <span class="sdt_wrap">
                    <span class="sdt_link">Блог</span>
                    <span class="sdt_descr">Я пишу о дизайне</span>
                </span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/6.jpg" alt=""/>
                <span class="sdt_active"></span>
                <span class="sdt_wrap">
                    <span class="sdt_link">Проекты</span>
                    <span class="sdt_descr">Люблю программировать</span>
                </span>
            </a>
            <div class="sdt_box">
                <a href="#">Веб сайт для предложений о работе</a>
                <a href="#">Корзина с покупками</a>
                <a href="#">Интерактивные карты</a>
            </div>
        </li>
    </ul>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-2.0.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
    /**
    * Для каждого элемента меню при получении события mouseenter 
    * мы увеличиваем изображение и выводим оба элемента span sdt_active и  
    * sdt_wrap. Если элемент имеет подменю (sdt_box),
    * то его надо плавно выдвинуть - если элемент является последним в меню,
    * то выдвижение происходит влево, в другом случае - вправо.
    */
    $('#sdt_menu > li').bind('mouseenter',function(){
        var $elem = $(this);
        $elem.find('img')
        .stop(true)
        .animate({
            'width':'190px',
            'height':'190px',
            'left':'0px'
        },400,'easeOutBack')
        .andSelf()
        .find('.sdt_wrap')
        .stop(true)
        .animate({'top':'140px'},500,'easeOutBack')
        .andSelf()
        .find('.sdt_active')
        .stop(true)
        .animate({'height':'190px'},300,function(){
            var $sub_menu = $elem.find('.sdt_box');
            if($sub_menu.length){
                var left = '190px';
                if($elem.parent().children().length == $elem.index()+1)
                left = '-190px';
                $sub_menu.show().animate({'left':left},200);
            }
        });
    }).bind('mouseleave',function(){
        var $elem = $(this);
        var $sub_menu = $elem.find('.sdt_box');
        if($sub_menu.length)
        $sub_menu.hide().css('left','0px');
        $elem.find('.sdt_active')
        .stop(true)
        .animate({'height':'0px'},300)
        .andSelf().find('img')
        .stop(true)
        .animate({
            'width':'0px',
            'height':'0px',
            'left':'85px'
        },400)
        .andSelf()
        .find('.sdt_wrap')
        .stop(true)
        .animate({'top':'25px'},500);
    });
});
</script>
Материалы по теме:

Фиксированная панель с навигацией на css3Фиксированная панель с навигацией н...

Панель фиксируется внизу страницы и имеет не большую навигацию, что очень удобно если вам нужно вывести какие то важные ссылки или информацию....

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся мен...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

Многоуровневое горизонтальное меню на css3Многоуровневое горизонтальное меню ...

Отличное горизонтальное выпадающее многоуровневое меню на css3....

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на c...

Выпадающее меню в темном стиле, реализованное полностью на css...

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Bo...

Меню в виде куба с красивым эффектом трансформации....

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Me...

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......

Горизонтальное меню с меняющимся фономГоризонтальное меню с меняющимся фо...

Красивое меню, с меняющимся фоном, когда вы переходите по категориям, фон автоматически......
Интересные публикации:

Jquery меню горизонтальноеJquery меню горизонтальное с анимированн...

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся меню «Sc...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

CharismaCharisma

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

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

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

Набор плоских форм «Formicon Flat Forms Pack»Набор плоских форм «Formicon Flat Forms ...

Formicon Flat Forms Pack - это набор плоских форм, построенных на Bootstrap 3.0. Набор содержит в себе различные формы и все они имеют разные стили...

TanyaCMS 1.0TanyaCMS 1.0

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

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

Красивая форма обратной связи для вашего сайта на php, ajax и js. Форма может похвастаться капчей, проверкой полей формы на валидность и сообщениях об...
  • Текущий 1.75/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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