liAccordion / accordion
Multi Level menu

Color templates

Select the desired color
Or set your custom color

Main Layout

Marker Shape

Marker Sign

Marker Position

Color Type

RESULT

  • View source

      Include files <head> ...[THIS CODE]... </head>

      <!--If you have already use jquery, then this line is not necessary--> 
      <script src="js/jquery-1.11.1.min.js"></script> 
      
      <!-- Plugins files-->
      <link rel="stylesheet" href="css/liAccordion.css">
      <script src="js/jquery.liAccordion.js"></script> 
      

      Custom CSS <style> ...[THIS CODE]... </style>

      There will be generated CSS

      Plugins Initialization <head> ...[THIS CODE]... </head>

      <!-- Initialization of plugin --> 
      <script>
      $(function(){
      	$('.ini_class').liAccordion({
      		clicablelink:true			//It enables or disables the clickable links that have attachments
      	});
      })
      </script> 
      

      HTML <body> ...[THIS CODE]... </body>

      <ul class="ini_class" data-colortheme="Pink" data-layout="menu" data-markershape="square" data-markersign="triangle" data-markerpos="left" data-colortype="bg">
      	<li>
      		<a href="#">Themeforest</a>
      		<ul>
      			<li>
      				<!-- Class "cur" opens this category -->
      				<a class="cur" href="#">All Items</a>
      				<ul>
      					<li><a href="#">Popular Files</a></li>
      					<li><a href="#">Featured Files</a></li>
      					<li><a href="#">Top New Files</a></li>
      				</ul>
      			</li>
      			<li>
      				<a href="#">WordPress</a>
      				<ul>
      					<li><a href="#">Popular Items</a></li>
      					<li><a href="#">All Items</a></li>
      				</ul>
      			</li>
      			<li>
      				<a href="#">HTML</a>
      				<ul>
      					<li><a href="#">Popular Items</a></li>
      				</ul>
      			</li>
      		</ul>
      	</li>
      	<li>
      		<a href="#">CodeCanyon</a>
      		<ul>
      			<li><a href="#">All Items</a>
      				<ul>
      					<li><a href="#">Popular Files</a></li>
      					<li><a href="#">Featured Files</a></li>
      					<li><a href="#">Top New Files</a></li>
      					<li><a href="#">Follow Feed</a></li>
      				</ul>
      			</li>
      			<li><a href="#">PHP Scripts</a>
      				<ul>
      					<li><a href="#">Popular Items</a></li>
      					<li><a href="#">All Items</a></li>
      				</ul>
      			</li>
      		</ul>
      	</li>
      	<li>
      		<a href="#">VideoHive</a>
      		<ul>
      			<li><a href="#">All Items</a>
      				<ul>
      					<li><a href="#">Popular Files</a></li>
      					<li><a href="#">Featured Files</a></li>
      				</ul>
      			</li>
      			<li><a href="#">After Effects Project Files</a>
      				<ul>
      					<li><a href="#">Popular Items</a></li>
      					<li><a href="#">All Items</a></li>
      					<li><a href="#">Broadcast Packages</a></li>
      				</ul>
      			</li>
      		</ul>
      	</li>
      </ul>

Responsive Multi Level Accordion Navigation

DOWNLOAD liAccordion