Coding Dropdown Navigation

Introduction

This guide is geared toward explaining the process of constructing a fancypants drop-down navigation. If at any point in this page I utilize a property that you're not sure of, a search engine is your best friend. For optimal benefit of this page, a good pre-knowledge of HTML and CSS is recommended (psst, Stylus is my favorite basic coding guide).

This method will not work in Internet Explorer. If you're an IE user, this guide will be rendered unusable for you. For everybody else, if you're going to implement this on your own petpage, I highly recommend inserting a second set of IE-friendly navigation or at least a way for IE users to still navigate around the page.

As you scroll through the page, text in red indicates it a new segment of coding not in the previous step.

Cheers! -Shingie

PS: If you're feeling lazy and just want to copy/paste, click here for the end of the guide where the final and complete code resides.

Step 1: Your HTML

While it is possible to create dropdown navigation without usage of unordered lists, using nested unordered lists is the "standard". Plus something else about semantics mentioned in another CSS guide I can't be bothered to look up and plagiarize. Personally, I've found using unordered list and list item elements give you many specific tools to play with if you want to alter the appearance. Even if you use the unordered list method, there can still be variations in the HTML/CSS due to each coder's preferences.

To start off, you need the primary links in an unordered list. We will be calling this unordered list nav (short for navigation) as conveyed with the id="nav" attribute.

• My Account
• Customise
• Games

Because we want to have links to appear when we hover on each list item, we nest another unordered list in between each list item.

• My Account
  • Control Panel
  • Preferences
  • Edit Profile
  • Neomail
• Customise
  • Customise Neopet
  • Closet
  • Create a Neopet
• Games
  • Games Room
  • Favourites

That's really all the HTML required. We will be making a slight alteration to this code in the last step, but let's start modifying it with CSS.

Step 2: De-Styling The List

Before you actually start styling the appearance of the unordered lists, we must first remove the default spacing so we can take full control of the appearance -- essentially, de-styling the list. Remove the margin, padding, and the bullet circle thingies.

• My Account
  • Control Panel
  • Preferences
  • Edit Profile
  • Neomail
• Customise
  • Customise Neopet
  • Closet
  • Create a Neopet
• Games
  • Games Room
  • Favourites

Rejoice in the bland normality of it all :D

Optional Step: Draw Borders around Everything

This step isn't actually required, but I'm going to put in garishly colored borders around every unordered list and list item. When I make an alteration in the CSS, you will be able to better visualize how it affects the HTML.

• My Account
  • Control Panel
  • Preferences
  • Edit Profile
  • Neomail
• Customise
  • Customise Neopet
  • Closet
  • Create a Neopet
• Games
  • Games Room
  • Favourites

Step 3: Organizing the Links into Columns

In the neopets navigation bar, the primary links (my account, games, customise, etc) are adjacent to each other. By default, a list item is a block element. To organize these primary links into columns so that they are side-by-side, we float each list item to the left and set it to inline display.

This will, in effect, cause the subsidiary set of links to be floated to the left and appear all on one single line. To rectify this, we need to reverse the previous declarations by adding the declarations display: block; and float: none; to the subsidiary list item selector.

• My Account
  • Control Panel
  • Preferences
  • Edit Profile
  • Neomail
• Customise
  • Customise Neopet
  • Closet
  • Create a Neopet
• Games
  • Games Room
  • Favourites

Step 4. Fixing the Collapsing Unordered List

In the previous step, note how the red border has become a single line. This is because of the floated list items, causing the parent unordered list element to "collapse". The fix to restore the border is setting the width to 100% and the overflow to auto.

• My Account
  • Control Panel
  • Preferences
  • Edit Profile
  • Neomail
• Customise
  • Customise Neopet
  • Closet
  • Create a Neopet
• Games
  • Games Room
  • Favourites

Step 5. Making the Subsidiary Links Disappear & Appear on Hover

To make the the sub-set of links disappear, we employ the display property and set it to none. To have it appear on hover again, we introduce a new selector group and declaration. Note that it looks almost identical to the selector group above it with green border -- except instead of li, we use li:hover.

This parallel transition of display: none; to display: block; and li to li:hover creates the effect of the unordered list disappearing and appearing on hover.

• My Account
  • Control Panel
  • Preferences
  • Edit Profile
  • Neomail
• Customise
  • Customise Neopet
  • Closet
  • Create a Neopet
• Games
  • Games Room
  • Favourites

At this point, you're pretty much done with hardest part of the coding. All that's left is the decorative stuff -- as you can see, it doesn't look very pretty with the the ridiculously colored borders. You can change the fonts, borders, spacing (margin/padding), background colors, etc.

Step 6. Taking the Sub List of Links Out of the Flow of the layout.

In the previous step, notice when we hover over the links, the subset of links that appear pushes down the remaining content (which is quite distracting). To remedy this, we take it out of the flow of the layout with absolute positioning. Because TNT's filters don't allow the position property in the CSS, you have to go back to the HTML and manually inline-style it.

• My Account
  • Control Panel
  • Preferences
  • Edit Profile
  • Neomail
• Customise
  • Customise Neopet
  • Closet
  • Create a Neopet
• Games
  • Games Room
  • Favourites

Try hovering over the links now -- this paragraph and the content below it should remain unaffected even as the sub-links show up. And now you are finished! To reward you for putting up with me, here is the code in its entirety in a textarea for you.

<style> #nav, #nav ul { list-style: none; padding: 0; margin: 0; border: 1px red solid; } #nav { border: 1px red solid; width: 100%; overflow: auto; } #nav li { border: 1px orange solid; display: inline; float: left; } #nav li ul { border: 1px green solid; display: none; } #nav li:hover ul { display: block; } #nav li ul li { border: 1px blue solid; display: block; float: none; } </style> <ul id="nav"> <li> <a href="/">My Account</a> <ul style="position: absolute;"> <li><a href="/">Control Panel</a></li> <li><a href="/">Preferences</a></li> <li><a href="/">Edit Profile</a></li> <li><a href="/">Neomail</a></li> </ul> </li> <li> <a href="/">Customise</a> <ul style="position: absolute;"> <li><a href="/">Customise Neopet</a></li> <li><a href="/">Closet</a></li> <li><a href="/">Create a Neopet</a></li> </ul> </li> <li> <a href="/">Games</a> <ul style="position: absolute;"> <li><a href="/">Games Room</a></li> <li><a href="/">Favourites</a></li> </ul> </li> </ul>
If you use this coding, a link back is not required but it is much appreciated. :)