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?
brucegustPHP DeveloperAsked:
Who is Participating?
 
Steve BinkCommented:
Both of those scripts are involved, and they both look to be jQuery plugins to provide specific functionality.  The pushmenu.js will likely provide sliding effects for opening/closing a menu.  The ibutton plugin reproduces iPhone button functionality with javascript (e.g., "slide to open", etc).  

To understand how your menu is working, you're going to need to understand quite a bit more about these two scripts, and jQuery in general.  jQuery plugins extend available functionality by adding custom properties to elements.  These custom properties usually present as functions, just like the pushmenu() reference at the end of your sample code.  You can use these functions to initialize the plugin (again, like that reference), set properties, or trigger/control other aspects of the plugins behavior.

My best advice is to go through the code to understand what it is doing.  You'll have a bit of initial learning curve while you learn how the jQuery plugin interface works, but that's a one-time lesson.
0
 
brucegustPHP DeveloperAuthor Commented:
OK, Steve, I'll do some more digging.

I've got another question at http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28673754.html. Would love to get your feedback there.

Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.