Inspired by the bootstrap sidebar menu from wrapbootstrap.com, I create a cool simple sidebar menu using bootstrap 3 and font awesome framework.
Simple sidebar menu / vertical dropdown menu was adopted from example simple sidebar from startbootstrap.com , i just modify to be more cool. The advantages from this sidebar, when the screen size equal to 768px and toggle button is clicked, the sidebar will be hidden and will only display the menus icon.
To beautify the icon in my bootstrap sidebar menu, i use the font awesome icon framework in order to the sidebar menu look more attractive .
View my bootstrap left sidebar menu as shown below
Table of Contents
1. Make sure you have downloaded the boostrap 3 framework here
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Bootstrap is a framework for building responsive web design. Which means that the web interface created by bootstrapping will adjust the screen size of the browser we use both in desktop, tablet or mobile device. This feature can be enabled or disabled according to our own desires. By bootstrapping we also can build dynamic or static web.
2. Download the font awesome css to beautify the appearance of the icon here
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS “font awesome”.
Font awesome is a font web formed several icons for web interface, commonly used for Bootstrap, there are more than 100+ icons in Font awesome and will increase each its release.
3. Download Jquery-1.11.2.min.js here
4. Simple sidebar menu original file from startbootstrap.com. I just change some css file from simple sidebar menu from startbootstrap.com and add new javascript
Create css file as simple-sidebar.css and enter the following code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 |
/* Toggle Styles */ #wrapper { padding-left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; overflow: hidden; } #wrapper.toggled { padding-left: 250px; overflow: scroll; } #sidebar-wrapper { z-index: 1000; position: absolute; left: 250px; width: 0; height: 100%; margin-left: -250px; overflow-y: auto; background: #000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled #sidebar-wrapper { width: 250px; } #page-content-wrapper { position: absolute; padding: 15px; width: 100%; overflow-x: hidden; } .xyz{ min-width: 360px; } #wrapper.toggled #page-content-wrapper { position: relative; margin-right: 0px; } .fixed-brand{ width: auto; } /* Sidebar Styles */ .sidebar-nav { position: absolute; top: 0; width: 250px; margin: 0; padding: 0; list-style: none; margin-top: 2px; } .sidebar-nav li { text-indent: 15px; line-height: 40px; } .sidebar-nav li a { display: block; text-decoration: none; color: #999999; } .sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255,255,255,0.2); border-left: red 2px solid; } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 65px; font-size: 18px; line-height: 60px; } .sidebar-nav > .sidebar-brand a { color: #999999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } .no-margin{ margin:0; } @media(min-width:768px) { #wrapper { padding-left: 250px; } .fixed-brand{ width: 250px; } #wrapper.toggled { padding-left: 0; } #sidebar-wrapper { width: 250px; } #wrapper.toggled #sidebar-wrapper { width: 250px; } #wrapper.toggled-2 #sidebar-wrapper { width: 50px; } #wrapper.toggled-2 #sidebar-wrapper:hover { width: 250px; } #page-content-wrapper { padding: 20px; position: relative; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled #page-content-wrapper { position: relative; margin-right: 0; padding-left: 250px; } #wrapper.toggled-2 #page-content-wrapper { position: relative; margin-right: 0; margin-left: -200px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; width: auto; } } |
Create a javascript file as sidebar_menu.js and enter the following code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
$("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); }); $("#menu-toggle-2").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled-2"); $('#menu ul').hide(); }); function initMenu() { $('#menu ul').hide(); $('#menu ul').children('.current').parent().show(); //$('#menu ul:first').show(); $('#menu li a').click( function() { var checkElement = $(this).next(); if((checkElement.is('ul')) && (checkElement.is(':visible'))) { return false; } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#menu ul:visible').slideUp('normal'); checkElement.slideDown('normal'); return false; } } ); } $(document).ready(function() {initMenu();}); |
Create index html and copy the following code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Simple Sidebar - Start Bootstrap Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/simple-sidebar.css" rel="stylesheet"> <link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-default no-margin"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header fixed-brand"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="menu-toggle"> <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> </button> <a class="navbar-brand" href="#"><i class="fa fa-rocket fa-4"></i> SEEGATESITE</a> </div><!-- navbar-header--> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active" ><button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span></button></li> </ul> </div><!-- bs-example-navbar-collapse-1 --> </nav> <div id="wrapper"> <!-- Sidebar --> <div id="sidebar-wrapper"> <ul class="sidebar-nav nav-pills nav-stacked" id="menu"> <li class="active"> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x "></i></span> Dashboard</a> <ul class="nav-pills nav-stacked" style="list-style-type:none;"> <li><a href="#">link1</a></li> <li><a href="#">link2</a></li> </ul> </li> <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span> Shortcut</a> <ul class="nav-pills nav-stacked" style="list-style-type:none;"> <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link1</a></li> <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link2</a></li> </ul> </li> <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-cloud-download fa-stack-1x "></i></span>Overview</a> </li> <li> <a href="#"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-cart-plus fa-stack-1x "></i></span>Events</a> </li> <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-youtube-play fa-stack-1x "></i></span>About</a> </li> <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-wrench fa-stack-1x "></i></span>Services</a> </li> <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a> </li> </ul> </div><!-- /#sidebar-wrapper --> <!-- Page Content --> <div id="page-content-wrapper"> <div class="container-fluid xyz"> <div class="row"> <div class="col-lg-12"> <h1>Simple Sidebar With Bootstrap 3 by <a href="https://seegatesite.com/create-simple-cool-sidebar-menu-with-bootstrap-3/" >Seegatesite.com</a></h1> <p>This sidebar is adopted from start bootstrap simple sidebar startboostrap.com, which I modified slightly to be more cool. For tutorials and how to create it , you can read from my site here <a href="https://seegatesite.com/create-simple-cool-sidebar-menu-with-bootstrap-3/">create cool simple sidebar menu with boostrap 3</a></p> </div> </div> </div> </div> <!-- /#page-content-wrapper --> </div> <!-- /#wrapper --> <!-- jQuery --> <script src="js/jquery-1.11.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/sidebar_menu.js"></script> </body> </html> |
Finish!! Perhaps the sidebar is not yet perfect. But it could be a tutorial / ideas to create bootstrap sidebar nicer than mine. Simply modify sidebar menu accordance with your wishes. You can see my another bootstrap tutorial here
Last update script :
- 9/9/2015 – fixed bug.
Thanks you 🙂
you’re welcome 🙂
Hi
I can’t download script below thx
please open locked content from the button above 🙂
thank you
Muchas gracias! Thank you very much! 🙂
Thank’s exactly what I needed
Thanks you very much! I’m tweaking it for my RTL needs right now.
Although I’m trying to get over a little bug – try changing font size to 16px and watch the li items getting indented increasingly…
you’re welcome.. maybe this can help you http://goo.gl/nho8g
Did you ever find a solution for this? I Have a ton of links that need to be nested in the accordions and am running out of room. If i adjust the line-height of the sidebar it and causes the elements to be indented. Is there a way to keep this from happening?
It appears that the issue is caused by the font awesome icons, which dont fit when line-height is reduced. this can be solved by changing the span class fa-lg to fa-sm and then reducing the line-height parameter.
Thank You…..Works Great 🙂
the main content is not responsive, responsive feature not working… text width area still on fixed width
hello roqeem,
sory i dont understand what you mean 🙂
Hello,
Is it possible to do the same thing but to have the sidebar on the left and right side ?
yes, its possible
When you toggle the sidebar to only show the icons, the page content does not expand. I have tried a few things, but I am not able to figure out how to get the page content wrapper to expand to the page when you toggle the sidebar. Can you think of a solution?
E.g. If you toggle the sidebar in a desktop media, you will see the content does not expand, it just moves left.
Please check my new demo again here and download my new script again. thx 🙂
I am not sure where my previous comment went, but it stated a bug where the page content wrapper does not expand when the sidebar is toggled to the left. You will notice when you hit the toggle button, the content just moves to the left but its container is not expanded. Any fix for this?
Helo XD, I reupload my script, please check and download again, hope as you wish 🙂
That did the trick. Thanks!
Hi
Could you let me know what exactly was changed in the new script to make the page content expandable while the navigation bar is shrinked
Sorry I had forgotten, because in 2015 I change 🙂
Hello. how to change the color of the side bar? thank you so much
#sidebar-wrapper {
background-color: #your-color;
}
hello, can you create a tutorial how they created the SB Admin 2? thank you
Hi there, everything is going well here and ofcourse every one is
sharing information, that’s really good, keep up writing.
And why I can’t use the latest jquery ?
I have tried to change from script src=”js/jquery-1.11.2.min.js” to script src=”js/jquery-1.11.3.min.js”
and then it stop working…
But thanks… it’s really good stuff…
thank you, i will check it 🙂
Thank you! Good Post…
#sidebar-wrapper
{
height : 100%
}
causing default scroll on page load
Do anyone facing the same issue?
#sidebar-wrapper
{ height : 100% }
causing scroll on initiial browser loading . Do any one facing the same issue ?
I will check it ASAP 🙂
#sidebar-wrapper
{ height : 100% }
causing scroll on initiial browser loading
1. Suppose if we are having a header & footer in page and placed the sidebar menu with the above style
Header style
——————
.main-header {
top: 0;
right: 0;
left: 0;
height: 5%;
background-color: #009530;
border-color: transparent;
margin: 0;
}
footer
———-
footer {
bottom: 0;
background-color: #009530;
color: #fff;
width: 100%;
position: fixed;
padding-left: 15px;
padding-right: 15px;
height: 60px;
z-index: 1000;
}
Copyright 2015 © Schneider Electric. All rights reserved.
This will also cause scrolling on browser. currently we have handled with height:calc(100% – 55px); for fixing the scroll issue. but i think this is not a proper solution.
2. One more suggestion instead of width: 250 px specifying in pixels, is it easier to modify in percentage wise?
Remove height : 100% from #sidebar-wrapper and add the following:
#sidebar-wrapper {
top: 53px; /*the height of the navbar*/
bottom: 0;
overflow-x: hidden;
}
Btw., the navbar height of this demo is 56px.
Thank You sir
Link : https://www.dropbox.com/s/5bed73ug9vb31oq/issue-slide.mov?dl=0
Not works well in safari OS 10.10, when side bar button is pressed to hide the menu, content glitches
the css animation doesnt work well in safari, i will fix ASAP .. thx 🙂
Just wondering if you were able to look into this? I’m seeing the same issue.
Thank you very much this is great!
Is there a way to tweak javascript or css so that the menu bar default state is hidden (shrinked)?
Also, I don
t know why, but it doesn
t show icons on my computer, just some strange empty rectangles.Thank you,
Cheers
1. If you need to hidden the menu bar default state ,edit script below on sidebar_menu.js
$(document).ready(function() {initMenu();$("#menu-toggle-2").click();});
2. Check with f12 for strange empty rectangles icon
Thank you very much for replay!
Yes, I wanted the menu bar to be collapsed all the time but to keep it popping out on mouse over. I tried with changing the sidebar_menu.js to something like this:
$(document).ready(function() {initMenu();
$(“#wrapper”).toggleClass(“toggled”)=true;
});
And It is working with this code, the menu bar is collapsed by default and it pops out on mouse over, but only on big and medium resolution. When the window is resized on small resolution (like mobile) then menu bar shows again in full width and I want to prevent that.
My guess is that it has to do with “navigation bar” (on the top of the page) collapsing state. But I don`t know how to handle it.
Thank you very much for your help 🙂
Thank you, it is great
I tried this code but when ever I run I get the error ” 0x800a138b – JavaScript runtime error: Cannot assign to a function result”
Sory i don’t understand your error , can you send me the screenshot ?
Great but I find your right side space is not expanding when tested and i removed the overflow hidden in your css file and the right side is expanding where i would like to add some content running to pages.
Similary i need to expand the left side menu. I tested adding some more menu elements but its fixed and does not scroll down to show the rest of the menu elements. What to do sir?
how do i hide the nav bar when page loads, when i click on the toggle button i need it to load the menu
to hide navbar when page load, you need add new jquery script with load event, then use click event to execute it
Hi. I wanted to change the color of the tabs after clicking them. I’ve had progress (I managed to change the color of the other tabs) but I cant make the Dashboard tab lose it color when it is not the clicked tab. How can I do it? Thank youl.
sory, i dont understand what you mean :). please explain me more
Never mind. I already solved my problem. But I still have another problem, how can I make the tabs toggable? I mean when I click on the tab, it shows the content, but when I click it again when the contents are shown, it doesn’t hide its contents. How can I make it like that? Thank you so much.
Hello, is it possible to remember the state of the sidebar (collapsed / expanded) when the page refreshes?
Thank you.
maybe you can combine it with session php
Good day i wonder if i can disable the hover button and do this automatically when the page load, and if you can help me with that.
combine it with jquery to disable the hover
Hey love this but my only issue is that it doesn’t go 100% height. If I add anything to the wrapper on the right side more than around a 1000px the sidebar stops and the content keeps going in the same size as above. So I added 2000px to the height property and the sidebar gets to the right length but that means I have to figure out the exact height. Obviously I can do this but wondering why the 100% height wouldn’t work.
I redid everything and added the js file properly so got that working.
I am wondering how to put a marker on the sidebar link that is active. Like when you click the shortcuts menu and it goes to that page. Instead of say a color change you put a triangle at the edge so it picks up the color of the main content area. I have seen this on other sites but can’t figure out how they do it. Thanks for the help!
Awesome, thanks ! just a little change that I had to make in the .js file:
$(document).on(“click”, “#target-id”, function(e){
{{ rest of the stuff }}
});
without this collapse button was not working. Otherwise perfect !
Unable to download the script, kindly assist.
please click tweet or facebook like or g+ button, then the download link will open
how to make this page like site1.master … any new form will be fire-up within this main page. tq
sory i don’t understand…
Great Menu.
When we click on the content brought up in the center area after clicking a left side menu option the color of the menu changes to
background: rgba(255, 255, 0, 0.701961);
When we click the menu we have our yellow color by:
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
background: #ffff00;
color:black;
}
in simple-sidebar.css
Is there a way that we can keep the selected left menu option as #ffff00, preventing:
background: rgba(255, 255, 0, 0.701961);
from being the background color?
Thanks!
I found the issue. It was in my code.
Great Menu!
Thanks for the great work you did with this.
How can the I make only the page content scroll while both the nav bars remain fixed
Awesome post. Trying hard to get this to work with a sticky footer. Is this possible?
great work but how make right to left , i changed all (****-right) or (right) to (***-left) or (left) and vise versa in css file also i use “” over bootstrap 3.3.6 , to rlt language , but always icons on the left and text on the right , how solve it? Note: iam new in those things
sorry in “” miss that link
cdn.rawgit.com/morteza/bootstrap-rtl/v3.3.4/dist/css/bootstrap-rtl.min.css
This works great but I want to this to be like master so it can apply to all pages…
Hi, great tutorial, but how can i apply this to ASP.NET MVC app ?
Hello mro,
Sory, i never use ASP.NET 🙂
Hi, excellent work. This menu can have a third level? Or only can have two levels.
Thankd a lot
I never tried for the third level, you must modify little
Thanks for your nice work. Could you also explain that how can I port this sidebar to the WordPress?
Hi Sigit, thanks you so much for your code, it is working perfectly and very elegant, instructions how to use so clear. Thanks a lot , great job!!
Hi! This is great! Wonderful work. I have a question.
I see that if i uncomment $(‘#menu ul:first’).show(); I can get the first UL to expand by default. How can I make it so that the second or third or fourth is expanded by default? my first guess — ul:second doesn’t do it… internet hasn’t helped me find how to reference these subsequen UL items …. Thanks!
A little searching in jquery — I found eq(n) where n is the index — so, menu ul:eq(3) will show fourth menu item… Thanks anyways!
thank you very much for the tutorial 😉 . but the icon didnt appear 🙁 . maybe there is something i missing?
check css file and assets please
How can we make the stack collapsible using the same line item link after it’s expanded? The only way to close them is by clicking another pill that’s also expandable.
Hey, great job! Just I’ve encoutered the problem of height 100% with page header of 60px causing 60px of vertical scroll in page. Have you find any solution? the height:calc(100% – 60px); statment seems to not working!
Thanks in advance!
Thanks for this excellent tutorial.
By your example, once I click the sidebar menu on “Dashboard” or “Shortcut”, it shows its corresponding submenu “link1” and “link2.”
Is it possible that if I clink the same menu again (dashboard or Shortcut) then it collapses its submenu.
The expected scenario is:
When I click Dashboard in 1st time, it shows its submenu.
When I click Dashboard (not click Shortcut) in 2nd time, it collapses its submenu.
Thank you very much.
Terima kasih pak sigit, tutornya OK..
terimakasih pak, sama sama 🙂
Hello, awesome job you did here! Could you give me a hint of how to stop the menu toggleing? I’m noob with jQuery 🙂
Sorry, how to prevent the menu from toggling on mouse over ?
delete from css
#wrapper.toggled-2 #sidebar-wrapper:hover {
width: 250px;
}
Great tut!
Is it possible to have side bar on desktop and standard top bar on mobile?
How can this be done?
Also is it possible to click a link to show the submenu and click again to hide the submenu?
Thanks
Sory, it is just sidebar menu.
Hi, thanks for the great work. I noticed that the sidebar disappear in small devices. Do you know why and how to fix it. Another thing, can I use two instances (left and right) in one page?
Yes, the sidebar disappear in small devices and you can show the sidebar by click button toggle in the the right top. Yes you can add two instances but i never do it
Hello,
Your tutorial includes expanding the UL when clicked to show sub items (Link 1 / Link 2).
How can it be amended so that a second click hides the sub items again?
Thanks
I figured it out:
function initMenu() {
$(‘#menu ul’).hide();
$(‘#menu ul’).children(‘.current’).parent().show();
//$(‘#menu ul:first’).show();
$(‘#menu li a’).click(
function () {
var checkElement = $(this).next();
if ((checkElement.is(‘ul’)) && (checkElement.is(‘:visible’))) {
$(‘#menu ul:visible’).slideDown(‘normal’);
checkElement.slideUp(‘normal’);
return false;
}
if ((checkElement.is(‘ul’)) && (!checkElement.is(‘:visible’))) {
$(‘#menu ul:visible’).slideUp(‘normal’);
checkElement.slideDown(‘normal’);
return false;
}
}
);
}
Your facebook ‘likes’ were 721 when I followed your instruction in order to download your cool sidebar script. But after I augmented the figure to 722, I still could not download the script. It still remained ‘Locked’.
check again please
I just did my friend. But when I clicked on the Facebook icon, all I saw was just the figure 726. How many times do I need to ‘like’ your site on Facebook before I am able to download the script? Please expatiate exactly on how one might succeed in this download. Cheers, Sigit
I checked again, but still could not download the script. How many times is someone supposed to go to Facebook and ‘like’ your site before being able to download the script please?
Cheers.
Great job! Thanks a lot!
Hi great work! Thank you. How can I fully hide the sidebar menu when toggled to close? (No icons appearing and just full content showing)
you need change the css style
Thanks for the script. It is grant. I had a question. Would it be possible to have two branding for normal and mobile viewing? Also how would you add more links to the right of the header strip as it would be good for some informative labels maybe. I appreciate your help.
Ben
hello,
When i Click on the submenu (Link 1/ Link 2) with a a ref. (Ajax.ActionLink) the side bar collapses.
How can i stop it??
I tried several things in function initMenu(). but nothing works..
Who can help me?
can i see your code ?
Sorry the form trunk my code,
maybe i can send you by mail
I’d be glad to help you ,but no guarantees i’ll do my best to assist. please send to my email here : sgt86sloamazon@gmail.com 🙂
This is amazing. Is there a way to integrate this into Drupal 7. I’m using Bootstrap 3 theme there and trying to find a way to make my menu look like in this tutorial.
Hello Sash,
sory i never use drupal 🙂
Looks great! Thank you, looking forward to reviewing your tutorial. Any tutorials on JSF and bootstrap or Facelets Templates
Really good one. But I have observed one issue.
1. Open sub-menu of Dashboard
2. Click menu toggling
3. Sub-menu items / icons are not displaying.
I have observed this is because sub-menu size is less and also whenever hover it highlights small portion instead of full line.
Please help me to resolve the same.
How can I please comment with return dialog with you? I simply love your adaptation and have a question.
how will i implement Ajax for loading contents when a menu item is clicked.
Simple example, give new attribute on a element
[php]<a href=’#’ class=’go-to-menu’ menu-id=’3′ rel="nofollow">menu 3</a>[/php]
[php]
$(document).on(‘click’,’.go-to-menu’,function(){
var menu = $(this).attr(‘menu-id’);
var value = {
menu-number= menu;
};
$.ajax(
{
url : "menu.php",
type: "POST",
data : value,
success: function(data, textStatus, jqXHR)
{
// load content here
},
error: function(jqXHR, textStatus, errorThrown)
{
alert(textStatus);
}
});
});
[/php]
I have not tried the above code, but that’s the basic code..hope useful
can when the page load Close the Navigation on click open… now by start the site is open the Navigation many thx!!
sory i dont understand with your question 🙁
Hi, I’ve a question when in the page we’ve divs that generate scroll the sidebar menu not use the height 100%, appear a white space under of this.
You can see this here: https:// postimg. org/image/ga156e4gj/
And here you can see the issue of the height:
———— hidden url ——————
thank you for correcting,
fix the css like code below
[php]
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
overflow: hidden;
background-color: #000;
}
#sidebar-wrapper {
z-index: 1000;
position: absolute;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
overflow: hidden;
}
#page-content-wrapper {
position: absolute;
padding: 15px;
width: 100%;
overflow-x: hidden;
background-color: white;
}
[/php]
Hope fix your problem
Hi, I tested the css and work, now the issue persist when the menu initialize with this code in the function initMenu() $(“#wrapper”).toggleClass(“toggled toggled-2”); for make the menu show only icons.
Here you can see the issue:
https : //mega.nz/#!TVNATBQQ!HCbWotWRvwcpBhO2LqDc8HWABIHps_WzrgxaKiK0DmM
sory i don’t understand with your problem. Can you explain me more detail ?
Hi, the issue is this when the menu (sidebar) initialize showing only the icons (effect that apply the button in the navbar) Here is when under of the sidebar appear a white space, the sidebar not complete to the end of the page.
Hi Sir.
Great job. Thanks.
How can make a second click to hide the sub item Dashboard again?
Thanks in advance
add toggle event jquery on that class 🙂
Hi Sir.
Great job. Thanks.
Hello,
How i can fix the toogle button. it always resize according the screen size. so on big screen it is far away on the right of the slidebar.
Wow, Thank you for this feature really awesome
Is it possible to hide the sidebar on page load instead of on button click
Using jquery
[php]
$(document).ready( function ()
{
$("#menu-toggle-2").toggle();
}
[/php]
I am using this for the master page and the problem I am facing is the display is showing in the middle of the page
hay thank you for sharing , i am trying to include it in angular 2 project but am having some difficulties using jquery in angular 2 ,
please can you give me the side bar menu in javascript or some other solution and thannk you so much
sory, i never use angular 🙂
This is a great sidebar, thanks for sharing:) Can you help me with a modification? I would like to have the toggle menu button at the very left on the navbar (where u have placed the brand name) on both desktop and mobile devices. And a logo image at the middle of the navbar. I would really appreciate of you can help me, couse i can t figure it out :/
Awesome navbar. One question, is it possible to add the toggle button that is currently on the top header to actually display inside the left navigation bar?
Hi Sigit, Unable to download.
Thanks
Dear nani,
yes, you must share that locked content in the bottom article to download this file 🙂
Hi, greata tutorial!
But my problem is that it doesn’t show sidebar menu and SEEGATESITE left icons…
can i show your screencapture ?
Good example, I need small help on hove I don’t want to expand the menu how can I do that. I need to show or hide the menu on button click. Sub menu’s I want to display to the right how can I do that.