Live DemoDownload Source Code

Setting the Document

The top heading area contains a small selection of files we need to create this effect. I am including a custom stylesheet along with a copy of the latest jQuery library hosted by Google. All of the custom JS functions are stored in an external file named menu.js.

Most of the page markup is fairly unimportant aside from the header area. I have attempted to keep everything at a fixed height, but the header cannot use a fixed CSS property or else the page won’t expand when sliding the menu open and closed. So the heading and navigation links are setup by line-height values in CSS.

The page h1 title fits best as the last element so the header will always keep its constant height. Right next to the headline is an anchor link with the ID #navbtn and this contains the sliding menu link icon. It will only display using CSS after the width drops below a certain threshold.

Markup Positions in CSS

Typically I do not consider even requiring jQuery whenever it is possible. The only problem with toggling menus is that we cannot do this efficiently in CSS. And the jQuery methods will apply inline CSS styles which overrule the default stylesheet. So it comes down to positioning the elements using CSS and helping them animate properly with JavaScript.

My default CSS browser resets include a set of custom codes for the page typography. Also our body background tile is PS Neutral saved from Subtle Patterns. I had to split up the wrapper container and the body container into 2 divs because we are using side padding on the left and right to keep the page from growing to 100% width. Adding margin values onto the margin: 0 auto; property will result in losing the centered positioning.

By styling the inner