Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
         <header>
          <nav class="menu-container">
            <div class="menu-toggler" id="menu-toggler">
                <div class="hamburger"></div>
              </div>
            <ul class="menu-list" id="menu-list">
                <li><a href="#">Element 01</a>
                    <div class="submenu-container">
                        <div>
                          <h4>submenu title 11</h4>
                          <ul class="menu-sublist">
                            <li><a href="#">Element 0111</a></li>
                            <li><a href="#">Element 0112</a></li>
                            <li><a href="#">Element 0113</a></li>
                            <li><a href="#">Element 0114</a></li>
                            <li><a href="#">Element 0115</a></li>
                          </ul>
                        </div>
                        <div>
                          <h4>submenu title 12</h4>
                          <ul class="menu-sublist">
                            <li><a href="#">Element 0121</a></li>
                            <li><a href="#">Element 0122</a></li>
                            <li><a href="#">Element 0123</a></li>
                            <li><a href="#">Element 0124</a></li>
                            <li><a href="#">Element 0125</a></li>
                          </ul>
                        </div>
                        <div>
                          <h4>submenu title 13</h4>
                          <ul class="menu-sublist">
                            <li><a href="#">Element 0131</a></li>
                            <li><a href="#">Element 0132</a></li>
                            <li><a href="#">Element 0133</a></li>
                            <li><a href="#">Element 0134</a></li>
                            <li><a href="#">Element 0135</a></li>
                          </ul>
                        </div>
                      </div>
                </li>
                <li><a href="#" class="no-event">Element 02</a>
                  <div class="submenu-container">
                    <div>
                      <h4>submenu title 21</h4>
                      <ul class="menu-sublist">
                        <li><a href="#">Element 0211</a></li>
                        <li><a href="#">Element 0212</a></li>
                        <li><a href="#">Element 0213</a></li>
                        <li><a href="#">Element 0214</a></li>
                        <li><a href="#">Element 0215</a></li>
                      </ul>
                    </div>
                    <div>
                      <h4>submenu title 22</h4>
                      <ul class="menu-sublist">
                        <li><a href="#">Element 0221</a></li>
                        <li><a href="#">Element 0222</a></li>
                        <li><a href="#">Element 0223</a></li>
                        <li><a href="#">Element 0224</a></li>
                        <li><a href="#">Element 0225</a></li>
                      </ul>
                    </div>
                    <div>
                      <h4>submenu title 23</h4>
                      <ul class="menu-sublist">
                        <li><a href="#">Element 0231</a></li>
                        <li><a href="#">Element 0232</a></li>
                        <li><a href="#">Element 0233</a></li>
                        <li><a href="#">Element 0234</a></li>
                        <li><a href="#">Element 0235</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li><a href="#">Element 03</a>
                    <div class="submenu-container">
                        <div>
                          <h4>submenu title 31</h4>
                          <ul class="menu-sublist">
                            <li><a href="#">Element 0311</a></li>
                            <li><a href="#">Element 0312</a></li>
                            <li><a href="#">Element 0313</a></li>
                            <li><a href="#">Element 0314</a></li>
                            <li><a href="#">Element 0315</a></li>
                          </ul>
                        </div>
                        <div>
                          <h4>submenu title 32</h4>
                          <ul class="menu-sublist">
                            <li><a href="#">Element 0321</a></li>
                            <li><a href="#">Element 0322</a></li>
                            <li><a href="#">Element 0323</a></li>
                            <li><a href="#">Element 0324</a></li>
                            <li><a href="#">Element 0325</a></li>
                          </ul>
                        </div>
                        <div>
                          <h4>submenu title 33</h4>
                          <ul class="menu-sublist">
                            <li><a href="#">Element 0331</a></li>
                            <li><a href="#">Element 0332</a></li>
                            <li><a href="#">Element 0333</a></li>
                            <li><a href="#">Element 0334</a></li>
                            <li><a href="#">Element 0335</a></li>
                          </ul>
                        </div>
                      </div>
                </li>
                <li><a href="#">Element 04</a>
                    <div class="submenu-container">
                        <div>
                          <h4>submenu title 41</h4>
                          <ul class="menu-sublist">
                            <li><a href="#">Element 0411</a></li>
                            <li><a href="#">Element 0412</a></li>
                            <li><a href="#">Element 0413</a></li>
                            <li><a href="#">Element 0414</a></li>
                            <li><a href="#">Element 0415</a></li>
                          </ul>
                        </div>
                        <div>
                          <h4>submenu title 42</h4>
                          <ul class="menu-sublist">
                            <li><a href="#">Element 0421</a></li>
                            <li><a href="#">Element 0422</a></li>
                            <li><a href="#">Element 0423</a></li>
                            <li><a href="#">Element 0424</a></li>
                            <li><a href="#">Element 0425</a></li>
                          </ul>
                        </div>
                        <div>
                          <h4>submenu title 43</h4>
                          <ul class="menu-sublist">
                            <li><a href="#">Element 0431</a></li>
                            <li><a href="#">Element 0432</a></li>
                            <li><a href="#">Element 0433</a></li>
                            <li><a href="#">Element 0434</a></li>
                            <li><a href="#">Element 0435</a></li>
                          </ul>
                        </div>
                      </div></li>
                <li><a href="#">Element 05</a>
                    <div class="submenu-container">
                        <div>
                          <h4>submenu title 51</h4>
                          <ul class="menu-sublist">
                            <li><a href="#">Element 0511</a></li>
                            <li><a href="#">Element 0512</a></li>
                            <li><a href="#">Element 0513</a></li>
                            <li><a href="#">Element 0514</a></li>
                            <li><a href="#">Element 0515</a></li>
                          </ul>
                        </div>
                        <div>
                          <h4>submenu title 52</h4>
                          <ul class="menu-sublist">
                            <li><a href="#">Element 0521</a></li>
                            <li><a href="#">Element 0522</a></li>
                            <li><a href="#">Element 0523</a></li>
                            <li><a href="#">Element 0524</a></li>
                            <li><a href="#">Element 0525</a></li>
                          </ul>
                        </div>
                        <div>
                          <h4>submenu title 53</h4>
                          <ul class="menu-sublist">
                            <li><a href="#">Element 0531</a></li>
                            <li><a href="#">Element 0532</a></li>
                            <li><a href="#">Element 0533</a></li>
                            <li><a href="#">Element 0534</a></li>
                            <li><a href="#">Element 0535</a></li>
                          </ul>
                        </div>
                      </div>
                    </li>
              </ul>
          </nav>
        </header>
      <main>
       <p>Illustation to blogpost <a href="https://dygresje.info/blog/webdev-menu">Frontend - menu RWD z Hamburgerem</a></p>
        
      <p>Honestly I don't know why is this Pen so frequently visited. It is far from being finished, even more from being nice. Damn, this is start of a draft, done fast and dirty. Maybe it's a reason for finish it, and give some shine! That title with "v2" does not mean it's better or more advanced from the other "MegaMenu with Hamburger", it means this is just another approach, another mechanics.</p>
      <p>I've upgraded it a little, but JS and mechanics are still a mess.</p>
      <p>Meanwhile, I just finished four other Pens in this Collection <a href="https://codepen.io/collection/JGKezQ">Menu - solutions</a>:</p>
      <ul>
          <li>Simple RWD menu</li>
          <li>Flat menu with Hamburger</li>
          <li>Dropdown menu with Hamburger</li>
          <li>MegaMenu with Hamburger</li>
      </ul>
      <p>Feel free to visit and check it out.</p>
      </main>
  <footer>
    <p>footer</p>
  </footer>
</div>
              
            
!

CSS

              
                body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* both below are new but can be commented  */
  /* position: relative; */
  /* overflow: clip; */
}

main {
  flex: 1;
}

ul {
  padding-left: 0;
  list-style-type: none;
  margin: 0;
}

.menu-list > li > a {
  pointer-events: none;
  font-weight: bold;
}

body.stop-transition .menu-list {
  transition: none;
}

/* # MENU # */

.menu-container {
  height: 2rem;
}

.menu-list {
  display: flex;
  position: relative;
  flex-direction: column;
  left: -100%;
  width: 100%;
  transition: all 0.3s linear;
}

.menu-list li {
  flex: 1;
}

.menu-list li > a {
  display: block;
  text-align: center;
  text-decoration: none;
  height: 1.2rem;
  padding: 5px 0;
  background-color: rgba(200,200,200,.4)
}

.menu-list li:hover > a {
  text-decoration: underline;
  background-color: beige;
}

.submenu-container {
  position: absolute;
  box-shadow: 2px 2px 5px rgba(51, 51, 51, 0.5);
  background-color: #ffe;
  /* transition: all 0.3s linear; */
  /* all three different than in 4 but two can be commented*/  
  /* width: 100%; */
  /* z-index: 10; */
  left: 200%;
}

.menu-toggler {
  display: flex;
  height: 100%;
  cursor: pointer;
  padding: 0 10vw;
  padding-left: 1rem;
  background-color: #666;
}

/* # HAMBURGER # */

.hamburger {
  background-color: #ccc;
  width: 30px;
  height: 3px;
  transition: all 0.3s linear;
  align-self: center;
  position: relative;
}

.hamburger::before,
.hamburger::after {
  width: 30px;
  height: 3px;
  background-color: #ccc;
  content: "";
  position: absolute;
  transition: all 0.3s linear;
}

.hamburger::before {
  top: -10px;
}

.hamburger::after {
  top: 10px;
}

/* # OPEN # */

.open .hamburger {
  transform: rotate(-45deg);
}

.open .hamburger::before {
  transform: rotate(-90deg) translate(-10px, 0px);
}

.open .hamburger::after {
  opacity: 0;
  transform: rotate(90deg);
}

.open ~ .menu-list {
  left: 0;
  transition: all 0.3s linear;
}

.menu-list li .open {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* # SUBMENU OPEN # */

/* new rule */
.menu-list li .open.submenu-container {
  left: 0;
  transition: all 0.3s linear;
}

/* new rule */
.newHeight {
  overflow-x: hidden;
  overflow-y: auto;
 
}

/* # DESKTOP # */

@media (min-width: 800px) {
  .menu-toggler {
    display: none;
  }

  .menu-list {
    flex-direction: row;
    position: relative;
    left: 0;    
    /* in 3 below is uncommented */
    /* transition: all 0s; */
  }

  .menu-list li:hover > a {
    background-color: beige;
  }

  .menu-list li .open {
    display: none;
  }

  /* this rule is new */
  .menu-list li .submenu-container {
    left: 0;
    display: none;
  }

  .menu-list li:hover > .submenu-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    position: absolute;
  }

  .menu-list li:hover > .submenu-container div {
    flex: 1;
  }
}
              
            
!

JS

              
                const toggler = document.getElementById("menu-toggler");
const sublistToggler = document.getElementById("menu-list");
const container = document.getElementsByClassName("container")[0];
let flag = false;

// [...sublistToggler.children].forEach((element) => element.addEventListener("click", (e) => submenuToggle(e)));
// toggler.addEventListener("click", () => menuToggle());

const sublistToggle = (e) => {
    if (window.visualViewport.width<800)  {
    const clickedItemClasslist = e.path[0].children[1].classList
    
    // COLLAPSE IF EXPANDED
    if (clickedItemClasslist.contains('open')) {clickedItemClasslist.remove("open"); return;}
    // ACCORDION
    for (let i = 0; i < sublistToggler.children.length; i++) {sublistToggler.children[i].children[1].classList.remove("open")}
    // EXPAND
    console.log(e.target.children[1])
    if (e.target.children[1]) {
    e.target.children[1].classList.toggle("open");
    flag = e.target.children[1].classList.contains("open") ? true : false;
    container.classList.add("newHeight");
  }

    // clickedItemClasslist.toggle("open");
    }
  };

const listToggle = () => {
     toggler.classList.toggle("open");
  if (!toggler.classList.contains("open") && container.classList.contains("newHeight")) {container.classList.remove("newHeight"); }
//   if (toggler.classList.contains("open") && flag) {container.classList.add("newHeight"); }
    for (let i = 0; i < sublistToggler.children.length; i++) {sublistToggler.children[i].children[1].classList.remove("open")}
}

sublistToggler.addEventListener("click", (e) => sublistToggle(e));
toggler.addEventListener("click", () => listToggle());

// CLOSE EXPANDED IF RESIZED UP
const closeExpanded = () => {
      if (window.visualViewport.width>799) {
        toggler.classList.remove("open");
    for (let i = 0; i < sublistToggler.children.length; i++) {sublistToggler.children[i].children[1].classList.remove("open")}
         }
   }
window.addEventListener('resize', closeExpanded);

(function () {
  const classes = document.body.classList;
  let timer = null;
  window.addEventListener('resize', function () {
    if (timer){
      clearTimeout(timer);
      timer = null;
    } else {
      classes.add('stop-transition');
    }
    timer = setTimeout(() => {
      classes.remove('stop-transition');
      timer = null;
    }, 100);
  });
})();
              
            
!
999px

Console