JSFiddle - React, Tailwind, and code Playground

by kalar su

HTML

<nav class="nav-container">
                        <ul>
                            <li class="dropdown">
                                <a href="" data-toggle="dropdown">Brand <i class="icon-arrow"></i></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Welcome</a></li>
                                    <li><a href="#">Design Principles</a></li>
                                    <li><a href="#">Brand</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="" data-toggle="dropdown">Styles <i class="icon-arrow"></i></a>
                                <ul class="dropdown-menu">
                                    <li><a href="">Colors</a></li>
                                    <li><a href="">Typography</a></li>
                                    <li><a href="">Icons</a></li>
                                    <li><a href="">Buttons</a></li>
                                    <li><a href="">Forms</a></li>
                                    <li><a href="">Headers</a></li>
                                    <li><a href="">Navigation</a></li>
                                    <li><a href="">Chevrons</a></li>
                                    <li><a href="">Mobile</a></li>
                                    <li><a href="">Grid</a></li>
                                    <li><a href="">Video</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="" data-toggle="dropdown">Assets<i class="icon-arrow"></i></a>
                                <ul class="dropdown-menu">
                                    <li><a href="">Logos</a></li>
                                    <li><a href="">icons</a></li>
                                    <li><a href="">Imagery</a></li>
...

CSS

*, *:before, *:after {
  -webkit-border-sizing: border-box;
  -moz-border-sizing: border-box;
  border-sizing: border-box;
}

.nav-container {
  width: 180px;
}
.nav-container > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.dropdown a {
  text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
  position: relative;
  display: block;
  color: white;
  background: #2980B9;
  padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
  background: #2c89c6;
}
.dropdown .icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.7em;
  color: #fff;
  top: 14px;
  right: 10px;
}
.dropdown .icon-arrow.open {
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
.dropdown .icon-arrow:before {
  content: '\25BC';
}
.dropdown .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dropdown .dropdown-menu li {
  padding: 0;
}
.dropdown .dropdown-menu li a {
  display: block;
  color: #6f6f6f;
  background: #EEE;
  padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
  background: #f6f6f6;
}

.dropdown .show {
  display: block;
  max-height: 9999px;
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  
  -moz-transition: max-height 1s ease-in-out;
  -o-transition: max-height 1s ease-in-out;
  -webkit-transition: max-height 1s ease-in-out;
  transition: max-height 1s ease-in-out;
}
.dropdown...

JavaScript

var dropdown = document.querySelectorAll('.dropdown');
    var dropdownArray = Array.prototype.slice.call(dropdown, 0);
    dropdownArray.forEach(function (el) {
        console.log('test1');
        var button = el.querySelector('a[data-toggle="dropdown"]'),
              menu = el.querySelector('.dropdown-menu'),
             arrow = button.querySelector('i.icon-arrow');

        button.onclick = function (event) {
            console.log('click');
            if (!menu.hasClass('show')) {
                menu.classList.add('show');
                menu.classList.remove('hide');
                arrow.classList.add('open');
                arrow.classList.remove('close');
                event.preventDefault();
            }
            else {
                menu.classList.remove('show');
                menu.classList.add('hide');
                arrow.classList.remove('open');
                arrow.classList.add('close');
                event.preventDefault();
            }
        };
    })