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

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

ОБСУЖДЕНИЕ

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

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

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

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

Горизонтальное анимированое меню с помощью JQueryГоризонтальное анимированое меню с ...

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

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

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

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

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

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

Неплохое горизонтальное меню с выдвигающимися иконками. Когда вы переходите по навигации, иконки......

Выпадающее меню на css3Выпадающее меню на css3

Красивое выпадающее меню с применением иконического шрифта, меню полностью на css3......

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

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

Сборка кнопок на cssСборка кнопок на css

Лёгкая подборка кнопок на css, в подборку вошли восемь разных кнопок созданных с помощью css....

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

Социальные иконки на css3Социальные иконки на css3

Социальные иконки на css3, при наведении курсора на иконку, она делается полупрозрачной....

Sooshal v2.4Sooshal v2.4

Sooshal - это первая в режиме реального времени, социальная и не социальная медиа поисковая система, которая использует новейшие данные с помощью 10 р...

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

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

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на css3

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин «bxSlider», плагин постоянно усовершенствуется......
  • Текущий 1.67/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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