Document Structure
As with most of my tutorials, I am starting off with the typical HTML5 doctype and other extraneous scripts. These 3rd party docs include the latest jQuery library, the html5shiv document, and a custom Google font used in the page heading.
Styling Page Elements
The default CSS styles I follow are based on Eric Meyer’s CSS resets with some other custom properties. I always include the box-sizing property along with the vendor-specific prefixes defined using border-box. This forces all margins and padding to be limited at the maximum width and not to add any additional pixels to box containers.
Sub-Navigation CSS
One last key point to our stylesheet deals with the internal anchor links. Since each li element contains another <ul> for the links, we need to hide these by default. Then after the user clicks on a container link we display all the internal elements.
jQuery Accordion Effects
We have the entire block element displaying properly, so now we need to create the JavaScript animations. I have created a new document nav.js and opened the typical jQuery DOM function, checking the page document has finished loading before running any codes.
Final Thoughts
I hope this tutorial can offer a solution for web developers who need to build relatively simple accordion-style widgets. Any typical website layout is often crammed with important content and lacking in additional space. Sometimes you just cannot fit a horizontal navigation into a tight place.
