Čistě CSS megamenu s mobilní verzí

uplně bez JS... like a boss :)

by Petr Haluza

HTML

<div class="nav">
    <nav>
        <a href="javascript:void(0);" class="mobile-menu-trigger">Identifikuju se jako hamburger</a>
        
        <ul class="menu menu-bar">
            <li>
                <a href="javascript:void(0);" class="menu-link menu-bar-link" aria-haspopup="true">1. Multilevel megaMenu</a>
                <ul class="mega-menu mega-menu--multiLevel">
                    <li>
                        <a href="javascript:void(0);" class="menu-link mega-menu-link" aria-haspopup="true">1.1 Skupina</a>
                        <ul class="menu menu-list">
                            <li>
                                <a href="/page" class="menu-link menu-list-link">1.1.1 Link</a>
                            </li>
                            <li>
                                <a href="/page" class="menu-link menu-list-link">1.1.2 Link</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:void(0);" class="menu-link mega-menu-link" aria-haspopup="true">1.2 Skupina</a>
                        <ul class="menu menu-list">
                            <li>
                                <a href="/page" class="menu-link menu-list-link">1.2.1  Link</a>
                            </li>
                            <li>
                                <a href="/page" class="menu-link menu-list-link">1.2.2  Link</a>
                            </li>
                        </ul>
                    </li>
                    <li class="mobile-menu-back-item">
                        <a href="javascript:void(0);" class="menu-link mobile-menu-back-link">Zpět</a>
                    </li>
                </ul>
            </li>


          
          
            <li>
                <a href="#" class="menu-link menu-bar-link">Link</a>
            </li>

            <li class="menuSearch">
                <div>Hledani</div>
            </li>
          ...

CSS

*,*:before,*:after {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}
nav ul,
nav li { list-style: none; padding: 0; margin: 0;}
nav a { display: block; text-decoration: none;}
nav a:hover,
nav a:visited { text-decoration: none;}
.menu-bar { background: #ffffff; display: flex;}
.menu-link { padding: 20px 25px; background: #ffffff; color: #177E89; transition: background 0.2s, color 0.2s; position: relative; z-index: 1;}
.menu-link[aria-haspopup="true"] { padding-right: 40px;}
.menu-link[aria-haspopup="true"]:after {
  content: "";
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowRight.svg#accent');
  background-size: 14px;
  width: 14px;
  height: 14px;
  font-size: 12px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.mega-menu-header {
  font-size: 1.2em;
  text-transform: uppercase;
  font-weight: bold;
  color: #136a73;
}
.mega-menu {
  background: #ffffff;
  z-index: 10;
}
.mega-menu--multiLevel {
  flex-direction: column;
}

@media all and (min-width: 951px) {
  .nav { }
  .nav > nav { }
  .menu [aria-haspopup="true"] ~ ul { display: none; }
  .menu-bar {  position: relative;  }
  .menu-bar > li > [aria-haspopup="true"]:after { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowBottom.svg#accent'); }
  .menu-bar > li > [aria-haspopup="true"]:hover:after { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowBottom.svg#light'); }
  
  .menu-bar > li > [aria-haspopup="true"]:focus ~ ul {
    display: flex; flex-direction:row;     transform-origin: top;
    animation: dropdown 0.2s ease-out;
  }
  .menu-bar > li > [aria-haspopup="true"] ~ ul:hover {
    display: flex;
  }
  .menu-bar > li:focus-within > [aria-haspopup="true"] ~ ul {
    display: flex;
  }
  .menu-bar > li > [aria-haspopup="true"]:focus,
  .menu-bar > li:focus-within > [aria-haspopup="true"],
  .menu-bar > li:hover > a {
   ...