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

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

ОБСУЖДЕНИЕ

Раскрывающиеся меню

Раскрывающиеся меню
Просмотров: 1414  Скачан: 243 раз  Комментариев в теме: 0

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

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

 

HTML

<div id="cc_menu" class="cc_menu">
    <div class="cc_item" style="z-index:5;">
        <img src="images/1.jpg" alt="image" />
        <span class="cc_title">Коллекция</span>
        <div class="cc_submenu">
            <ul>
                <li class="cc_content_1">Зима 2010</li>
                <li class="cc_content_2">Весна 2011</li>
            </ul>
        </div>
    </div>
    <div class="cc_item" style="z-index:4;">
        <img src="images/2.jpg" alt="image" />
        <span class="cc_title">Магазины</span>
        <div class="cc_submenu">
            <ul>
                <li class="cc_content_3">Милан</li>
                <li class="cc_content_4">Париж</li>
                <li class="cc_content_5">Нью Йорк</li>
                <li class="cc_content_6">Майями</li>
            </ul>
        </div>
    </div>
    <div class="cc_item" style="z-index:3;">
        <img src="images/3.jpg" alt="image" />
        <span class="cc_title">О нас</span>
        <div class="cc_submenu">
            <ul>
                <li class="cc_content_7">Наша команда</li>
                <li class="cc_content_8">Наша философия</li>
            </ul>
        </div>
    </div>
    <div class="cc_item" style="z-index:2;">
        <img src="images/4.jpg" alt="image" />
        <span class="cc_title">События</span>
        <div class="cc_submenu">
            <ul>
                <li class="cc_content_9">Bacardi Summer Party</li>
                <li class="cc_content_10">Lonestyle Auction</li>
            </ul>
        </div>
    </div>
    <div class="cc_item" style="z-index:1;">
        <img src="images/5.jpg" alt="image" />
        <span class="cc_title">Контакты</span>
        <div class="cc_submenu">
            <ul>
                <li class="cc_content_11">Заказать</li>
                <li class="cc_content_12">Получать новости</li>
            </ul>
        </div>
    </div>
    <div id="cc_content" class="cc_content">
        <span id="cc_back" class="cc_back"><< К меню</span>
        <div class="cc_content_1">
            <h1>Зима 2010</h1>
            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
        </div>
        <div class="cc_content_2">
            <h1>Весна 2011</h1>
            <p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
        </div>
        <div class="cc_content_3">
            <h1>Милан</h1>
            <p>She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek</p>
        </div>
        <div class="cc_content_4">
            <h1>Париж</h1>
            <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. </p>
        </div>
        <div class="cc_content_5">
            <h1>Нью Йорк</h1>
            <p>It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.</p>
        </div>
        <div class="cc_content_6">
            <h1>Майями</h1>
            <p>It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.</p>
        </div>
        <div class="cc_content_7">
            <h1>Наша команда</h1>
            <p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.</p>
        </div>
        <div class="cc_content_8">
            <h1>Наша философия</h1>
            <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
        </div>
        <div class="cc_content_9">
            <h1>Bacardi Summer Party</h1>
            <p>I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth</p>
        </div>
        <div class="cc_content_10">
            <h1>Lonestyle Auction</h1>
            <p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire</p>
        </div>
        <div class="cc_content_11">
            <h1>Заказать</h1>
            <p>Зимняя коллекция</p>
        </div>
        <div class="cc_content_12">
            <h1>Получать новости</h1>
            <p>Зимняя коллекция</p>
        </div>
    </div>
</div>

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

 

CSS

<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/cufon-yui.js"></script>
<script type="text/javascript" src="js/Segoe_Script_400-Segoe_Script_700.font.js"></script>
<script type="text/javascript">
$(function() {
    //Все пунткы меню
    var $items = $('#cc_menu .cc_item');
    //количество пунктов меню
    var cnt_items= $items.length;
    //Если меню выступает за складки - true 
    var folded= false;
    //Таймаут события mouseenter на пункте меню
    var menu_time;
    /**
    привязываем mouseenter и mouseleave к каждому пункту меню:
    - показать / скрыть изображение и подменю
    привязываем событие click к списку элементов (подменю):
    - скрываем все пункты за исключением того, на котором была нажата кнопка мыши
    и показываем контент для пункта
    */
    $items.unbind('mouseenter')
            .bind('mouseenter',m_enter)
            .unbind('mouseleave')
            .bind('mouseleave',m_leave)
            .find('.cc_submenu > ul > li')
            .bind('click',function(){
        var $li_e = $(this);
        //Есди меню уже свернуто
        //просто заменяем контент
        if(folded){
            hideContent();
            showContent($li_e.attr('class'));
        }
        else //сворачиваем и показываем контент
            fold($li_e);
        });
        /**
        Функция обработки события mouseenter для пунтка меню
        таймаут используется для предотвращения генерации данного события
        если пользователь перемещает курсор мыши с разумной скоростью 
        над пунктами меню
        */
        function m_enter(){
            var $this = $(this);
            clearTimeout(menu_time);
            menu_time = setTimeout(function(){
            //img
            $this.find('img').stop().animate({'top':'0px'},400);
            //cc_submenu ul
            $this.find('.cc_submenu > ul').stop().animate({'height':'200px'},400);
            },200);
        }
        //Функция обработки события mouseleave для пунтка меню
        function m_leave(){
            var $this = $(this);
            clearTimeout(menu_time);
            //img
            $this.find('img').stop().animate({'top':'-600px'},400);
            //cc_submenu ul
            $this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400);
        }
        //Назад к кнопке меню - развернуть меню
        $('#cc_back').bind('click',unfold);
        /**
        скрываем все пункты меню кроме того, на котором была нажата кнопка мыши,
        после чего выводим контент
        */
        function fold($li_e){
            var $item= $li_e.closest('.cc_item');
            var d = 100;
            var step = 0;
            $items.unbind('mouseenter mouseleave');
            $items.not($item).each(function(){
                var $item = $(this);
                $item.stop().animate({
                    'marginLeft':'-140px'
                },d += 200,function(){
                    ++step;
                    if(step == cnt_items-1){
                        folded = true;
                        showContent($li_e.attr('class'));
                    }
                });
            });
        }
        /**
        показываем все пункты меню
        также скрываем любые изображения меню / подпунткы,
        которые могли видимы
        */
        function unfold(){
            $('#cc_content').stop().animate({'left':'-700px'},600,function(){
                var d = 100;
                var step = 0;
                $items.each(function(){
                     var $item = $(this);
                    $item.find('img')
                        .stop()
                        .animate({'top':'-600px'},200)
                        .andSelf()
                        .find('.cc_submenu > ul')
                        .stop()
                        .animate({'height':'0px'},200);
                    $item.stop().animate({
                    'marginLeft':'0px'
                    },d += 200,function(){
                        ++step;
                        if(step == cnt_items-1){
                            folded = false;
                            $items.unbind('mouseenter')
                                .bind('mouseenter',m_enter)
                                .unbind('mouseleave')
                                .bind('mouseleave',m_leave);
                            hideContent();
                        }  
                    });
                });
            });
        }
        //Функция для вывода контента
        function showContent(idx){
            $('#cc_content').stop().animate({'left':'140px'},200,function(){
                $(this).find('.'+idx).fadeIn();
            });
        }
        //Функция для скрытия контента
        function hideContent(){
            $('#cc_content').find('div').hide();
        }
    });
</script>
Материалы по теме:

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......

Вертикальное разноцветное меню на css3Вертикальное разноцветное меню на css3

Вертикальное меню в разноцветном стиле, полностью на css3, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......

Вертикальное мульти менюВертикальное мульти меню

Вертикальное мульти-меню неплохое решение если вам нужно вывести на сайте огромного количества пунктов......

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

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

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

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

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.
Интересные публикации:

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

Довольно простой слайдер с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо наворотов (дополнительных панелей, кнопок и т.д)...

Кнопка с анимацией на css3Кнопка с анимацией на css3

Красивая анимационная кнопка на css3, при наведении курсора на кнопку, с левой стороны......

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

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

Круговой слайдерКруговой слайдер css3

Если вы хотите эффектно представить какой либо продукт на своём сайте, но не знаете как это можно сделать. В таком случае представляю красивый слайдер...

Социальные кнопки на CSSСоциальные кнопки на CSS

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

Радиоактивные кнопкиРадиоактивные кнопки

Красивые кнопки с эффектом радиации. Так, как на данный момент не все браузеры поддерживают свойство webkit, то такой эффект будет работать только......
  • Текущий 1.30/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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