Make menu go away when an item is clicked on mobile/tablet - javascript

I have a pretty specific problem which i am hoping someone can guide me in the right direction with.
Here is the website link : http://rimowaedition.com/
When on a tablet or mobile device the menu is condensed into a button. To chose anything on the menu
1. i have to click the button and it brings a drop down list.
2. Click on the page i want to go to.
3. click the menu button to close the drop down list or else it takes up the whole screen and i cannot see the page in the back.
Here is a screenshot of how it is: http://imgur.com/aV7RHwb
Is there any way to make it so that when i click an item in the drop down it automatically closes the menu and goes to that page.
Any guidlines or clues as to how i would go about doing this would be much appreciated since as of now i am pulling my hair out .

You can set a click event on any item in the menu lists that you click.
So...
If you're using jQuery
$('list-item').click(function() {
//Remove the class that causes the menu to be open
//Perform any actions that you need after the button is clicked
//such as loading another page
});
This can also be done in vanilla javascript. Just search up click events in javascript.

Use JavaScript Use JavaScript on the click event of any of the
> <a href>'s
in the menu to hide the menu.
on the click event of any of the
> <a href>'s
in the menu to hide the meUse JavaScript on the click event of any of the
> <a href>'s
in the menu to hide the menu.
nu.

Related

Close menu on mobile devices with anchor link

I have been reading in this community and testing codes but I can not close the menu.
I have created a simple JSFiddle to understand it. I would like to close it using jQuery. The problem is only in mobile view. In this example, the user clicks on the "MORE" menu and a "NEWS" item appears. "NEWS" is an anchor link and when the user clicks there, the menu is still open. This is the problem. How can I close the menu?
I have tried everything.
jQuery(".item-131").css( 'pointer-events', 'none' );
jQuery(".item-131").attr('onmouseover','');
jQuery(".item-131").off('mouseenter mouseleave');
jQuery(".item-131").unbind("mouseenter mouseleave");
But I can not close the menu.
See my JSFiddle: https://jsfiddle.net/karmany/gc0ku8on/
If you could show your cursor on mobile you'd see that when you click menu the cursor is still above the menu button until you actually tap off it — now you could have an on click event that closes the menu when it's clicked?

Make navbar collapse/close on click

i have trouble making the navbar on mobile devices collapse with my website. The problem only concerns the mobile version of the website.
When I click on a menu button, the site scrolls to the correct point, but the navbar remains opened, which is annoying. I tried to give the UL LI elements the same class like the "back" button in the navbar, which can collapse the navbar, but this does not work :/..
Could anyone show me how I can make the navigation bar close whenever a menu item is clicked?
This is the website:
Thanks a lot
You could solve it with jQuery, by just triggering the action of clicking the menu icon, like this:
jQuery('.rd-navbar-nav li').click(function() {
jQuery('.rd-navbar-toggle').trigger('click');
});
This way, when you click an element in the menu, it emulates clicking the hamburger menu icon too.
You can use Jquery if you'd like, but I just use JavaScript on my sites. You can take a look on how to make a collapsible navbar menu with JavaScript here. If you want to close the menu bar whenever a menu item is clicked, just set a close() function in the onClick() attributes if the menu is active and open. The close() function will be the function in which you hide the menu once again.
EDIT: You must define the close() function with in your JavaScript and set it to hide the menu items though.

Mobile Menu button takes top of the page

I have a wordpress site and i used a template to do it. So when i'm on mobile it has a mobile menu i managed to make it fixed to stay at the top when i scroll down, but the problem is. When i'm on a certain place at the site and i wanna open the menu with the "three line" icon it's opening the menu but takes me to the top of the page as well. And when i wanna close the menu with the X button it takes me to the top of the page as well, so basically the menu is unusable. I know it's a Jquery problem, but i can't find which file contain the codes for it and even how to fix it.
My website is: www.autoberles-szombathely.hu
So i wanna make the open menu button and close menu button to only open and close the menu and don't take me to the top of the page.
you can use:
$(selector).click(function(event) {
event.preventDefault();
//other stuff you might want to do on event
});
For the record you should not remove the href entirely, it should always exist to prevent unexpected behavior. If you don't want the href to be be acted on then just use that preventDefault() method, easy and keeps everything running smoothly.
Your menu has the following structure in a mobile viewport:
<i class="fa fa-bars"></i>
The # will cause the page to jump to the top, see here for a detailed answer why.
You have two possibilies to prevent this behavoir:
Add an event handler to this link and use event.preventDefault()
For jQuery
$('.menu-toggle').on('click', function(event){
event.preventDefault();
});
VanillaJs
document.getElementsByClassname('menu-toggle').addEventListener('click', function(event){
event.preventDefault()
});
Remove the attribute href completly (See here). When using this solution you have to use a css-reset or add e.g. cursor:pointer to these links again, because the standard browser css is not applied anymore.

jQuery: onclick drop-down menu with controls

I wish to create a menu (a sign-up menu), see this to get an idea of it. When user clicks on this button/link a drop-down menu appears, using which he can do something (here login).
The behaviour of the link should be the following:
The drop-down menu should appear when clicked on this button/link.
when clicked anywhere on the page (including the button/link itself), but outside the menu, the menu should disappear.
If clicked somewhere on the drop-down menu, the menu should not disappear.
All the controls in the drop-down menu should work.
I did somehow managed to get first three working, but then the controls within the drop-down menu (4th behaviour) are not working.
The javascript/jQuery code along with html code is given here (jsfiddle link, same as above). You can fork it and make changes.
Thanks.
check this
http://thefinishedbox.com/files/freebies/loginfreebie/index.html
Download tha code
http://thefinishedbox.com/freebies/scripts/jquery-dropdown-login/
I made a fork of what you have on your jsFiddle: http://jsfiddle.net/DukyJ/
If you look at the code I just added an extra div to have the page's content so I don't have to assign click events to the whole body just only to that div.
Then, I removed the return false and the stopProppagation and just added a '#' to the link in the href because it wasn't necesary.
And finally just added some style to the signin link and the singin panel so you can see that the menu appears over the content as I suppose you want it to appear.

Forcing a reload in JQuery

I am making use of the Lavalamp plugin from http://nixboxdesigns.com/projects/jquery-lavalamp/ and everything seems to be working fine except that there is a little quirk when using the back button.
For example:
If you are starting off from the home page, the hover is underneath the home menu.
Click on a new menu item, the hover appears underneath it
Click on the browser's back button, and the hover does not return to the home menu item, it stays at the previously clicked one.
I need to find a way to call the Lavalamp function when the back button is being triggered.
Hope to get some help here
It sounds like the OnBeforeUnload event is what you are looking for.

Categories