JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<header>
    <div id="zartumolpasgka" class="nanigazusa">
        <h1>ZORNET.RU</h1>
        <div id="kolpdenukzan"><a href="#">Menu</a></div>
    </div>
    <nav>
        <ul>
            <li><a href="#">Скрипты</a></li>
            <li><a href="#">Шаблоны</a></li>
            <li>
                <a href="#">Коды<span class="toggle">Expand</span><span class="caret"></span></a>
                <nav>
                    <ul>
                        <li><a href="#">Ajax окна для uCuz</a></li>
                        <li><a href="#">Ajax окна для uCuz</a></li>
                        <li><a href="#">Ajax окна для uCuz</a></li>
                    </ul>
                </nav>
            </li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Дизайн</a></li>
        </ul>
    </nav>
</header>

CSS

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

body {
    background: #eee;
    color: #444;
    -webkit-font-smoothing: antialiased;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
    font-weight: 400;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    text-rendering: optimizeLegibility;
}

header {
    background-color: rgb(140, 193, 193);
    border-bottom: 1px solid rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    text-align: center;
}

    header > div#zartumolpasgka {
        line-height: 70px;
        position: relative;
    }
    
    header > .menuDown {
        box-shadow: 0 3px 5px rgba(0,0,0,.15);
    }
    
    header > .nanigazusa {
        box-shadow: none;
    }
    
        header > div#zartumolpasgka > h1 {
            color: white;
            font-weight: 300;
            text-transform: lowercase;
        }
        
        header > div#zartumolpasgka > div#kolpdenukzan {
            background-color: rgba(0,0,0,.15);
            position: absolute;
            right: 0;
            top: 0;
            transition: 300ms all ease;
        }
            
            header > div#zartumolpasgka > div#kolpdenukzan:hover {
                background-color: rgba(0,0,0,.1);
            }
            
            header > div#zartumolpasgka > div#kolpdenukzan > a {
                color: rgba(255,255,255,.85);
                display: block;
                font-size: 0.85em;
                font-weight: 600;
                padding: 0 2.5rem;
                text-decoration: none;
                transition: 300ms all ease;
            }
            
                header > div#zartumolpasgka > div#kolpdenukzan:hover > a {
                    color: rgba(255,255,255,1);
                }

    header > nav {
        background-color: white;
        display: none;
     ...

JavaScript

$(document).ready(function() {
    $("#kolpdenukzan a").click(function(e){
        e.preventDefault();
        
        $("header > nav").slideToggle("medium");
        $("#zartumolpasgka").toggleClass("nanigazusa menuDown");
    });
    
    $(window).resize(function() {
        if($( window ).width() >= "600") {
            $("header > nav").css("display", "block");
            
            if($("#zartumolpasgka").attr('class') == "menuDown") {
                $("#zartumolpasgka").toggleClass("nanigazusa menuDown");
            }
        }
        else {
            $("header > nav").css("display", "none");
        }
    });
    
    $("header > nav > ul > li > a").click(function(e) {
        if($( window ).width() <= "600") {
            if($(this).siblings().size() > 0 ) {
                $(this).siblings().slideToggle("fast")
                $(this).children(".toggle").html($(this).children(".toggle").html() == 'close' ? 'expand' : 'close');
            }
        }
    });
});