【jQuery】シンプルなjQueryマルチレベルメニューバーMultilevel Menubar

Multilevel MenubarはHTML、CSS、jQueryを使って作成されたシンプルなjQueryのマルチレベルメニューバー。

HTML

<nav id="header">
<span>Woltbit Demo</span>
<span id="menubar" class="fright">Menu <i class="fa fa-align-justify"></i></span>
</nav>
<div id="page-wrapper">
<ul id="menu_ul">
<li>
<a href="#">Home</a>
<ul>
<li>
<a href="http://www.google.com" target="_blank">Home 1</a>
</li>
<li>Home 2
<ul>
<li>Inner Home2 1</li>
<li>Inner Home2 2</li>
<li>Inner Home2 3</li>
</ul>
</li>
<li>Home 3
<ul>
<li>Inner Home3 1</li>
<li>Inner Home3 2</li>
<li>Inner Home3 3</li>
</ul>
</li>
<li>Home 4</li>
</ul>
</li>
<li>
<a href="#">About</a>
<ul>
<li>About 1
<ul>
<li>Inner About 1</li>
<li>Inner About 2</li>
<li>Inner About 3</li>
</ul>
</li>
<li>About 2</li>
</ul>
</li>
<li>
<a href="#">Page</a>
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li><a href="http://www.yahoo.com" target="_blank">Contact</a></li>
</ul>
</div>
<div id="main-content">
<p>Click The Menubar Icon</p>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/index.js"></script>
 
multilevel menubar

【jQuery】シンプルなjQueryマルチレベルメニューバーMultilevel Menubar

  • LATEST
  • RELATED
  • POPULAR