Solved

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

Posted on 2014-11-16
10
303 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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

786 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