JSFiddle - React, Tailwind, and code Playground

by Artur Stambultsian

HTML

<div class="small_size hidden">Меню</div>
<ul class="menu horizontal">
    <li>Меню 1</li>
    <li>Меню 2</li>
    <li>Меню 3</li>
    <li>Меню 4</li>
</ul>

CSS

.horizontal, .vertical {
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.horizontal li{
    float: left;
    padding: 20px;
    background: #afa;
    border: 1px solid #ccc;
    
}
.vertical li{    
    padding: 20px;
    background: #afa;
    border: 1px solid #ccc;
    width: 40%;    
}
.small_size {
    width: 40px;      
    padding: 10px 20px;
    background: #afa;
    border: 1px solid #ccc;
    cursor: pointer
}
.hidden {
    display: none;
}

JavaScript

function reconstruct() {
    if ($('html').width() < 600) {
        $('.menu').removeClass('horizontal').addClass('vertical hidden');
        $('.small_size').removeClass('hidden');
    }
    else {
        $('.menu').removeClass('vertical hidden').addClass('horizontal');
        $('.small_size').addClass('hidden');        
    }
}
$('.small_size').click(function(){
    if ($('.menu').hasClass('hidden')) {
        $('.menu').removeClass('hidden');
    }
    else {
        $('.menu').addClass('hidden');
    }
})
$('document').ready(function(){
        reconstruct(); 
    $(window).resize(function(){
        reconstruct();        
    })
})