Customize Side Navigation Menu

Customize Side Navigation Menu
Posted on May 31, 2020 |
227 views

Customize Side Navigation Menu

How To Create a Customize Side Navigation Menu

BG-Pattern Sidebar is a basic sidebar menu page layout for Bootstrap websites with off canvas navigation on smaller screen sizes. Our Sidebar navigation can make your life easier by providing a starting, simple Sidebar navigation with sub-categories for your next project. It is a great starting point for minimal dashboard web apps, or general websites with a toggleable sidebar.

Features

  • Sidebar navigation is Bootstrap Responsive.
  • Navigation bar with toggle button on mobile or tab screens.
  • Page content area is Responsive.
  • Off-canvas navigation toggling on mobile or tab screens.
  • Multi level navigation menu with icons.

Creating the structure

The HTML structure is composed by 2 main elements : navigation brand logo and navigation menu structure.

Brand logo or name

<div class="navbar-brand"><a href="#"><h1>BG <span>Pattern</span></h1></a></div>

Custom navigation menu

<nav class="navbar myNav mr-auto justify-content-end">    
                <ul>
                	<li class="sidebar-brand"> BG Pattern </li>
                    <li><a href="#"><i class="fa fa-home"></i>Home</a></li>  
                    <li><a href="#"><i class="fa fa-info"></i>About Us</a></li>  
                    <li><a href="#"><i class="fa fa-folder-o"></i>Categories</a>
                    	<ul>
                            <li><a href="#"><i class="fa fa-folder-o"></i>Dark Category</a>
                            	<ul>
                                    <li><a href="#">Dark</a></li> 
                                    <li><a href="#">Background</a></li>
                                </ul>
                            </li> 
                            <li><a href="#"><i class="fa fa-folder-o"></i>Background Category</a></li>
                            <li><a href="#"><i class="fa fa-envelope-o"></i>Web Category</a></li>
                        </ul>
                    </li>  
                    <li><a href="#"><i class="fa fa-newspaper-o"></i>Blog</a></li>  
                    <li><a href="#"><i class="fa fa-list-ul"></i>Top Tags</a>
                    	<ul>
                            <li><a href="#">Dark</a></li> 
                            <li><a href="#">Background</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="fa fa-envelope-o"></i>Contact us</a></li>  
                </ul>
                
            </nav>

Close navigation button

<div class="navclose"><i class="fa fa-close"></i></div>

Navigation button

<div class="navbtn"><i class="fa fa-bars"></i></div>

Js function that perform toggling.

$('.navbtn').click(function(){
	$("nav,.navclose").addClass("show");
});
$('.navclose').click(function(){
	$("nav,.navclose").removeClass("show");
});

If you want to toggle on click on .navbtn write this code.

$('.navbtn').click(function(){
	$("nav,.navclose").toggleClass("show");
});
$('.navclose').click(function(){
	$("nav,.navclose").removeClass("show");
});

Result

Navigation menu toggle on @media screen and (max-width:991px)

Download source code

BGpattern Tags

About BGpattern

We’re having the large vector graphics and background patterns in the web world. Here you can explore the creations of our art from around the world, or just find that perfect graphic or background pattern (texture) for your next project. BG-pattern makes it easy for you to explore thousands of graphics and background pattern by us. All the files are free to download and, having the license.