Creating Horizontal Menus
Posted by admin - Feb 29, 2012 Site Design and Layout 0 0 Views : 384 Receive Updates For This Category
Article Tools
- Print this page
- Add Comment
- Send to Friend
- Last Updated on :
Feb 29, 2012
Horizontal Menus are an excellent way to create a menu of categories or Pages, highlighting specific areas of interest within your website. Many web designers place a horizontal menu under the header, where they draw the eye.
Horizontal menus are created with the HTML List feature. Yes, while they are horizontal instead of vertical, like typical lists, they are still a list. CSS presentation styles allow us to set the list to run on one line instead of a separate line for each list item.
Since horizontal menus are simply lists in a horizontal line, lets start the process with a list.
Contents
[hide]
1 Creating a Horizontal Menu
1.1 Applying the CSS
2 Without CSS
3 More Information on Horizontal Menus
Creating a Horizontal Menu
Below is the simple list for our horizontal menu. We recommend you keep your list small as too many will stretch wide across the screen and may cause some layout problems. We have enclosed the list in a division called navmenu.
As you can see, within our list we have included a PHP tag for the “home page” and several categories, as well as a link to WordPress, those helpful folks. The list would look like this, in its simplest form (as styled by the Codex):
HOME
RECIPES
TRAVEL
WORDPRESS
You can also use the wp_list_categories() template tag to list your categories. If you just want categories 1, 3, 4, and 5 listed and the rest excluded, your list might look like this:
The place to put your new list might be just under the header. In WordPress v1.5, open the header.php file in the WordPress Theme folder you are using. Paste the code at the bottom of the file after the header DIV and then save the file.
In WordPress v1.2, open the index.php file and look for the end of the header section and place your list code there.
Applying the CSS
By default, a list runs vertically, each item on its own line. It also includes an image, known as a bullet, before each line. In your stylesheet, we need to add a reference to the navmenu and the first step is to remove the bullet and set our margins and padding to zero for the whole list.
Related Posts
-
Using Smilies
February, 29 2012 0
-
Using Gravatars
February, 29 2012 0
-
Adding Asides
February, 29 2012 0
-
Administration Menus
February, 29 2012 0