CSS

【CSS】シンプルなメガナビゲーションメニューMega Nav

August 3, 2016
Mega Nav

Mega NavはCSSで実装されたシンプルなメガナビゲーションメニュー

   <div class="menu-wrapper" role="navigation">
      <ul class="nav" role="menubar">
        <li role="menuitem">
          <a href="#">Menu Item 1</a>
          <div class="mega-menu" aria-hidden="true" role="menu">
            <div class="nav-column">
              <h3>Heading 1</h3>
              <ul>
                <li role="menuitem"><a href="#">Item 1</a></li>
                <li role="menuitem"><a href="#">Item 2</a></li>
                <li role="menuitem"><a href="#">Item 3</a></li>
                <li role="menuitem"><a href="#">Item 4</a></li>
                <li role="menuitem"><a href="#">Item 5</a></li>
                <li role="menuitem"><a href="#">Item 6</a></li>
                <li role="menuitem"><a href="#">Item 7</a></li>
              </ul>
            </div>
            <div class="nav-column">
              <h3>Heading 2</h3>
              <ul>
                <li role="menuitem"><a href="#">Item 1</a></li>
                <li role="menuitem"><a href="#">Item 2</a></li>
                <li role="menuitem"><a href="#">Item 3</a></li>
              </ul>
              <h3>Heading 3</h3>
              <ul>
                <li role="menuitem"><a href="#">Item 1</a></li>
                <li role="menuitem"><a href="#">Item 2</a></li>
              </ul>
            </div>
            <div class="nav-column">
              <h3>Heading 4</h3>
              <ul>
                <li role="menuitem"><a href="#">Item 1</a></li>
                <li role="menuitem"><a href="#">Item 2</a></li>
                <li role="menuitem"><a href="#">Item 3</a></li>
                <li role="menuitem"><a href="#">Item 4</a></li>
                <li role="menuitem"><a href="#">Item 5</a></li>
              </ul>
            </div>
            <div class="nav-column">
              <h3 class="highlight">Highlighted Heading</h3>
              <ul>
                <li role="menuitem"><a href="#">Item 1</a></li>
                <li role="menuitem"><a href="#">Item 2</a></li>
              </ul>
              <h3 class="highlight">Highlighted Heading</h3>
              <ul>
                <li role="menuitem"><a href="#">Item 1</a></li>
                <li role="menuitem"><a href="#">Item 2</a></li>
              </ul>
            </div>
          </div>
        </li>
        <li role="menuitem"><a href="#">Menu Item 2</a></li>
        <li role="menuitem"><a href="#">Menu Item 3</a></li>
        <li role="menuitem"><a href="#">Menu Item 4</a></li>
        <li role="menuitem"><a href="#">Menu Item 5</a></li>
        <li role="menuitem" class="nav-search">
          <form action="#">
            <label for="search"></label>
            <input type="text" id="search" title="Search..." placeholder="Search...">
            <input type="submit" value="">
          </form>
        </li>
      </ul>
    </div>

CSS

.mega-menu {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0 0 3px 3px;
  opacity: 0;
  position: absolute;
  transition: all .3s ease .15s;
  visibility: hidden;
  width: 100%;
}

メニュー項目の上にマウスを移動するまで隠す。

li:hover > .mega-menu {
  opacity: 1;
  overflow: visible;
  visibility: visible;
}

MITライセンス