JSFiddle - React, Tailwind, and code Playground

by uggway

HTML

<div id="wrap">
    <div id="mw">
    <div id="menu">
        <div class="menuitem active"><img src="pk1.jpg" class="mi_im"/><span class="mi_sp">Главная</span></div>
        <div class="menuitem"><img src="pk1.jpg" class="mi_im"/><span class="mi_sp">События</span></div>
        <div class="menuitem"><img src="pk1.jpg" class="mi_im"/><span class="mi_sp">Меню</span>
            <ul class="smenu">
                <li>Пиццерия Камин</li>
                <li>Сеть суши баров Киото</li>
                <li>Детское меню</li>
            </ul>
        </div>
        <div class="menuitem"><img src="pk1.jpg" class="mi_im"/><span class="mi_sp">Кейтеринг</span></div>
        <div class="menuitem"><img src="pk1.jpg" class="mi_im"/><span class="mi_sp">Отзывы</span></div>
        <div class="menuitem">Скидки</div>
        <div class="menuitem">Доставка</div>
        <div class="menuitem">Контакты</div>                
        <div class="menuitem">Работа</div>
    </div>
</div>
    <div id="brcr">
        bread crumbs
    </div>
    <div id="content">
        content
    </div>
    <div id="footer">
        footer
    </div>        
</div>

CSS

body{
    background:#eeeeee;
}

#wrap{
    background:#ffffff;
    margin:5px;
    overflow:hidden;
    width:100%;
}
#mw{
    width:100%;
    height:200px;   
    overflow:hidden;
}
#menu{
    height:200px;  
    overflow:hidden; 
    width:100%;
    position:absolute;
}
.active{    
    background:#fefea1;
}

.hlight{
    background:#dedede;    
}

.menuitem{
    float:left;    
    height:200px;
    width:100%;
    background:#e2dcc9;
    position:relative;
    overflow:hidden;    
    border-right:2px solid #eee;
}
.smenu{
    position:absolute;
    list-style:none;
    top:200px;
    overflow:hidden;
    background:#000;
    opacity:0.6;
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    color:#ddd;
    font-size:14px;
    left:0px;
    
}
.smenu li{
    padding:5px;
}

#brcr{
    height:20px;
    background:#cecece;
}

#content{
    min-height:500px;
}

#footer{
    background:#dedede;
}
.mi_sp{
    position:absolute;
    top:0px;left:0px;
    background:#000;
    color:#fff;
    opacity:0.7;
    filter:alpha(opacity=70);
    -moz-opacity:0.7;
    width:100%;
}
.mi_im {
    position:absolute;
    left:0px;top:0px;
    width:550px;
    height:200px;
}

JavaScript

var to;
    m_count = 9;

    ww = $("#wrap").width();
    m_pw = ww * 2 / 3;
    if (m_pw > 150) m_pw = 150;    
    m_width = (ww - m_pw) / (m_count);
    $('#brcr').text(ww+" | "+( m_width*(m_count - 1)+m_pw + 60+9*2)+" | "+m_width+"|"+m_pw);
      m_pw += (ww - m_pw - (m_count - 1)*(m_width ));

    $("#menu div.menuitem").css({
        width: m_width,
        opacity: "0.6"
    });
    $("#menu div.active").animate({
        opacity: "1",
        width: m_pw
    }, 500, "swing");
    
    t = $("#menu div.menuitem");
    
    t.click(function() {
        $("#menu .active").removeClass("active");
        $(this).addClass("active");
    });

    t.hover(function() {
        $("#menu div.menuitem").stop();
        $(this).toggleClass("hlight");
        $("#menu div.menuitem:not(.hlight)").animate({
            opacity: "0.6",
            width: m_width
        }, 500, "swing");

        $(this).animate({
            opacity: "1",
            width: m_pw
        }, 500, "swing", function() {
            smshow();
        });

    }, function() {
        //$this = $(this);
        smhide();
        $(this).removeClass("hlight");

    });


$("#menu").hover(function() {}, function() {
    if ($("#menu div.menuitem").hasClass("hlight")) {
        return;
    }
    $("#menu div.menuitem").stop();

    $("#menu div.active").animate({
        opacity: "1",
        width: m_pw
    }, 500, "swing");

    $("#menu div.menuitem:not(.active)").animate({
        opacity: "0.6",
        width: m_width
    }, 500, "swing");

});

function smshow() {
    i = $(".hlight .smenu");
    h = i.find("li").length;
    i.stop().animate({
        top: 200 - h * 40
    }, 500, "swing");
}

function smhide() {
    i = $(".hlight .smenu");
    i.stop().animate({
        top: 200
    }, 500, "swing");
}