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

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

ОБСУЖДЕНИЕ

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

Раскрывающиеся горизонтальное меню на css и JQuery
Просмотров: 1639  Скачан: 242 раз  Комментариев в теме: 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>
Материалы по теме:

Горизонтальное меню в стиле AppleГоризонтальное меню в стиле Apple

Меню в стиле Apple, созданное полностью на css3.

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

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......

Горизонтальное мульти менюГоризонтальное мульти меню

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

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

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

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

Меню с выпадающими пунктами на css

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

Стильное горизонтальное меню с выдвижными иконками

Горизонтальное меню с ползункомГоризонтальное меню с ползунком

Стильное горизонтальное меню с ползунком, который следует за курсором мыши....
Интересные публикации:

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

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

Black and WhiteBlack and White

Black and White - современная премиум тема для wordpress в стиле минимализм и мощным функционалом....

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

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

Фиксированная форма обратной связи «Contactable 1.5»Фиксированная форма обратной связи «Cont...

Стильная форма обратной связи, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на...

Super Changer v2.1Super Changer v2.1

SuperChanger - это адаптивный журнальный шаблон для wordpress. Основным преимуществом шаблона является разнообразие цветовых стилей оформления......

ElliotElliot

Неплохой html шаблон.сделанный с уклоном на вывод изображения, имеется два стиля (светлый и тёмный), на главной странице расположена карусель......

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

Меню с выпадающими пунктами на css
  • Текущий 1.67/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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