menu

by Евгений

HTML

<div class="menu-min">==</div>
<div class="menu clearfix">

<div class="el el1">
    <div class="link">пункт 1</div>
    <div class="subel" id="subel1">подпункт 1</div>
</div>
<div class="el">
    <div class="link">пункт 2</div>
    <div class="subel" id="subel2">подпункт 2<br>подпункт 2</div>
</div>
<div class="el">
    <div class="link">пункт 3</div>
</div>
<div class="el">
    <div class="link">пункт 4</div>
</div>
<div class="el">
    <div class="link">пункт 5</div>
    <div class="subel" id="subel5">подпункт 5</div>
</div>
</div>
<div class="content">текст сайта</div>

CSS

.menu {
    width: 500px;
}
.el {
    float: left;
    width: 90px;
    background: rgba(255,0,0,.3);
}
.link {
    height: 30px;
}
.subel {
    float: left;
    width: 450px;
    background: rgba(0,0,255,.5);
    margin: 0px -10000px 0px 0px;
    display: none;
    overflow: hidden;
}
.clearfix:after{
    display: table;
    clear: both;
    content: "";
}
.el1 + .el > #subel2 {
    margin-left: -90px;
}
#subel2 {
    margin-left: 0;
}
.el1 + .el + .el + .el + .el > #subel5 {
    margin-left: -360px;
}
#subel5 {
    margin-left: -270px;
}
.menu-min {
    display: none;
}

@media screen and (max-width: 480px) {
    .menu-min {
        display: block;
        background: rgba(255,0,0,.3);
        width: 420px;
        height: 30px;
    }

    .menu {
        width: 420px;
        display: none;
    }
    .el,
    .subel {
        width: 100%;
    }
    .el1 + .el + .el + .el + .el > #subel5,
    .el1 + .el > #subel2,
    #subel2,
    #subel5 {
        margin-left: 0;
    }
}

JavaScript

$(function() {
    $('.link').on('click', function() {
        $('.menu .subel').slideUp('fast');
        $(this).next('.subel').slideDown('fast');
    });
    $('.menu-min').on('click', function() {
        $('.menu').slideToggle();
    });
})