JSFiddle - React, Tailwind, and code Playground

by sungsoonz

HTML

<div id="mainMenu">
    <ul>
      <li><a href="#">1st click</a></li>
      <li><a href="#">2nd click</a></li>
    </ul>
</div>
<div id='subMenu'>
    <ul>
        <li><a href='#'><span>1-1</span></a></li>
        <li class='has-sub'><a href='#'><span>1-2</span></a>
            <ul>
                <li><a href="#"><span>1-2-1</span></a></li>
                <li class='last'><a href="#"><span>1-2-1</span></a></li>
            </ul>
        </li>
        <li><a href='#'><span>1-3</span></a></li>
        <li class='last'><a href='#'><span>1-4</span></a></li>
    </ul>
    <ul>
        <li><a href='#'><span>2-1</span></a></li>
        <li class='last'><a href='#'><span>2-1</span></a></li>
    </ul>
</div>

CSS

ul {
    list-style: none;
   
}
#mainMenu li {
    display: inline;
    padding: 10px;
    background-color: lightgrey;
}
#mainMenu > ul > li.active {
  border-bottom: none;
}
#mainMenu > ul > li.active > a {
  color: #fff;
  background-color: #616161;
}
#subMenu,
#subMenu ul,
#subMenu li,
#subMenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  position: relative;
}
#subMenu ul {
    display: none;
}
#subMenu a {
  line-height: 1.3;
}
#subMenu {
  width: 200px;
  background: #fff;
}
#subMenu > ul > li {
  margin: 0 0 1px 0;
}
#subMenu > ul > li:last-child {
  margin: 0;
}
#subMenu > ul > li > a {
  font-size: 14px;
  display: block;
  color: #ffffff;
  background: #616161;
}
#subMenu > ul > li > a > span {
  display: block;
  padding: 6px 10px;
}
#subMenu > ul > li > a:hover {
  text-decoration: none;
}
#subMenu > ul > li.active {
  border-bottom: none;
}
#subMenu > ul > li.active > a {
  color: #fff;
}
#subMenu > ul > li.active > a span {
  background-color: #fa9322;
}
#subMenu > ul > li.has-sub > a span {
    position: relative;
}
    #subMenu > ul > li.has-sub > a span:after {
        position: absolute;
        top: 5px;
        right: 5px;
        font-family: 'FontAwesome';
        content: "\f116";
    }
#subMenu > ul > li.has-sub.active > a span {
    position: relative;
}
    #subMenu > ul > li.has-sub.active > a span:after {
        position: absolute;
        top: 5px;
        right: 5px;
        font-family: 'FontAwesome';
        content: "\f117";
    }

    #subMenu .icon-user {
        margin-right: 7px;
        color: #eaeaea;
    }

JavaScript

$(function () {

    $('#mainMenu > ul > li > a').click(function () {
        $('#mainMenu li').removeClass('active');
        $(this).closest('li').addClass('active');
        if ($(this).text() == "1st click") {
            $('#subMenu > ul').siblings().hide();
            $('#subMenu > ul:nth-child(1)').show();
        } else if ($(this).text() == "2nd click") {
            $('#subMenu > ul').siblings().hide();
            $('#subMenu > ul:nth-child(2)').show();
        }
    });


    $('#subMenu > ul > li > a').click(function () {
        $('#subMenu li').removeClass('active');
        $(this).closest('li').addClass('active');
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $(this).closest('li').removeClass('active');
            checkElement.slideUp('normal');
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#subMenu ul ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
        }
        if ($(this).closest('li').find('ul').children().length == 0) {
            return true;
        } else {
            return false;
        }
    });
});