How To Create Horizontal Menus

149. How to Create Horizontal Menus

Horizontal Menus are an awesome way to create a menu of categories or Pages, highlighting specific areas of interest within your website. Most web designers place a horizontal menu under the header, where they draw the eye.

Horizontal menus are usually created with the HTML List feature. While they are horizontal instead of vertical, like typical lists, they are still a list. CSS presentation styles allow to set the list to run on one line instead of a separate line for each list item.

As horizontal menus are simply lists in a horizontal line.

Here is the simple list for our horizontal menu. It’s recommended that you keep your list small as too many will stretch wide across the screen and may cause some layout problems. The list enclosed in a division called navmenu.

<div id=”navmenu”> <ul> <li><a href=”<?php echo get_settings(‘home’); ?>”>HOME</a></li> <li><a href=”wordpress/recipes/”>RECIPES</a></li> <li><a href=”wordpress/travel/”>TRAVEL</a></li> <li><a href=”http://www.wordpress.org”>WORDPRESS</a></li> </ul> </div>

As it’s seen, in this list we’ve 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

This much, guys! Hope you liked this article!

 

Share this!

Post Author: Staff

Leave a Reply

Your email address will not be published. Required fields are marked *