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

jQuery Accordion Menu MultilevelはアコーディオンメニューjQueryプラグイン。
<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>
<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>