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

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.


Last updated:9/7/2019 12:18:15 AM
Anonymous User

Anonymous User

I am a content writter !

0 Comments

Leave Comment