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

Дата публикации: 2013-03-19

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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>

<ul>

<li>

<a href="#">Products</a>

<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>

</div>

</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;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

.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 };
 
})();

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Метки: выпадающее меню

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

HTML

CSS

JavaScript

Верстка. Быстрый старт

Похожие статьи:

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

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

Материалы

Мы в соц. сетях

Связь

Информация