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

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

От автора: адаптивное горизонтальное выпадающее меню, навеянное вебсайтом Microsoft.com.

Это большое горизонтальное выпадающее меню при щелчке на элемент просто показывает подменю. Его создание навеяно выпадающим меню сайта 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 };
 
})();

Автор: Mary Lou

Источник: http://tympanus.net/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. Pocherk

    Спасибо! Как раз понадобится для нового пректа. А то я планировал использовать MegaMenu, но этот вариант более интересен.

  2. Ruslan

    Как установить на джумла 3 ?
    Подскажите, автор :)

    • Виктор Гавриленко

      Здравствуйте!
      Для этого нужно создавать модуль с нуля под CMS Joomla. У нас на сайте есть похожий урок:
      Ссылка

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree