Adding Navigation to the Skeleton

This post expands on "Create a Responsive HTML/CSS Skeleton". I will explain some of the ways you can add horizontal navigation to your site.

The first step is to insert an unordered list to your page.

Example:


Next, CSS is used to create the drop-down effect.

Example:


There are some necessary tweaks needed to get around some of the CSS in columnal.css.

.row {clear: both; width: 100%; max-width: 1140px; margin: 0 auto; overflow: hidden;}

and

.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11 {float: left; margin-right: 3.8%; position: relative; }

The "overflow: hidden" and "position: relative" settings combined will cause the drop-down effect to be hidden by other elements just below the navigation menu.

To compensate, I have made some changes to "custom.css".

#main-navigation
{
background-color:#ffffff;
height:5em;
overflow:visible;/* overrides the overflow:hidden setting in columnal.css */
}

and

#content-text
{
padding:.5em 0 .5em 1em;
position:static;/* overrides the position:relative setting in columnal.css */
}

Now for added spice, I have included a jQuery effect that performs a "fade in" when you hover over the navigation.




Click ((here)) for the project code.

Click ((here)) for an example of the code.