horizontal nav with gadgets

Horizontal Navigation Using Gadgets

The layout menu allows you to inset navigation below the header.Select the "Add a gadget" immediately below the header. Scroll down and choose any of the link lists. For example, I choose link list. Hit the plus button. The configure link list menu pops up. Don't give the list a name. The reason is that you want only the link names to appear. Finish the menu box with as many links as you wish to appear in your horizontal menu.

Now, if you save the layout, you will notice that when you view the blog, the link list will appear underlined with bullets and in block form. The reason for this is that this is the default css for an unordered list, which is what your link list is. Links are underlined by default. To create an inline list and remove the bullets, you will have to apply the inline code to the ul and none to the li element. Finally, if you want to remove the underline from the a element use the property none.

So, that your property changes don't apply to all list and link elements, give the newly created navigation a div tag with its own unique id or class, i.e. "topNav". Then, in the style section, apply the appropriate css to the topNav id or class. Do so for the ul, li, and a elements to change the properties to inline, none and no underline. Get the specific css to use.

menus - navigation - horizontal navbar

Add top navigation - horizontal navbar

This is a two part discussion in how to add top navigation to your blog. We will be creating horizontal navigation, placing it at the top of your blog, and finally styling it.

There are literally hundreds of sites that give the html and css to create menus for your site. CssPlay by Stu Nichols is a good example of a collection of menus from which to choose.

The menu itself is html using an unordered list, where each list item will link to a specified url.

The styling of the list items and the links is achieved by the use of css. A long explanation is not warranted here. Suffice it to say that the "inline" declaration will change the appearance of the list from a vertical block to horizontal. For a step by step explanation in how to create and style a horizontal menu check out 456BereaStreet.com.