As you may know, I am helping to administer The Woolly Mom. However, the theme we are using doesn’t have a dynamic sidebar. I must correct this! The steps: Decide the layout, Write the CSS, Make it dynamic, Add the Widgets.

Today’s Topic: Moving The Page Navigation

The next step in transforming The Woolly Mom’s Sidebar is to pull the Page listing out of the sidebar and turn it into a menu. To do this I am going to make a CSS rollover list. Lets start with the HTML for the menu:

This will place all of the menu items in a list with an ID of topmenu. Now we need to define the constraints of the list. We start by defining the constraints of the unordered list itself:

Now we need to clear the style of the list items and set the display to inline:

The easiest way to make the menu items “flashy” and roll over is to use links with hover changes. You can also do this by using rollover images, but I decided to go with the easier method. Set the “box sizes” and font options for the links:

Then set the colors:

Now change the colors by using link hover:

Viola! Here is the finished product:

And when one hovers over an option:

Rate this with SezWho :

2.5

Rate this post:

Related Posts

• Wordpress Tutorial: Creating A Sidebar Part Four - Widgitize Your Theme
• Wordpress Tutorial: Creating A Sidebar Part One
• Wordpress Tutorial: Creating A Sidebar Part Two
• Webmaster’s Edge Tutorials On Tutorialized
• The First Batch Of Wordpress Plugins