【jQuery】アコーディオンメニュープラグインjQuery Accordion Menu Multilevel

jQuery Accordion Menu MultilevelはアコーディオンメニューjQueryプラグイン。

CSS&JS

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

HTML

<div class="content">
<div class="colors"><a href="javascript:void(0)" class="default"> </a><a href="javascript:void(0)" class="blue"> </a><a href="javascript:void(0)" class="white"></a></div>
<nav>
<div id="menu" class="menu">
<div class="menu-header"> ACCORDION MENU </div>
<ul>
<li class="active"><a href="#"><i class="fa fa-home"> </i>Home</a></li>
<li><a href="#"><i class="fa fa-file-image-o"> </i>Gallery</a>
<ul class="submenu">
<li><a href="#"> Graphics</a></li>
<li><a href="#"> Photoshop</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-cog"> </i>Services</a>
<ul class="submenu">
<li><a href="#"> Web Design </a>
<ul class="submenu">
<li><a href="#"> WordPress</a></li>
<li><a href="#"> Joomla</a></li>
</ul>
</li>
<li><a href="#"> Hosting</a></li>
<li><a href="#"> Design </a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-newspaper-o"> </i>News<span class="menu-label"> 8 </span></a></li>
<li><a href="#"><i class="fa fa-user"> </i>About</a></li>
<li><a href="#"><i class="fa fa-envelope"> </i> Contact</a></li>
</ul>
<div class="menu-footer"> @ Test</div>
</div>
</nav>
</div>
 
jQuery Accordion Menu Multilevel

【jQuery】アコーディオンメニュープラグインjQuery Accordion Menu Multilevel

  • LATEST
  • RELATED
  • POPULAR