【CSS】シンプルなメガナビゲーションメニュー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ライセンス

 
Mega Nav

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

  • LATEST
  • RELATED
  • POPULAR