Домой / Для сайта / Горизонтальное выпадающее меню
Горизонтальное выпадающее меню

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

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

Это большое горизонтальное выпадающее меню показывает подменю, которое открывается после щелчка по элементу меню. Вдохновение пришло от меню на Microsoft.com.

Некоторые примеры отзывчивых запросов показывают как настроить меню для небольших экранов.

Демо Исходники

HTML

<nav id="cbp-hrmenu" class="cbp-hrmenu">
    <ul>
        <li>
            <a href="#">Products</a>
            <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner">
                    <div>
                        <h4>Learning & Games</h4>
                        <ul>
                            <li><a href="#">Catch the Bullet</a></li>
                            <li><a href="#">Snoopydoo</a></li>
                            <!-- ... -->
                        </ul>
                    </div>
                    <div>
                        <h4>Utilities</h4>
                        <ul>
                            <li><a href="#">Gadget Finder</a></li>
                            <li><a href="#">Green Tree Express</a></li>
                            <li><a href="#">Green Tree Pro</a></li>
                            <li><a href="#">Wobbler 3.0</a></li>
                            <li><a href="#">Coolkid</a></li>
                        </ul>
                    </div>
                    <div>
                        <!-- ... -->
                    </div>
                </div><!-- /cbp-hrsub-inner -->
            </div><!-- /cbp-hrsub -->
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</nav>

CSS

.cbp-hrmenu {
 width: 100%;
 margin-top: 2em;
 border-bottom: 4px solid #47a3da;
}

/* general ul style */
.cbp-hrmenu ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
 width: 90%;
 max-width: 70em;
 margin: 0 auto;
 padding: 0 1.875em;
}

.cbp-hrmenu > ul > li {
 display: inline-block;
}

.cbp-hrmenu > ul > li > a {
 font-weight: 700;
 padding: 1em 2em;
 color: #999;
 display: inline-block;
}

.cbp-hrmenu > ul > li > a:hover {
 color: #47a3da;
}

.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
 color: #fff;
 background: #47a3da;
}

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
 display: none;
 position: absolute;
 background: #47a3da;
 width: 100%;
 left: 0;
}

.cbp-hropen .cbp-hrsub {
 display: block;
 padding-bottom: 3em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
 width: 33%;
 float: left;
 padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
 content: " ";
 display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
 clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
 line-height: 2em;
}

.cbp-hrsub h4 {
 color: #afdefa;
 padding: 2em 0 0.6em;
 margin: 0;
 font-size: 160%;
 font-weight: 300;
}

/* Examples for media queries */

@media screen and (max-width: 52.75em) { 

 .cbp-hrmenu {
 font-size: 80%;
 }

}

@media screen and (max-width: 43em) { 

 .cbp-hrmenu {
 font-size: 120%;
 border: none;
 }

 .cbp-hrmenu > ul,
 .cbp-hrmenu .cbp-hrsub-inner {
 width: 100%;
 padding: 0;
 }

 .cbp-hrmenu .cbp-hrsub-inner {
 padding: 0 2em;
 font-size: 75%;
 }

 .cbp-hrmenu > ul > li {
 display: block;
 border-bottom: 4px solid #47a3da;
 }

 .cbp-hrmenu > ul > li > a {
 display: block;
 padding: 1em 3em;
 }

 .cbp-hrmenu .cbp-hrsub {
 position: relative;
 }

 .cbp-hrsub h4 {
 padding-top: 0.6em;
 }

}

@media screen and (max-width: 36em) {
 .cbp-hrmenu .cbp-hrsub-inner > div {
 width: 100%;
 float: none;
 padding: 0 2em;
 }
}

JavaScript

var cbpHorizontalMenu = (function() {
 
    var $listItems = $( '#cbp-hrmenu > ul > li' ),
        $menuItems = $listItems.children( 'a' ),
        $body = $( 'body' ),
        current = -1;
 
    function init() {
        $menuItems.on( 'click', open );
        $listItems.on( 'click', function( event ) { event.stopPropagation(); } );
    }
 
    function open( event ) {
 
        if( current !== -1 ) {
            $listItems.eq( current ).removeClass( 'cbp-hropen' );
        }
 
        var $item = $( event.currentTarget ).parent( 'li' ),
            idx = $item.index();
 
        if( current === idx ) {
            $item.removeClass( 'cbp-hropen' );
            current = -1;
        }
        else {
            $item.addClass( 'cbp-hropen' );
            current = idx;
            $body.off( 'click' ).on( 'click', close );
        }
 
        return false;
 
    }
 
    function close( event ) {
        $listItems.eq( current ).removeClass( 'cbp-hropen' );
        current = -1;
    }
 
    return { init : init };
 
})();

Источник урока: http://tympanus.net/codrops/2013/03/05/horizontal-drop-down-menu

Перевел для сайта wordpress-club.com: Александр Овчаренко


Отзывчивое горизонтальное выпадающее меню как на Microsoft.com. Это большое горизонтальное выпадающее меню показывает подменю, которое открывается после щелчка по элементу меню. Вдохновение пришло от меню на Microsoft.com. Некоторые примеры отзывчивых запросов показывают как настроить меню для небольших экранов. HTML &lt;nav id=&quot;cbp-hrmenu&quot; class=&quot;cbp-hrmenu&quot;&gt;     &lt;ul&gt;         &lt;li&gt;             &lt;a href=&quot;#&quot;&gt;Products&lt;/a&gt;             &lt;div class=&quot;cbp-hrsub&quot;&gt;                 &lt;div class=&quot;cbp-hrsub-inner&quot;&gt;                     &lt;div&gt;                         &lt;h4&gt;Learning &amp; Games&lt;/h4&gt;                         &lt;ul&gt;                             &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Catch the Bullet&lt;/a&gt;&lt;/li&gt;                             &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Snoopydoo&lt;/a&gt;&lt;/li&gt;                             &lt;!-- ... --&gt;                         &lt;/ul&gt;                     &lt;/div&gt;                     &lt;div&gt;                         &lt;h4&gt;Utilities&lt;/h4&gt;                         &lt;ul&gt;                             &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Gadget Finder&lt;/a&gt;&lt;/li&gt;                             &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Green Tree Express&lt;/a&gt;&lt;/li&gt;                             &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Green Tree Pro&lt;/a&gt;&lt;/li&gt;                             &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Wobbler 3.0&lt;/a&gt;&lt;/li&gt;                             &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Coolkid&lt;/a&gt;&lt;/li&gt;                         &lt;/ul&gt;                     &lt;/div&gt;                     &lt;div&gt;                         &lt;!-- ...&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.8 ( 2 голосов )
100

Один комментарий

  1. Евгений

    Подскажите как установить данное меню на сайт? Спасибо!

Оставить комментарий

Ваш email не будет опубликован.

*