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.

Click here to download it.

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:

how to create left navigation menu in html using jQuery and bootstrap

I hope this article will help to you.


  Modified On Sep-07-2019 12:18:15 AM

Leave Comment