RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Раскрывающиеся горизонтальное меню на css и JQuery
Просмотров: 1431  Скачан: 225 раз  Комментариев в теме: 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 «Menu Kwicks»Горизонтальное меню на jQuery «Menu...

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

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

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

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

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

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

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

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

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

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

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

Вкладки контента css3Вкладки контента css3

Красивые вкладки контента реализованные с помощью css3...

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

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

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilyslider...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

Красивые кнопки на css3Красивые кнопки на css3

Оригинальные кнопки на css3, вам дано на выбор несколько кнопок, каждая по своему привлекательна, без сомнения посетители вашего сайта не останутся ра...

3D Контактная форма на css33D Контактная форма на css3

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

Оригинальная анимационная контактная формаОригинальная анимационная контактная фор...

Оригинальная анимационная контактная форма, в довольно привлекательном стиле. Форма представлена в виде открытого конверта, при наведении курсора мыши...

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery «Elas...

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

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

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

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


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