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?
Bruce GustPHP DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bruce GustPHP 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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.