Solved

Menu won't slide back up once user go to new page

Posted on 2014-11-16
10
307 Views
Last Modified: 2014-12-07
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
Comment
Question by:journeybegins
  • 4
  • 4
10 Comments
 
LVL 9

Expert Comment

by:Shahzad Fateh Ali
ID: 40447207
Try removing

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

Open in new window

0
 

Author Comment

by:journeybegins
ID: 40451034
@Shahzad, I did try this before I posted, but unfortunately it doesn't work either way.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40451239
please provide a link to your website or create a workign example here : http://jsfiddle.net/
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:journeybegins
ID: 40453331
@leakim971 https://pacific-reef-7580.herokuapp.com/ Thanks for the help!
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
ID: 40454871
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
 

Author Comment

by:journeybegins
ID: 40458206
@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
 
LVL 82

Expert Comment

by:leakim971
ID: 40458838
Be sure to run the code each new page, use pageinit event.
0
 

Author Comment

by:journeybegins
ID: 40473059
How would you run the pageinit event on each new page?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40473065
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
HTML Anchor Link Problem 3 39
ASP.NET MVC -Update model when click on <li> element 29 38
IF statment In Powershell 12 19
jQuery on click requires double click 6 11
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question