Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

asked on

This works. Why?

Head out to http://www.brucegust.com/portfolio/verizon/test.php. I've got a "hamburger" menu in the upper right hand corner that's working well, I'm just trying to get my mental arms around "why" it works.

I'm hoping that someone out there can give me a condensed explanation and / or fill in the gaps that are present in the short explanation I have below.

1) There's a "$(window.load(function)" at the top of the page which establishes everything within the "altMenu" class as being hidden.

2) The menu button is categorized under the "iButton" class which triggers a slideToggle function documented at the top of the page. When you click on it, everything with the "altMenu" id is either revealed or hidden.  All of the functionality for the "iButton" class is written in the js/jquery.ibutton.js file.

3) It seems to me that within the iButton Javascript code is another "toggle" type of dynamic that applies to all of the <li> children within that class. This is what allows the user to click on all of the submenus.

4) With each submenu, you've got another function that when triggered hides anything else that might be open.

Towards the top of my page, I've got this:

 <script type="text/javascript" src="js/jquery.pushmenu.js"></script>
		  <script type="text/javascript" src="js/jquery.ibutton.js"></script>
		  <script type="text/javascript" src="js/bootstrap.js"></script>
		  <script type="text/javascript" src="js/allinone_contentSlider.js"></script>
		  <script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
		  <script type="text/javascript">
		  $(document).ready(function(){
			$(\'.main-nav-wrap\').pushmenu({
					 open_easing  : \'easeOutCirc\',
					 open_height  : 250,
					 open_speed   : 300,
					 close_speed  : 800,
					 close_easing : \'easeOutCirc\',
					 slide_speed  : 500,
					 slide_easing : \'swing\',
					 intent_delay : 200,   //use with HoverIntent scripts
					 intent_sensitivity : 7   //use with HoverIntent scripts
			});

Open in new window


I'm thinking that the actual scripts that are being used for the menu dynamic are:

pushmenu.js
ibutton.jus

...and the "pushmenu" function that immediately follows, but I don't know what that does.

Am I close?
ASKER CERTIFIED SOLUTION
Avatar of Steve Bink
Steve Bink
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Bruce Gust

ASKER

OK, Steve, I'll do some more digging.

I've got another question at https://www.experts-exchange.com/questions/28673754/How-can-I-ensure-that-my-menu-is-hidden.html. Would love to get your feedback there.

Thanks!