Workshop for Absolute Beginners – How to build an easy to manage horizontal menu for your website using CSS, PHP and jQuery « HBird's Internet Developer's Resource Blog

Workshop for Absolute Beginners – How to build an easy to manage horizontal menu for your website using CSS, PHP and jQuery

HB Admin | For Beginners | 0 Comments - Be the first to add comment

We are starting a new section called “Workshop for the Absolute Beginner Web Programmer” and this is the first tutorial in this series.

This article is targeted at the very novice web designer or a developer who is looking for a practical solution in building a horizontal menu build out of pure XHTML markup and styled using CSS. It also explains how to keep the markup for the navigation menu in to a separate PHP file and include it in to your main website. So lets create a CSS styled horizontal menu.

In this article we will be building a horizontal menu by taking care of these objectives in our approach.

The horizontal menu uses text for the menu labels instead of any images.
The menu should indicate the current page in which it is being shown. For this we will be using a simple marker image to indicate the current page.
The menu items should have some sort of mouse hover indicator to show the user that they are navigation elements.
The menu should be placed in a separate file for easily maintaining any future changes to the menu structure.

Building the Menu

For keeping things simple and neat we are creating a simple horizontal navigation menu with 6 menu items. So let us create the HTML markup for that first and keep it as a file called navigation.php

Markup for our menu:

<ul id="main_navigation">
<li><a href="#" mce_href="#" <?php if ($current_page=="home"){echo 'class="active"';}?>>Home</a></li>
<li><a href="#" mce_href="#" <?php if ($current_page=="about"){echo 'class="active"';}?>>About</a></li>
<li><a href="#" mce_href="#" <?php if ($current_page=="products"){echo 'class="active"';}?>>Products</a></li>
<li><a href="#" mce_href="#" <?php if ($current_page=="services"){echo 'class="active"';}?>>Services</a></li>
<li><a href="#" mce_href="#" <?php if ($current_page=="projects"){echo 'class="active"';}?>>Projects</a></li>
<li><a href="#" mce_href="#" <?php if ($current_page=="contact"){echo 'class="active"';}?>>Contact</a></li>
</ul>

This is the first draft of our navigation.php file with just an unordered list will all the links inside list items.

Markup for Index.php

Below is the markup of our main web page. In it you can find that the navigation.php file is included into our main page using the include_once() php method.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="common.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<h1>Horizontal Menu Demo</h1>

<?php
include_once('./includes/navigation.php');
?>
</div>

</body>
</html>

This will give us a very Spartan menu system on our main page with links arranged as an unordered list.

Now lets get in to styling the menu items in to a horizontal menu using CSS.

First we are styling our unordered list to have no margins and no padding and then make it ready to contain each of the menu items inside it floated to the left. We are also switching off the bullets of the list item by using the list-style-type property. We are also setting some basic font and color properties too. So create a new style sheet file named common.css and add the below given style to it.

#main_navigation {
margin: 0;
padding: 0;
margin-top:15px;
background: #0064AC;
list-style-type: none;
float: left;
font-family:Georgia;
font-size:13px;
text-transform:uppercase;
}

Attach the style sheet to your index.php file using


<link rel="stylesheet" href="common.css" type="text/css" />

Now our menu will look like this.

Now we can style the individual list items. Here too we are making the list items have no padding and margins and we are floating each of the menu items to the left.

#main_navigation li {
 margin: 0;
 padding: 0;
 float: left;
}

Aha ! Our menu finally has a horizontal layout.

Now we can spruce up the menu items by giving the links inside them some more styling.

#main_navigation a {
float: left;
width: 110px;
text-align: center;
 color: #FFF;
 text-decoration: none;
 line-height: 45px;
 border-right: 1px solid #FFF;
}

Our horizontal menu is taking shape nicely and will have a layout like this after the above given style is added.

Ok! Lets add some visual indicator to the individual menu item when the mouse pointer is hovered over it. We use the :hover selector of the menu item link to change the background color to add the mouse hover indicator.

#main_navigation a:hover{
background:#0083E0;
}

The menu will look like this when the mouse is hovered over the About link.

Lets add one more visual cue to the menu items. Add the below given style statement to our existing style definition for #main_navigation a

background:url('./images/arw.gif') 5px center no-repeat;

This will add a small arrow to the left side of each menu item.

Edit the background entry in #main_navigation a:hover as below

background:#0083E0 url('./images/arw.gif') 13px center no-repeat;

That last bit of adds a bit of visual response to the menu in the form of a different background color and the black arrow moving a bit towards the menu text on the mouse hover state.

But the arrow movement looks not elegant as it just places the arrow from 5px on left to 13px on left creating a single frame jump. Lets add a bit more spice to our mouse hover using the elegant jQuery javascript library.

Adding a smooth mouse over animation to our menu item using jQuery

jQquery is a JavaScript library which can be used to simplify and automate complicated JavaScript tasks on a webs page. By using such libraries the developer can write powerful solutions with very less code and can place the focus just on the task at hand. You can download the latest version of the library from http://www.jquery.com

Edit the background entry in #main_navigation a:hover as below

background:#0083E0 url('./images/arw.gif') 5px center no-repeat;

We are including the library in our index.php using the below given piece of code. Add it either to the of the index.php or just above the tag.

<script src="jquery-1.4.1.min.js" type="text/javascript"></script>

We are going to attach a mouse hover event to each of the links in our horizontal menu and on hover we are going to use the very powerful animate() method of jQuery to change the background-position of the element to 13px from 5px. On mouse out we are going to do the reverse to place the background image back to its original position.

So here is the code that adds this power to our web page. Add it below the script statement where you have added the jquery library .js file to your page.

<script>
      $(document).ready(function() {
          $('#main_navigation a')
              .hover(function() {
                  $(this).stop().animate({'background-position': 13}, 500);
              }, function() {
                  $(this).stop().animate({'background-position': 5}, 500);
              });
      });
</script>

The $(document).ready (function() { .. } is the jQuery way of making sure that the code written inside this block gets executed once the page elements have loaded.

We are attaching the animate function to each of the links in our horizontal menu by using the $('#main_navigation a') selector. This statement will select each of the a element coming inside 'an element with an id of ‘main_navigation’.

The .hover() method is used to attach the animate function to those element selected by jQuery. The .hover() method takes two function arguments, the first function will be executed when the mouse cursor enters the selected element, and the second is fired when the cursor leaves. And for each of those elements we are adding an animate function, which will alter the background-position at a speed of 500 milliseconds.

Making our menu Page aware

Now all that is left is to make the menu indicate the current page that is being viewed. For that lets first add some more styles to our css file. We are adding a class called .active with a different background color than the normal menu item.

#main_navigation a.active {
background:#0083E0 url('./images/arw.gif') 5px center no-repeat;
}

Now all that is needed to make a menu item associated with the current page to stand out with a different visual indicator is to apply this .active class to the link element. Since we are dynamically including the navigation markup from an external file to each of our web page we will have to use a php variable in the web page to pass the current page information to our navigation.php file.

For that we are slightly altering the code segment in the index.php file where we are including the navigation.php file. Replace it with the below given code.

<?php
$current_page = “home”;
include_once('./includes/navigation.php');
?>

We are defining a $current_page variable and giving it a unique identifier for each page.

Now in navigation.php we can check if the $current_page contains an identifier for a specific page and add a class=”active” to the corresponding menu link item. Alter the navigation.php page to the code given below.


<ul id="main_navigation">
<li><a href="index.php" <?php if ($current_page=="home"){echo 'class="active"';}?>>Home</a></li>
<li><a href="about.php" <?php if ($current_page=="about"){echo 'class="active"';}?>>About</a></li>
<li><a href="products.php" <?php if ($current_page=="products"){echo 'class="active"';}?>>Products</a></li>
<li><a href="services.php" <?php if ($current_page=="services"){echo 'class="active"';}?>>Services</a></li>
<li><a href="projects.php" <?php if ($current_page=="projects"){echo 'class="active"';}?>>Projects</a></li>
<li><a href="contact.php" <?php if ($current_page=="contact"){echo 'class="active"';}?>>Contact</a></li>
</ul>

That’s it. For our homepage where we have defined the $current_page as “home” the first menu item will have an ‘active’ class added to it and will look like this:

Now for each page before loading the navigation.php all that you have to do is to define the $current_page variable for the token to identify that specific page. The php code we have added in the navigation.php page will add an ‘active’ class to the menu item associated with that page and the menu item will be shown with a different style indicating current selection.

Conclusion

We have used a very simple piece of pure HTML markup to build this horizontal menu. By using the include() method in php we have taken a basic look at the concept of using templates. You can build on these ideas to create more complex menu designs with background images, more beautifying css styles and more beautiful animation effects.

Drop in your suggestions about this workshop and let us know about topics that you would like us to cover in coming editions of our workshop.

This entry was posted on Monday, August 30th, 2010 at 1:54 pm and is filed under For Beginners. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.