• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 319
  • Last Modified:

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

0
journeybegins
Asked:
journeybegins
  • 4
  • 4
2 Solutions
 
Shahzad Fateh AliWeb Solutions Architect & Technical Project Manager- VentureDive (Pvt) LtdCommented:
Try removing

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

Open in new window

0
 
journeybeginsAuthor Commented:
@Shahzad, I did try this before I posted, but unfortunately it doesn't work either way.
0
 
leakim971PluritechnicianCommented:
please provide a link to your website or create a workign example here : http://jsfiddle.net/
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
journeybeginsAuthor Commented:
@leakim971 https://pacific-reef-7580.herokuapp.com/ Thanks for the help!
0
 
leakim971PluritechnicianCommented:
Try this code :
$(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).on("click",function(e) {
		// check if we're not clicking on the menu or a menu item
		if((!$(e.target).hasClass(".home-header-content__nav--mobile-menu"))&&($(e.target).closest(".home-header-content__nav--mobile-menu").length==0)) {
			$menuList.toggle();
		}
	});

});

Open in new window

0
 
journeybeginsAuthor Commented:
@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.
0
 
leakim971PluritechnicianCommented:
Be sure to run the code each new page, use pageinit event.
0
 
journeybeginsAuthor Commented:
How would you run the pageinit event on each new page?
0
 
leakim971PluritechnicianCommented:
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now