JSFiddle - React, Tailwind, and code Playground

by davcpas123

HTML

<div id="mobileInitialNav">
        <button id="burgerNav">☰</button>
        <button id="crossNav">✖</button>
    </div>

    <nav id="navBar">
      <a href="#">Nav1</a>
    
      <a href="#">Nav2</a>

      <a href="#">Nav3</a>

      <div>
      <button class="dropNav" id="drop1" data-dropbtn="dropNav1">Dropdown 1 <i class="rightArrow"></i></button>
          <div id="dropNav1" class="dropList">
              <a href="#">Drop1</a>
              <a href="#">Drop2</a>
              <a href="#">Drop3</a>
          </div>
      </div>

      <div>
      <button class="dropNav" id="drop2" data-dropbtn="dropNav2">Dropdown 2 <i class="rightArrow"></i></button>
          <div id="dropNav2" class="dropList">
              <a href="#">Drop1</a>
              <a href="#">Drop2</a>
              <a href="#">Drop3</a>
          </div>
      </div>

      <div>
      <button class="dropNav" id="drop3" data-dropbtn="dropNav3">Dropdown 3 <i class="rightArrow"></i></button>
          <div id="dropNav3" class="dropList">
              <a href="#">Drop1</a>
              <a href="#">Drop2</a>
              <a href="#">Drop3</a>
          </div>
      </div>
    </nav>

CSS

* {
    padding: 0;
    margin: 0;
} 




#burgerNav, #crossNav {
    color: #000;
    background: none;
    position: absolute;
    font-size: 1.5em;
    top: 0;
    left: 0;
    padding: 5px 15px 0px 15px; 
    z-index: 999; 
    font-weight: bold;
    border: none;
    vertical-align: middle;
}

#crossNav {
    display: none;
}

#navBar     {
    display: none;
    position: fixed;
}

#mobileInitialNav {
    width: 100%;
    height: 45px;
    display: block;
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}


nav {
    background-color: white;
    width: 100%;
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    box-shadow: 0 3px 10px rgba(0,0,0,0.5); 
    font-family: 'Montserrat', sans-serif;
}

nav a, .dropNav   {
    text-decoration: none;
    color: black;
    display: block;
    font-size: 16px;
    border: none;
    background-color: white;
    font-family: 'Montserrat', sans-serif;
    padding: 15px 5%;
    outline: none;
}

.dropList {
    display: none;
    padding-left: 5%;
}

.openDrop  div {
    display: block;
}



i {
    border: solid black;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    margin-bottom: 2px;
    margin-left: 10px;
    
}

.rightArrow {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}


@media only screen and (min-width: 900px) {

    #mobileInitialNav   {
        display: none;
    }

    #navBar {
        display: block;
        position: fixed;
    }

    nav > a, .dropNav, nav div {
        display: inline;
        position: relative;
    }

    .dropList {
        left: 0;
        right: 0;
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        padding-left: 0;
    }

    

}

JavaScript

$("#burgerNav, #crossNav").click(function () { 
        $("#navBar").slideToggle(400);
        $("#burgerNav").toggle();
        $("#crossNav").toggle();
    });
    
    $(".dropNav").click(function () {

        $(".dropList").not(this).slideUp(400); 
        var dropbtnId = $(this).attr("data-dropbtn");
        $("#" + dropbtnId).slideToggle(400); 
    });

    $("#crossNav").click(function () {
        $(".dropList").slideUp(400);
    });