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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

Горизонтальное меню реализованное на css, подпункты открываются при наведении курсора......

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

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

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

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......

Раскрывающиеся горизонтальное меню на css и JQueryРаскрывающиеся горизонтальное меню ...

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

Оригинальное горизонтальное менюОригинальное горизонтальное меню

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

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

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

Социальная панель на css3Социальная панель на css3

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

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню на css...

Горизонтальное меню на css3 с замечательным эффектом....

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

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

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

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

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

Black and WhiteBlack and White

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

Кнопки для вашего сайта на css3Кнопки для вашего сайта на css3

Неплохие кнопки для вашего сайта на css3, кнопки разного цвета и размера (голубой, розовый, зелёный, оранжевый)....
  • Текущий 1.67/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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