Thanks for explaining every part. I mean how else are we really supposed to learn by copy and pasting some code. This worked great for me. My only thing is, I can't get the button to go over the top of my navbar. I've tried a couple things like pull-left or even other menus but it won't go over the top of my navbar haha anyway great job dude, I will definitely be watching more of your videos.
instead of padding-left:250px; why don't you replace padding-left with margin-left because padding-left overlays over the toggled division.. it makes more sense
how can we adjust the display of side bar on clicking of button . The site on which Bucky is working has an elegant sidebar which gets displayed in an animated way (kinda slow)........ how can i do that ?
where nested hover effect code..i wanna this .When i clicked back to small side it did not show me result of hover effect i give two time hover effect in nested menus of div it was show me nested div inside of parent div
Hi, when the page has a lot of content, when you scroll down the menu background doesn't go to the end. How can we fix that? Thank you, great tutorial!
Hello, can anyone help me I did same as tutorial but it's not working once I click "toggle menu" I think there is an error in java script part, please check below $("#menu-toggle").click(function (e){ e.preventDefault(); $("#wrapper").ToggleClass("menuDisplayed"); });
It didn't work for me at first, but when I removed #wrapper from the two below, it worked perfectly.I don't know the reason.could someone explain it for me.thnx #wrapper.menuDisplayed #sidebar-wrapper{ width: 250px; } #wrapper.menuDisplayed #page-content-wrapper{ padding-left: 250px; }
So if you replace the #wrapper.menuDisplayed with just '.toggled' then that actually works as well, no idea what happens here but that's a better workaround.
Thanks for the tutorial! Got most of it working but one major thing! The links/tabs dont work! Nothing happens when I hover over it, and the browser doesnt even indicate that it should be link (ie no little link preview at the bottom of my window) I included all the CDNs and triple checked the code.... Admittedly I am doing this inside of another project that I need this sidebar for... however I dont see any conflicting reasons as to why it wont work. I suppose I'll make a standalone thing to check but.... sigh... kinda pointless if this does not work in my current project.
+Poornima Sampath babu Look at the site on chrome, first of all. Internet Explorer may have issues if you are using it. Also, right click the page, click inspect element, and click on console. Copy paste the error here (if there are any)
This doesn't work for me, I don't know why... I tried to remove all my code at the end and copied Bucky's code from the github but it didn't worked. I thought its jquery but after testing that, it was not the problem. Can anyone help or anyone had the same issue? Or anyone can give me a link to a nice tutorial where I can find the same thing but with bootstrap?
Ad Ram yes I have included jquerry and the rest of the tutorial were fine. I was using jet brains ide webstorm and here I selected twitter bootstrap. When I changed my idea to atom and sublime, it worked, although there was not Twitter bootstrap this time. I don't know why it worked now and not before? Twitter bootstrap he mentioned in first videos
Why didn't show how to do it the "standard" way? And include the toggle button in the navbar like on your site? We are all "newbies", so showing us different and unique ways makes it harder to learn. Good videos none the less !
this method has a problem. Because you make sidebar and main content are absolute position.Then if you want add something outside the wrapper,it will get mess.
Great tutorial so far but it's kinda incomplete. You don't show how to add transition effect. You don't show how to polish it all and finish it off. Should have done more tutorials on this one, especially since such sidebars are hot today.
Thanks pal, I have no problem with js, programming or other stuff, but I'm to lazy for the css stuff, anyways, for those interested on how to animate the sidebar show-hide, check: gist.github.com/atejeda/21c0e0243a745299815b
It’s best to do this manually and use em instead of px and make the entire layout scalable and elegant. Plus the extra work load. Millennial developers are so wasteful, no wonder phone batteries die so fast.
+Rene Hupfer This adds virtually 0 extra work load and wouldnt affect battery life at all. Nothing in this is even close to affecting the battery at all.
Rene Hupfer The code isnt the cleanest, however your saying millennials kill batteries so fast because of things like this is ludicrous. Also, unless you have a quote of steve wozniak saying he agrees. You cant use that as an argument. For instance, I could say steve wozniak would disagree, without any sources it is meaningless.
You know you're a coder when your answer to "What's your favorite color" is "Hashtag 2C3E50" haha. Great tutorial!
This is great! I'd say this is the start of level 2 compared to the previous videos haha
Nice one, keep doing them, really helpful.
This was very helpful. Thank you!
If it's not displaying, make sure the tag for jQuery is BEFORE the script for toggling the sidebar.
Both Tutorial are awesome fix my very big headache
Thank u very much Mr Bucky. I learnt a lot from you.
easy and awesome way to explain and really helpful thank you very much to provide such a wonderful tutorial...
I guess he meant overflow-x and not overflow-y, right?
Hey bucky which web development platform do you use to make your site? Elegant looking site, man!
how about if you have a dropdown menu? i am having a big problem, i followed your tutoria and it worked but the problem is i have a dropdown menu
Great video, thanks
nice and sharp!
Bucky, would it be possible to add a CSS transition effect to the sidebar menu? Something like an ease in effect?
how come when i try it, my text stays behind the the sidebar :( I never understand why when I follow along it never works.
Thanks this information. Thank you.
great content.
how can we display sidebar icons when its not displaying
amazing! thank you!!
Thanks for explaining every part. I mean how else are we really supposed to learn by copy and pasting some code. This worked great for me. My only thing is, I can't get the button to go over the top of my navbar. I've tried a couple things like pull-left or even other menus but it won't go over the top of my navbar haha anyway great job dude, I will definitely be watching more of your videos.
please, If I want to place an image and make it move with sidebar menus using HTML, CSS and JavaScript, what should I add to the javascript code?
function myFnc(e){
var elem = document.getElementById("navID"),
style = window.getComputedStyle(elem),
top = style.getPropertyValue("right");
if(top == "0px"){
elem.style.right = "-270px";
}else{
elem.style.right= "0px";
}
}
Well done Sir
instead of padding-left:250px; why don't you replace padding-left with margin-left because padding-left overlays over the toggled division.. it makes more sense
what should be done if i want the toggle menu to come over bottom layouts.
thank you so much!
how can we adjust the display of side bar on clicking of button . The site on which Bucky is working has an elegant sidebar which gets displayed in an animated way (kinda slow)........ how can i do that ?
Which too you are using here in this video for bootstrap ???
hi @thenewboston what i need to do in the javascript portion if i want do display the menu by default?
Can pycharm community edition also create sidebar menu templates ??
Cozy in my program this code is not working :(
how to code such that the sidebar disappears and appears slowly and smoothly as in Bucky's site?
where nested hover effect code..i wanna this .When i clicked back to small side it did not show me result of hover effect i give two time hover effect in nested menus of div it was show me nested div inside of parent div
got the exact same thing, but the hover thing doesn't seem to work on mine [edit: the links in the sidebar-nav doesn't work either]
i'm not able to give a background color to #wrapper , any particular reason?
rest of it works great !! .
i have a problem . .if i click the toggle btn . nothings happen ..
please help me
+rannis ragadio
just check ur class name on javasript or css are same.
+rannis ragadio Maybe you dont have jquery?
click again
did you include jquery?
what should be class name on javascript and css
Hi
not working when i click on the button nothings happend
How to align the sidebar on right side instead of left??
Hi, when the page has a lot of content, when you scroll down the menu background doesn't go to the end. How can we fix that? Thank you, great tutorial!
Hey, do you find any solution about it, I am in same problem now.
Make sure you put height: 100% in sidebar-wrapper styling
great info, but if you use a black background in your code you should use it in your webpage. My eyes get destroyed when you switch screens.
Genius ...
What you did is place on the left, how can I put the side bar on the right? Thanks :)
I'm gonna try it on and I'll update you. Thanks for your reply :)
can you do an updated serie of php for beginners the most of that from alex is not working
How can we have menu on left and also on right?
Also, if you wanted a navbar like on your thenewboston website, would you place it in the page-content-wrapper?
No, place it outside #wrapper
I simply just left my navbar where it was and minimized it in pycharm, and started my sidebar code underneath it:
******* THIS WHOLE AREA IS MINIMIZED ********
.......
Hello,
can anyone help me
I did same as tutorial but it's not working once I click "toggle menu"
I think there is an error in java script part, please check below
$("#menu-toggle").click(function (e){
e.preventDefault();
$("#wrapper").ToggleClass("menuDisplayed");
});
$("#menu-toggle").click( function (e){
e.preventDefault();
$("#wrapper").toggleClass("menuDisplayed");
});
Thanks lot
which text editor do you use?? Please send the link of that editor to download it safe!
It's JetBrains PyCharm IDE.
Is there a way to to have a tab attached to the actual side bar instead of having the toggle menu button
Yes
It didn't work for me at first, but when I removed #wrapper from the two below, it worked perfectly.I don't know the reason.could someone explain it for me.thnx
#wrapper.menuDisplayed #sidebar-wrapper{
width: 250px;
}
#wrapper.menuDisplayed #page-content-wrapper{
padding-left: 250px;
}
So if you replace the #wrapper.menuDisplayed with just '.toggled' then that actually works as well, no idea what happens here but that's a better workaround.
thanx bro.I really appreciate
Thanks for the tutorial! Got most of it working but one major thing!
The links/tabs dont work! Nothing happens when I hover over it, and the browser doesnt even indicate that it should be link (ie no little link preview at the bottom of my window)
I included all the CDNs and triple checked the code....
Admittedly I am doing this inside of another project that I need this sidebar for... however I dont see any conflicting reasons as to why it wont work.
I suppose I'll make a standalone thing to check but.... sigh... kinda pointless if this does not work in my current project.
I have the exact same problem lol. Was scrolling through comments to see if anyone had the same problem. Find any solution?
Hey, just found the solution. Instead of padding-left, use margin-left. The boding overlapping the sidebar caused problems.
How can the toggle animation smoother? i.e it slides out rather than just popping out
add (without quotes) " transition: .5s ease-out; " to #sidebar-wrapper and #page-content-wrapper
hey hi even for me also when i click the button nothing is happening.I dunno where i did mistake? Please could you help me
+Poornima Sampath babu add the jquery file
+Poornima Sampath babu Look at the site on chrome, first of all. Internet Explorer may have issues if you are using it.
Also, right click the page, click inspect element, and click on console. Copy paste the error here (if there are any)
This version doesn't fade, not sure why he didn't just explain the version he used on his site.
use of z index ?
hey can u pls gv the source code? thnx BTW awesome tutorials
hey bucky, what text editor you used?
***** intellij idea :)
thanks
hi sir my desing sidebar not working
Hey Becky please make an "Intellij idea tutorial " please !!!!!!
+iBrahim Houache github.com/buckyroberts/Source-Code-from-Tutorials/tree/master/Bootstrap/sidebar
This doesn't work for me, I don't know why... I tried to remove all my code at the end and copied Bucky's code from the github but it didn't worked. I thought its jquery but after testing that, it was not the problem. Can anyone help or anyone had the same issue? Or anyone can give me a link to a nice tutorial where I can find the same thing but with bootstrap?
Did you include the jquery and bootstrap.js file?
Ad Ram yes I have included jquerry and the rest of the tutorial were fine. I was using jet brains ide webstorm and here I selected twitter bootstrap. When I changed my idea to atom and sublime, it worked, although there was not Twitter bootstrap this time. I don't know why it worked now and not before? Twitter bootstrap he mentioned in first videos
Is that sublime text editor?
Shoreline No. . .It's IntelliJ Idea from Jetbrains.
Bucky I love you!
I am going to be like you ;-;
Are you like him now xD?
Why didn't show how to do it the "standard" way? And include the toggle button in the navbar like on your site? We are all "newbies", so showing us different and unique ways makes it harder to learn. Good videos none the less !
how to add footer to entire page,without sidebar overlapping footer.
#sidebar-wrapper{
height: 95%
}
(Assuming footer occupies 5%, tweak height according to height of footer)
this method has a problem. Because you make sidebar and main content are absolute position.Then if you want add something outside the wrapper,it will get mess.
Sorry,my fault,because the element is positioned relative to its first positioned (not static) ancestor element
Great tutorial so far but it's kinda incomplete.
You don't show how to add transition effect. You don't show how to polish it all and finish it off. Should have done more tutorials on this one, especially since such sidebars are hot today.
height: 100vh ; it's mutch better then 100%
Thanks pal, I have no problem with js, programming or other stuff, but I'm to lazy for the css stuff, anyways, for those interested on how to animate the sidebar show-hide, check: gist.github.com/atejeda/21c0e0243a745299815b
It’s best to do this manually and use em instead of px and make the entire layout scalable and elegant. Plus the extra work load. Millennial developers are so wasteful, no wonder phone batteries die so fast.
+Rene Hupfer This adds virtually 0 extra work load and wouldnt affect battery life at all. Nothing in this is even close to affecting the battery at all.
[___ ] still not a clean way to work. framework stackers…… steve wozniak would agree with this fyi.
Rene Hupfer The code isnt the cleanest, however your saying millennials kill batteries so fast because of things like this is ludicrous.
Also, unless you have a quote of steve wozniak saying he agrees. You cant use that as an argument. For instance, I could say steve wozniak would disagree, without any sources it is meaningless.
39 seconds ago?
Tristan Bray ye
***** At least he's learning :)
i kinda would like an apple pie.