Billy-ui index 1.1

by Kate Mokhova

HTML

<div>
    <ul>
        <a class="menu-root">Партнерка</a> 
       <li class="menu-item menu-item-link zero">Партнерка</li>
       <li class="menu-item menu-item-link first">Мастер оплаты</li>
       <li class="menu-item menu-item-link second">ООРВ</li>
       <li class="menu-item menu-item-link third">Техподдержка</li>
       <li class="menu-item menu-item-link forth">Прочее</li>
    </ul>
</div>

<ul class="list1">
    <a href="" class="menu-item-link"><li>Партерка</li></a>
    <a href="" class="menu-item-link"><li>Партнерка-а</li></a>
</ul>

<ul class="list2 list-none-display">
    <a href="" class="menu-item-link"><li>Мастер</li></a>
    <a href="" class="menu-item-link"><li>Ма-астер</li></a>
</ul>

CSS

body
{
    margin: 0px;
    padding: 0px;
    font-family:Segoe UI;
    
}

ul{list-style: none;}

.menu-root
{
  display: block;
  border: 1px solid #e7e7e7;
  background-color: white;
  text-align: center;
  height: 28px;  
  padding-top: 3px; 
  
}

.menu-item{display:none;     
    transition-delay: 0s;
    transition-duration: 0.5s;
    transition-property: all;
    transition-timing-function: ease;

}

.menu-item-visible
{
  display: block;
  border: 1px solid #e7e7e7;
  background-color: white;
  margin-top: 2px;
  text-align: center;
  height: 28px;  
  padding-top: 3px;
    position: relative;
    z-index: 1;
}

.menu-item-link
{
  text-decoration: none;
  color: #404040;
}

.menu-item-visible:hover{display: block;}


.menu-item
{
	-webkit-transition: all 0.2s linear 0s;
	-moz-transition: all 0.2s linear 0s;
	-ms-transition: all 0.2s linear 0s;
	-o-transition: all 0.2s linear 0s;
	transition: all 0.2s linear 0s;
}

.menu-item:hover 
{
	background: #e7e7e7;
    cursor:pointer;
}

.list1
{position: absolute;
top: 45px;}

.list2
{position: absolute;
top: 45px;}



.list-none-display
{
    display: none;
}


.first{}
.second{}
.third{}
.forth{}

JavaScript

$(document).ready(function () {
    var $mr = $('.menu-root');
   
     $mr.click(function () 
     {
         
         if ($mr.attr('checked')) {
             $(".menu-item").removeClass("menu-item-visible");
             $mr.removeAttr( "checked" );

             return;
         }
         
         $(".menu-item").addClass("menu-item-visible");
         $mr.attr( "checked", true );
         
      
     });
     
    
    var $zero = $('.zero')  
     $zero.click(function () 
     {
         
         $(".list2").addClass("list-none-display");
         $(".list1").removeClass("list-none-display");
         $(".menu-item").removeClass("menu-item-visible");
         $mr.removeAttr( "checked" );
         $mr.text( "Партнерка" );
     });
    
     var $first = $('.first')       
     $first.click(function () 
     {
         
         $(".list2").removeClass("list-none-display");
         $(".list1").addClass("list-none-display");
         $(".menu-item").removeClass("menu-item-visible");
         $mr.removeAttr( "checked" );
         $mr.text( "Мастер оплаты" );
     });
    
     var $second = $('.second')  
     $second.click(function () 
     {
         
         $(".list2").addClass("list-none-display");
         $(".list1").removeClass("list-none-display");
         $(".menu-item").removeClass("menu-item-visible");
         $mr.removeAttr( "checked" );
         $mr.text( "ООРВ" );
     });
     
    
     var $trird = $('.third')  
     $trird.click(function () 
     {
         
         $(".list2").addClass("list-none-display");
         $(".list1").removeClass("list-none-display");
         $(".menu-item").removeClass("menu-item-visible");
         $mr.removeAttr( "checked" );
         $mr.text( "Техподдержка" );
     });
    
    
     var $forth = $('.forth')  
     $forth.click(function () 
     {
         
         $(".list2").addClass("list-none-display");
         $(".list1").removeClass("list-none-display");
        ...