JSFiddle - React, Tailwind, and code Playground

by Victor Alekseev

HTML

<div id="mobile_btn"><span></span></div>
<div id="mobile_menu">
				<div class="item">
					<a href="#">программы</a>
					<div class="open_sub">></div>
					<div class="items">
						<a href="#">мультимедиа</a>
						<a href="#">оптимизация</a>
						<a href="#">безопасность</a>
						<a href="#">система/офис</a>
						<a href="#">интернет</a>
						<a href="#">прочее</a>
						<a href="#">бонус</a>
					</div>
				</div>
        <div class="item">
					<a href="#">читать</a>
					<div class="open_sub">></div>
					<div class="items">
						<a href="#">советы</a>
            <div class="item">
              <a href="#">статьи</a>
              <div class="open_sub_sub">></div>
              <div class="items_">
                <a href="#">советы</a>
                <a href="#">статьи</a>
                <a href="#">вопросы/ответы</a>
              </div>
            </div>
						<a href="#">вопросы/ответы</a>
					</div>
				</div>
        <div class="item">
					<a href="#">помощь</a>
					<div class="open_sub">></div>
					<div class="items">
						<a href="#">разовая помощь</a>
						<a href="#">годовое обслуживание</a>
						<a href="#">услуги по сайтам</a>
					</div>
				</div>
        <div class="item">
					<a href="#">дополнительно</a>
					<div class="open_sub">></div>
					<div class="items">
						<a href="#">полезные ссылки</a>
						<a href="#">видео уроки</a>
						<a href="#">сборка пк</a>
						<a href="#">уроки по photoshop</a>
					</div>
				</div>
</div>

CSS

#mobile_btn {
  padding:10px;
  height:30px;
  width:30px;
  background:#444;
  position:relative;
}
#mobile_btn span, #mobile_btn span:before, #mobile_btn span:after {
  content:'';
  display:block;
  width:30px;
  height:2px;
  background:#ccc;
  position:absolute;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  -o-transition:0.3s;
  transition:0.3s;
}
#mobile_btn span {
  top:calc(50% - 1px);
  left:10px;
}
#mobile_btn span:before {
  top:10px;
}
#mobile_btn span:after {
  bottom:10px;
}

#mobile_btn.hover span {
  width:0;
}
#mobile_btn.hover span:before {
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
  top:50%;
}
#mobile_btn.hover span:after {
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
  top:50%;
  bottom:auto;
}


#mobile_menu {
  position:absolute;
  top:50px;
  left:0;
  background:#444;
  overflow:hidden;
  width:100%;
  transition:0.3s;
  display:none;
}
#mobile_menu.open {
  top:50px;
  height:auto;
}

.item {position:relative}
.item a {
  text-decoration:none;
  color:#ccc;
  display:block;
  padding:10px 15px;
  font-size:14px;
  text-transform:uppercase;
}

.open_sub, .open_sub_sub {
  position:absolute;
  top:0;
  right:0;
  height:36px;
  width:36px;
  line-height:36px;
  text-align:center;
  color:#ccc;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  -o-transition:0.3s;
  transition:0.3s;
}
.open_sub.hover, .open_sub_sub.hover {
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  transform:rotate(90deg);
}

.items, .items_ {
  display:none;
}
.items a {
  font-size:13px;
  padding:10px 15px 10px 25px;
}
.items_ a {
  font-size:13px;
  padding:10px 15px 10px 40px;
}

JavaScript

$(document).ready(function(){
	var state_menu = 0;
	$('#mobile_btn').click(function(){
  	$(this).toggleClass('hover');
    if(state_menu == '0'){
    	$('#mobile_menu').show(300);
      state_menu = 1;
    } else {
    	$('#mobile_menu').hide(300);
    	state_menu = 0;
    }
  })

	var state_item = 0;
  $('.open_sub').hover(function(){
  	$(this).toggleClass('hover');
    if(state_item == '0'){
    	$(this).siblings('.items').show(300);
      state_item = 1;
    } else {
    	$(this).siblings('.items').hide(300);
      state_item = 0;
    }
	})
  
  var state_item_sub = 0;
  $('.open_sub_sub').click(function(){
  	$(this).toggleClass('hover');
    if(state_item_sub == '0'){
    	$(this).siblings('.items_').show(300);
      state_item_sub = 1;
    } else {
    	$(this).siblings('.items_').hide(300);
      state_item_sub = 0;
    }
	})
})