Avatar of journeybegins
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:

   
<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>

Open in new window


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;
	  }
    }

Open in new window


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();
		})
	});
    });

Open in new window

jQueryCSSHTMLJavaScriptWeb Development

Avatar of undefined
Last Comment
leakim971

8/22/2022 - Mon
Shahzad Fateh Ali

Try removing

$(document).off("click",function(){
			$menuList.toggle();
		})

Open in new window

journeybegins

ASKER
@Shahzad, I did try this before I posted, but unfortunately it doesn't work either way.
leakim971

please provide a link to your website or create a workign example here : http://jsfiddle.net/
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
journeybegins

ASKER
@leakim971 https://pacific-reef-7580.herokuapp.com/ Thanks for the help!
SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
journeybegins

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.
leakim971

Be sure to run the code each new page, use pageinit event.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
journeybegins

ASKER
How would you run the pageinit event on each new page?
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.