Skip to main content

Ivan Teoh

Something personal yet public

Creating a Horizontal Menu

I want my site to have a horizontal menu. So that my friend can easily browse to the page they want. Here are the steps for WordPress 2.6 that I do:

Step 1: Create horizontal menu showing page list

First I have to decide what page need to be in the horizontal menu. Currently, I just need "Home", "Blog" and "About" pages. This navmenu division is right under header division in header.php (theme template file):

16-header.php (Source)

<div id="navmenu">
<ul>
    <li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
    <li><a href="blog">Blog</a></li>
    <li><a href="about">About</a></li>
</ul>
</div>

Step 2: Add style on the horizontal menu

I need a style that match with the theme. I did it in the rush. After some study, the style.css (theme template file) will have additional code as below:

16-style.css (Source)

/* Begin NavMenu */
#navmenu
{
  font-size:14px;
  color:#73A0C5;
  font-weight:bold;
  padding:6px;
  overflow:auto;
  height:1%;
  clear:both;
}

#navmenu li
{
  display: inline;
}

#navmenu a
{
  color:#73A0C5;
  text-decoration:none;
  margin:0 10px;
  height:23px;
  line-height:23px;
  float:left;
  display:block;
}
/* End NavMenu */

Comments

Comments powered by Disqus