Sorry, but I've not yet supported your browser ( IE7 or IE8 ). Please use another, advanced, browser to view this site

thank you

Supported browsers

How I made the animated menu for Asian Football Awards

August 16th, 2013
Categories: Blog, Development | Tags: , , , , ,

This is going to be a post about how I made the animated menu for Asian Football Awards.

You can see the menu in action below, via instagram:

#webdev #wordpress #asianfootballawards #jquery How a simple mobile menu can be animated. Blog post to follow with sample code by @scriptedpixels

It was a simple idea but, to be honest, it did take me a little while to figure out a way to make the menu act how I wanted it too. I wanted both drop down menus to know if the other was open and if it was/wasn’t then to close and then open. You can see this happening in the video above.

At the very top I’ve created a wrapper called “mobile_menu” that contains the MENU button with text as well as a line of PHP that brings in my WordPress Menu. This next line of PHP brings in the list HTML used for the main menu:

The <li> items are not literal in this example…clearly.

You can see in the code above that I’ve added the “Add this” social buttons in there too just so you can see where the icons were coming from and how I added them in to the site.

Both the Menu and Share This are structured the same. They have a wrapping DIV and a “Button” inside with a DIV following that acts as the list container. I’ve created a plain example below:

as a note to self; I’ve just thought of a simpler way to implement this, (face palm moment)!

That’s the basic HTML. The next bunch of code will be the JavaScript. I already know it’s a lot lengthier than needed but I think it’s good for me to post what I originally did so I know not to do it again!

The theory behind it was that if a button was clicked it would look at the state of the other menu and then close it if it was open. The clicked menu would then open when it knew the other menu was closed. Sounds a lot simpler when spelling it out but I did find it a little trickier when writing it, for some reason.

So… I setup two global variables on Doc.Ready so I knew I could reference the state of each menu quickly. I then “bind” a click event to each button.

The code 1st looks to see if the “other menu” is “:visible”. If it is then it tells the other menu to close (“slide up”). It also looks to see if their own lists are open. It does this by looking to see if their child lists are “:visible”. If it is then it tells it to close (slide up). If it isn’t, “else”, then it tells its child list to open (“slide down”).

It’s as simple as that, and as I said earlier, it can be written in a better way than I’ve just written but I want to share this as it’s how I wrote the code then and I know now that I can write better, cleaner, code!

I hope this is of use to some, and I hope you can see how it can be written in a cleaner way. I’ll be posting again this weekend and I hope to post the cleaner and simpler code.

latest work

  1. Responsive design, Responsive grid integration, Media queries, HTML5, jQuery, JavaScript, CSS3 animations

  2. Responsive carousel, design, grid and media queries, HTML5, custom jQuery & JavaScript, HTML5 & CSS3 animations, custom nomination form.

  3. Responsive design, grid and media queries, HTML5, custom jQuery & JavaScript, mobile optimised design and development

  4. Custom Wordpress posts, one page design and development, Custom JavaScript for mobile and desktop carousel switching, mobile optimised design and development

Back to top

designed & developed by Scripted Pixels Ltd