Introduction:
In this article, we are going to explain what is bs_leftnavi.js jQuery plugin or how to design vertical nav menu which allows you to expand/collapse menu categories with smooth slide effects with an example.
Description:
This is a very small jQuery plugin for creating a Bootstrap style vertical nav menu which allows you to expand/collapse menu categories with smooth slide effects.
Example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="/Scripts/jquery-3.3.1.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<script src="/Scripts/bootstrap.js"></script>
<script src="bs_leftnavi.js"></script>
<link href="bs_leftnavi.css" rel="stylesheet" />
</head>
<body>
<div class="gw-sidebar">
<div id="gw-sidebar" class="gw-sidebar">
<div class="nano-content">
<ul class="gw-nav gw-nav-list">
<li class="init-un-active"> <a href="javascript:void(0)">
<span class="gw-menu-text"><b> NavigationMenu</b></span></a> </li>
<li class="init-arrow-down"> <a href="javascript:void(0)">
<span class="gw-menu-text">Category 1</span> <b class="gw-arrow"></b> </a>
<ul class="gw-submenu">
<li> <a href="javascript:void(0)">Menu 1</a> </li>
</ul>
</li>
<li class="init-arrow-down"> <a href="javascript:void(0)">
<span class="gw-menu-text">Category 2</span>
<b class="gw-arrow icon-arrow-up8"></b> </a>
<ul class="gw-submenu">
<li> <a href="javascript:void(0)">Menu 1</a> </li>
<li> <a href="javascript:void(0)">Menu 2</a> </li>
<li> <a href="javascript:void(0)">Menu 3</a> </li>
</ul>
</li>
<li class="init-arrow-down"> <a href="javascript:void(0)">
<span class="gw-menu-text">Category 3</span> <b></b> </a>
<ul class="gw-submenu">
<li> <a href="javascript:void(0)">Menu 1</a> </li>
<li> <a href="javascript:void(0)">Menu 2</a> </li>
<li> <a href="javascript:void(0)">Menu 3</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Output:
I hope this article will help to you.
Leave Comment