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.
Related
I'm working on this site: http://editingplus.com.au
In the submenu Resource > Getting published, at some screen sizes when a link is clicked, instead of navigating to the link the submenu jumps to a different position and then closes. A second attempt at opening the menu and clicking the link works, but only if you try to click the same link--clicking a different link means you have to start again and click that link a further time.
This problem only occurs at smaller screen sizes where the Getting Published submenu doesn't fit to the right of the Resources submenu. Clicking on the Getting Published submenu makes it jump briefly from the left to the right of the Resources submenu before closing. At larger screen sizes where the Getting Published submenu fits to the right of the Resources submenu, links work on first click.
This screenshot shows the situation of the Getting Published submenu being to the left. It's when it's like this that the menu jumps then closes.
This is a problem with JavaScript--if I disable JS on my browser and the site falls back to CSS only menus, the links work first time.
I haven't made any custom menus. The site is using the Mins theme from GoDaddy, which is built off the Primer theme. As far as I can tell, neither of them are using any custom JS for the menus, and all the JS is standard WordPress JS.
StackOverflow recommended I check out these two other questions:
Jquery Drop Down Menu. The sub menu disappears when clicked. So, How to make the submenu stays when clicked?
Submenu disappearing when clicked in the submenu in wordpress
However, those are both to do with developing custom menus, and those menus not working ever when clicked, rather than only sometimes not working at certain screen sizes.
I'm guessing I will need to add some custom JS to this site to stop the menus not working, or somehow disable the JS so the menus roll back to pure CSS, but I'm not sure how to do either of those things.
Any help would be much appreciated!
I'd like to create sidebar navigation with subnavigation that appears when a user enters the parent section on the page:
eg https://parse.com/docs/ios_guide#queries/iOS
I think the way to do it with bootstrap is a combination of the affix, scrollspy and collapse plugins, but I'm not sure how to fire the correct collapse event when the user scrolls into or clicks into the correct parent section.
For anyone else wondering, I ended up using the Tocify plugin. Not exactly what I had in mind, but does what I needed.
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
I want to make such kind of menus when I click the holiday/seasonal then all of its related list open. For example:
I have searched the internet for submenus but it is not giving right method. If you know the right method for creating this menus, please share the link or give some guidance!
My first suggestion would be to use two nested <ul>s (pointed lists), both with attribute list-style-type: none, as in this fiddle. This no-JS solution opens the submenu when just hovering, not clicking.
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.