Saturday, January 30, 2010

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.

No comments:

Post a Comment