Develop Reference

Close off-canvas nav when menu item clicked

http://darrenbachan.com/playground/diamond-hand-car-wash/index.html
A few things I'm trying to accomplish here:
When you click anywhere except the menu item it closes the nav
When you click on a menu item it closes the nav and animates to an ID
The off-canvas nav appears only in it's mobile view. If you view the site on your desktop the nav does animate you to a specific ID, so I have some js there that I'm guessing could be used for the off-canvas one. I've read a few articles saying to use data-toggle but I couldn't get that to work.

So I figured I would chime in on this and offer a couple of solutions. If you are just trying to close the menu that you have in place currently when someone clicks on a link in your menu you could very simply either just use a click function to click menu button that you have there like so:
$('.navbar-collapse li a').on('click', function(){
$('input.checkbox-toggle').click();
});
Or you could probably just remove the checked from the checkbox like so:
$('.navbar-collapse li a').on('click', function(){
$('input.checkbox-toggle').prop('checked', false);
});
You may want to add an if statement so it only happens at mobile screen sizes so something like the following:
$('.navbar-collapse li a').on('click', function(){
if($(window).width() <= 767){
$('input.checkbox-toggle').prop('checked', false);
}
});
Or vice versa with the click function toggling the click above as well.
And then you could use your scrolling script that you already have in place and everything should work as you want it to.
Or
I see that on your site you are already using bootstrap. Bootstrap has a plugin built in that is called scrollspy that handles one page designs allowing you to scroll to sections and things of that nature. Using this instead of the script that you have in place may be a little more minimal and will serve you better because it will handle replacing active classes in your navbar as well. It may be much better for what you are trying to achieve with your site.
Also At the bottom I have placed a link to a jsfiddle demo that uses scrollspy along with an off canvas menu that is essentially the same thing that you are using in your site above except you can just use one menu for both large and mobile screens instead of placing two menus on your site. Look over this fiddle demo it has scrollspy in place and like I said instead of using two menus it just restyles the off canvas menu at mobile screens and uses jquery to toggle a class to the body of .menu-open when the menu button is pressed.
I wasn't quite sure if you wanted the same kind of overlay style of menu so I made it similar to the site that you have linked to above but if you want it to be a different type of off canvas style then you can just change the css to toggle it from the left or right or wherever.
Here is a link to the fiddle JSFiddle Demo
Anyway Hope this all helps and if you have any questions feel free to comment below.
P.S I noticed when looking at your page source that you have .container-fluid wrapping .containers throughout your page. This is not really necessary at all and is more than likely causing the horizontal scrollbar at the bottom. I'm not for sure but I just figured I would point this out to you.

How to show another navbar instead of dropdown menu using bootstrap

Instead of having individual navbar items having dropdown lists can I have the list shown as another extra navbar just below it?
something like how apple does here
http://www.apple.com/mac/

The best way to do this is to create a Div underneath your primary menu and to insert your sub-menu items inside that child div.
Of course, the actual implementation depends on the actual use case, the goals of the aesthetic and the user experience.
You could do a JS onClick event that will trigger the child dive to be inserted when hovering on the parent, or do it in pure CSS with a:hover and changing display of the other div.
Since you are asking specifically Bootstrap, the simplest implementation would be for you to grab a Mega Menu and tweak it to fit your Use Case.
YAMM is very good, all you would need to do to achieve what you want is to set a grid to your sub-menu items whilst having the sub-menu wrapper match the parent nav width.
Of course, I would recommend you read the documentation and understand how it is implemented and try to come up with your own solution to fit your particular Use Case.

Animate sideways via jQuery

I have a few <div> elements and a menu which is supposed to "call" these different <div>s on click with a custom animation.
These are the menus:
Normal
Remote
Tools
Register
Log in
Donate
Contact
Terms of use
Now I need to control and show different divs based on which menu entry I click.
I need help in two occasions:
Creating the animation (see the jsfiddle below)
Handling the transitions between the divs efficiently without lots of code rewriting.
Occasion 1:
When I click on a menu (Remote for example) I want the other visible menu to move itself to its complete right side and disappear (I've used overflow: hidden on the main div for that) and then from the left side the proper div to come in (remote-page div).
So basically, I'm wanting to make the slideDown and slideUp horizontal.
This is what I've got so far: http://jsfiddle.net/Dugi/UtH4m/8/
This is a good example to show what I've got already for my website locally. I failed to make the proper div come in from the LEFT side when a menu button was clicked, I just could make it so I can HIDE the divs that are standing on the way.
Final question: So how do I use .animate() to make the proper div come in from the left side AFTER the other visible div went to the right?
Occasion 2:
As you can see from the jsfiddle above, I had to go through each existing <div> and hide them:
$('#remote').click(function()
{
$('#normal-page').animate({marginLeft: '100%'}, 'fast'); // here
$('#tools-page').animate({marginLeft: '100%'}, 'fast'); // here
});
Final question: Is there a way to automatize this process and hide all visible divs and show the proper one when a menu button is clicked?
This is all I want to know.
Thanks

You can use complete parameter of the animate function to achieve that. I took the liberty of changing HTML and CSS a bit if you do not mind.
http://jsfiddle.net/UtH4m/9/
Final version: http://jsfiddle.net/UtH4m/13/

I hope this is what you want. I changed you markup a little bit. I added a #container for all the pages that is moved around. This is how it would look like: jsFiddle

CSS JS Dropdown menu: Extend the hover area beyond the image link

I'm trying to replicate the navigation as seen in www.accenture.com
And this is what I've been able to achieve so far: http://alfadesigntech.com/new/pages/inside-page-template.html
I've used a java script to show/hide a drop-down menu which is actually a hidden div with more links. The problem is as soon as I leave the menu button, the drop-down menu hides again. While I can use a delay onmouseout, it is not the solution i'm looking for.
Possible solution as per my limited knowledge, is to somehow extend the hover area to cover the hidden box. How can I achieve this? Is there an alternate solution?
Any help will be hugely appreciated.. Thanks in advance..
Ps. I've a limited knowledge of javascripts.

you can place your div with links in one container with its triggering anchor - it should help.
<div id="menu-item-1" onmouseover=....>
<img/>
<div class="links">Show us on mouseover and hide on mouseout</div>
</div>
Although it often depends on particular markup.
Also possible solution - when links panel is open - you hide it if mouse out of it and mouse not over on anchor image.

Why doesn't my drop-down menu stay visible when I hover over it?

Okay, so I've got two drop-down menus on my page, Navigation, and Links. Links works normally, but Navigation disappears when I try to hover over it. I got no idea why, so I'm asking.
Why does my Navigation menu disappear when I hover over it, and how do I fix it?
My site with the error

You have an element that's hanging over the left menu named #crwrap. So when moving your mouse to the Navigation options, the mouseout is triggered because you're suddenly hovering the #crwrap element instead of the Navigation menu. It's invisible but if you use a debugging tool that supports DOM searching you'll see it covering the area of the Navigation menu options.
It's not covering the Links menu so that one does not have any problems.
If you remove #crwrap (or move it to the background using z-index: -999), it works fine for me.

Your JS to show the menus is toggled by mouseover and mouseout of the elements in your menu section. The submenus are not nested inside these elements. Therefore, when you move the mouse down toward the submenu, you trigger the mouseout on the main menu item, which is hiding the submenu.
I would recommend nesting the submenu items inside the main menu item's container.
I would also advise you check out the excellent alistapart.com article about CSS hybrid menus. It has some excellent pointers and techniques you might find useful.