Responsive menü

2014-08-10

Felbontásfüggetlen menü, mely mobil eszközön összeugrik és hamburger ikonnal nyitható.

A működő kódot ide kattintva tudod megnézni.

Videó

Videó

HTML forráskód


<nav>
    <div class="navbar clear">
        <a href="" class="logo">Logo</a>
        <div class="menu-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></div>
        <div class="menu">
            <ul>
                <li><a href="">menu 1</a></li>
                <li><a href="">menu 2</a></li>
                <li>
                    <span class="open-submenu">menu 3 <span class="arrow down"></span></span>
                    <ul>
                        <li><a href="">almenupont 1</a></li>
                        <li><a href="">almenupont 2</a></li>
                        <li><a href="">almenupont 3</a></li>
                        <li><a href="">almenupont 4</a></li>
                    </ul>
                </li>
                <li><a href="">menu 4</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS forráskód


* {
    margin: 0;
    padding: 0;
    border: 0
}
body {
    background: #f4f4f4;
    font-family: tahoma;
    font-size:14px
}
a { text-decoration:none }
.clear:before,
.clear:after {
    content:" ";
    display: table
}
.clear:after { clear: both }
.arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle
}
.arrow.down {
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent
}
.arrow.up {
    border-bottom: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent
}

nav {
    width: 100%;
    background: #6CC49B
}
nav .navbar {
    width: 95%;
    max-width: 1000px;
    margin:0 auto
}
nav a { color: #fff }
nav .logo {
    float: left;
    display: inline-block;
    font-size: 30px;
    font-weight: bold
}
nav .menu-toggle {
    cursor: pointer;
    display: none;
    float: right;
    padding: 12px;
    margin: 10px 0;
    background: #62b38d;
    transition: background-color .5s
}
nav .icon-bar {
    background-color: #fff;
    display: block;
    width: 22px;
    height: 2px
}
nav .icon-bar + .icon-bar { margin-top: 4px }

nav .menu ul { float: right }
nav .menu li {
    float: left;
    list-style: none;
    border-left: 2px solid #62b38d
}
nav .menu li:first-child { border-left: 0 }
nav .menu li a,
nav .open-submenu {
    color: #fff;
    cursor: pointer;
    position: relative;
    display: block;
    padding: 12px 20px;
    transition: background-color .3s
}
nav .menu li a:hover,
nav .open-submenu:hover ,
nav .open-submenu.active,
nav .menu-toggle.active  {
    background: #FFBB22;
    transition: background-color .5s
}
nav .menu ul ul {
    z-index: 100;
    display: none;
    float: none;
    position: absolute;
    background: #FFBB22
}
nav .menu ul ul li {
    float: none;
    border: 0
}
nav .menu ul ul a:hover {
    background: #62b38d;
    transition: background-color .3s
}

@media(max-width:600px) {
    nav .logo { padding-top: 8px }
    nav .menu-toggle { display: inline-block }
    nav .menu { display: none; clear: both }
    nav .menu > ul { float: none }
    nav .menu li { width: 100%; border: 0 }
    nav .menu li:last-child { margin: 0 0 15px 0 }
    nav .menu li a,
    nav .open-submenu {
        display: block;
        background: #62b38d;
        padding: 10px;
        margin: 2px 0 0 0
    }
    nav .menu ul ul {
        position: static;
        background: transparent;
        display:none
    }
    nav .menu ul ul a { background: transparent }
    nav .menu ul ul a:hover { background: #FFBB22 }
}

jQuery forráskód


var menu = $(".menu");
$(window).resize(function(){
    $(".menu-toggle").removeClass("active");
    if($(window).innerWidth() > 600){
        menu.show();
    } else {
        menu.hide();
    }
});
$(".menu-toggle").click(function(){
    $(this).toggleClass("active");
    menu.slideToggle();
})
$(".open-submenu").click(function(){
    $(this).toggleClass("active");
    $(this).next("ul").slideToggle();
    $(this).children(".arrow").toggleClass("down up");
});