JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<nav class="nav-bar page-width">
  <div class="nav-item">
    <p class="nav-item--name">
      nav-item 1 v
    </p>
    <div class="nav-item--contents-container">
      <div class="nav-item--contents page-width">
        <div>
          SomeText
        </div>
        <div>
          SomeOtherText
        </div>
        <div>
          SomeThirdText
        </div>
      </div>
    </div>
  </div>
  <div class="nav-item">
    <p class="nav-item--name">
      nav-item 2 v
    </p>
    <div class="nav-item--contents-container">
      <div class="nav-item--contents page-width">
        <div>
          SomeText2
        </div>
        <div>
          SomeOtherText2
        </div>
        <div>
          SomeThirdText2
        </div>
      </div>
    </div>
  </div>
  <div class="nav-item">
    <p class="nav-item--name">
      nav-item 3 v
    </p>
    <div class="nav-item--contents-container">
      <div class="nav-item--contents page-width">
        <div>
          SomeText3
        </div>
        <div>
          SomeOtherText3
        </div>
        <div>
          SomeThirdText3
        </div>
      </div>
    </div>
  </div>

  <div class="nav-logo"> LOGO </div>

  <div class="nav-item">
    <p class="nav-item--name">
      nav-item 4 v
    </p>
    <div class="nav-item--contents-container">
      <div class="nav-item--contents page-width">
        <div>
          SomeText4
        </div>
        <div>
          SomeOtherText4
        </div>
        <div>
          SomeThirdText4
        </div>
      </div>
    </div>
  </div>
  <div class="nav-item">
    <p class="nav-item--name">
      nav-item 5
    </p>
  </div>
  <div class="nav-item">
    <p class="nav-item--name">
      nav-item 6 v
    </p>
    <div class="nav-item--contents-container">
      <div class="nav-item--contents page-width">
        <div>
          SomeText6
        </div>
        <div>
          SomeOtherText6
        </div>
        <div>
          SomeThirdText6
        </div>
      </div>
  ...

CSS

body {
  margin: 10px 0 0 0;
  display: block;
}

/* SHARED */

.page-width {
  width: 100vw;
  max-width: 1200px;
  margin: 0 auto;
}

/* END SHARED */

/* NAV BAR */

.nav-bar {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  height: 90px;

  outline: 1px black solid;

}

.nav-hamburger {
  display: none;
  margin: 0 10px 0 10px;
}

.nav-item {
  display: inline-block;

  outline: 1px green solid;
}
.nav-item--name {
  vertical-align: middle;
  text-align: center;
  /* padding: 3px; */
}

.nav-item--contents-container {
  background: white;
  max-height: 0px;
  width: 100vw;
  transition: max-height 0.5s ease-out;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
}

.nav-item:hover {
  cursor: pointer;
}

.nav-item:hover .nav-item--name {
  color: orange;
}

.nav-item:hover .nav-item--contents-container {
  max-height: 500px;
  transition: max-height 0.5s ease-in;
}

.nav-logo {
  display: inline-block;
  margin: 0 10px 0 10px;
  width: 90px;
  height: 90px;

  transition: float 0.5s ease-out;


  outline: 1px red solid;
}

/* END NAV */

/* CONTENT */

.content {
  box-sizing: border-box;
  padding: 3px;

  outline: 1px blue solid;
}

/* END CONTENT */


/* MEDIA QUERIES */

@media(max-width: 960px) {
  .nav-bar {
    height: 70px;
  }

  .nav-hamburger {
    display: inline-block;
    width: 70px;
    height: 70px;
    outline: 1px red solid;
    margin: 0;
  }

  .nav-logo {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 0;
  }

  .nav-item {
    display: none;
  }

}

/* END MEDIA QUERIES */

JavaScript

function myfunction() {
	console.log('hi');
	alert(document.getElementById("hamburger"))
}