journeybegins
asked on
Menu won't slide back up once user go to new page
I'm creating a web app that has a custom responsive menu. It's just your basic three list-item menu dropdown. When user clicks "hamburger" icon, it slides down. When they click on the "X", it slides up.
The problem having is that when the user clicks the "hamburger" icon in the mobile menu's closed state and then they click another link on the page outside of the mobile menu, the menu stays in its open/slid down state and becomes unusable unless the user reloads the page.
What do I need to put in my JS function to prevent this behavior? I appreciate the help.
The code:
HTML:
CSS (only the relevant stuff):
Javascript:
The problem having is that when the user clicks the "hamburger" icon in the mobile menu's closed state and then they click another link on the page outside of the mobile menu, the menu stays in its open/slid down state and becomes unusable unless the user reloads the page.
What do I need to put in my JS function to prevent this behavior? I appreciate the help.
The code:
HTML:
<nav class="home-header-content__nav--menu">
<ul>
<li><a href="/about">About</a></li>
<li><a href="/terms">Terms</a></li>
<li><a href="/help">Help</a></li>
</ul>
</nav>
<nav class="home-header-content__nav--mobile-menu">
<i class="fa fa-bars"></i>
<i class="fa fa-times"></i>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/terms">Terms</a></li>
<li><a href="/help">Help</a></li>
</ul>
</nav>
CSS (only the relevant stuff):
.home-header-content__nav--menu {
@media (max-width: $site-screen__iphone5s--landscape + 1px) {
display: none;
}
}
.home-header-content__nav--mobile-menu {
display: none;
text-align: right;
position: relative;
.fa {
font-size: 28px;
&:hover {
color: $site-color__secondary;
@include transition(0.2s ease-in);
cursor: pointer;
}
}
.fa-times {
display: none;
}
ul {
text-align: right;
font-weight: 700;
position: absolute;
top: 40px;
right: 0px;
background-color: $site-color__secondary;
border-radius: 5px;
padding: 10px 10px 10px 20px;
font-size: 18px;
}
a {
color: $site-color__white;
&:hover {
color: $site-color__secondary--darker;
}
}
@media (max-width: $site-screen__iphone5s--landscape) {
display: inline-block;
}
}
Javascript:
$(function responsiveHomeMenu(){
// Store content nodes in DOM
var $menuIcon = $('.home-header-content__nav--mobile-menu .fa');
var $menuList = $('.home-header-content__nav--mobile-menu ul');
// Hide menu links by default
$menuList.hide();
// Toggle menu with icon
$menuIcon.on("click", function(e){
$menuIcon.toggle();
$menuList.slideToggle(300);
$(document).off("click",function(){
$menuList.toggle();
})
});
});
ASKER
@Shahzad, I did try this before I posted, but unfortunately it doesn't work either way.
please provide a link to your website or create a workign example here : http://jsfiddle.net/
ASKER
@leakim971 https://pacific-reef-7580.herokuapp.com/ Thanks for the help!
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@leakim971 I tried this solution. It does disappear once you click outside of menu. However, it still is broken and won't reset after you click on a new page. It stays slid down and becomes unusable.
Be sure to run the code each new page, use pageinit event.
ASKER
How would you run the pageinit event on each new page?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Open in new window