[Tutorial] Make a horizontal Navigation menu

[al3ks]

Hi everyone,

 

This is a tutorial for anyone who wants to create a horizontal navigation menu in osCommerce 2x. The nav menu we will be creating is in the header section.

 

You will be editing the following files:

 

 

[catalog]/includes/header.php

[catalog]/includes/languages/english.php

[catalog]stylesheet.css

 

1. Firstly open the file header.php and find this code:

<?php
 if (isset($HTTP_GET_VARS['error_message']) && tep_not_null($HTTP_GET_VARS['error_message'])) {
?>

 

Just before this code section we will add the navigation menu which will result it being at the very bottom of header section, unless you want it in a different section continue to the next step.

 

2. To create the nav menu we need to do the following:

2(a)- Make opening and closing <div> tag with the class "navigation" (or choose a different name if you like). Inside make <ul> tags following with opening and closing <li> tags inside to create a list of links.

 

Like this:

 

<div class="navigation">
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>

 

* The number of <li> tags determines how many links you will have in your nav menu (adjust if necessary)

 

2(b)- Inside your <li> tags you will need add php code to echo the individual links. Start by creating the <a href> link like this:

 

<?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, '') . '">' . HEADER_NAV_HOME . '</a>'; ?>

 

*Right now you hav the <a href=" tag to indicate a link, tep_href_link(FILENAME_DEFAULT, '') target of the link which in this case is the home page "DEFAULT". For other pages we would replace the DEFAULT with another page name. (You can get a reference of file name from the file includes/filenames.php)

 

HEADER_NAV_HOME is the text of the link. This needs to be added in the english.php definitions.

 

 

2©- After completing one link as the example above you need to place the links inside the <li> tags, like this:

<div class="navigation">
<ul>
<li><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, '') . '">' . HEADER_NAV_HOME . '</a>'; ?></li>
<li><?php echo '<a href="' . tep_href_link(FILENAME_CONDITIONS, '') . '">' . HEADER_NAV_CONDITIONS . '</a>'; ?></li>
<li><?php echo '<a href="' . tep_href_link(FILENAME_SHIPPING, '') . '">' . HEADER_NAV_SHIPPING . '</a>'; ?></li>
<li><?php echo '<a href="' . tep_href_link(FILENAME_CONTACT_US, '') . '">' . HEADER_NAV_CONTACT . '</a>'; ?></li>
</ul>
</div>

 

*Note how all links have different filenames and names.

 

3- Now we need to add the language definitions. Find the file /includes/languages/english.php (or prefered langauge) and add the following lines before teh last ?> and adjust the names to match your code we created in header.php.

 

define('HEADER_NAV_HOME', 'Home');
define('HEADER_NAV_CONDITIONS', 'Terms & Condtions');
define('HEADER_NAV_SHIPPING', 'Shipping info');
define('HEADER_NAV_CONTACT', 'Conatact us');

 

4- In this step I will show you tips how to style your navigation menu to make it looks neat and clean. Any of this changes can be adjusted to your needs.

Open stylesheet.css and add the code:

 

.navigation {
width: 100%;
height: 35px;
margin-bottom: 10px;
background: url(images/nav.gif);
background-repeat: repeat-x;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
}

.navigation ul {
margin: 0;
text-align: center;
width: 95%;
padding: 0;
}

.navigation ul li {
font-family: Verdana, Geneva, sans-serif;
font-size: 15px;
color: #f9f9f9;
list-style-type: none;
display: inline;
text-align: center;
line-height: 1.8em;
padding-left: 2%;
margin: 0;
}

.navigation ul li a:link, a:visited {
font-weight: bold;
color: #666;
}

.navigation ul li a:hover {
color: #0096ff;
}

 

Following this tutorial your final result should look like this: (You can make any changes and adjustments you need)

 

http://img600.imageshack.us/img600/6034/finalnavmanuresltosc.jpg

 

Hope this tutorial was helpful to someone,

If you have any questions or problems post them here.

[npn2531]

This is really a vertical menu compressed to a height of 35 pixels, change that height to something like 100 and you'll see what I mean. You need to float the li's left or right to make it horizontal.

[dynathecat]

Had a huge headache trying to get a horizontal menu and some kinda drop down addition.

 

Most, I think, were made for v.2.2 osc and left 2.3 people stranded.

 

Thank you very much for this tutorial and it really worked nicely.

 

But, I was wondering if you can teach me to configure the href lines to become linked to my categories.

<li><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, '') . '">' . HEADER_NAV_HOME . '</a>'; ?></li>

 

So instead of the default example u gave, let's say, nav "home"; I would like it to link to one of my main product categories. And the horizontal menu become like a constant available horizontal quick bar.

 

I know how to change the title to what i want but... changing the hyper link to the category page i want is not working.

 

If you can provide an example of how to link to another page, let's say any product page, I can try to figure it out from there.

 

Please help this osc newbie.

 

Been trying to figure it out, but failed miserably :(

 

Thanks much for your time and help!

[dynathecat]

For anyone trying to find the code for hyper linking text to a category page. You can manipulate the code:

 

<a href="<?php echo tep_href_link(FILENAME_DEFAULT, 'cPath=24'); ?>">Widgets</a>

 

The cpath number should be the category page u are trying to link to. (You can find the number by surfing ur site and it will be in the address bar).

 

The "Widgets" can be changed to your needs and is the text title that I wanted to hyper link. The code above will create a Widgets button to link to the category page. This may not be what you want.

 

 

 

If you want the nice style aleksander provided for this menu and keep the text style consistent, you have to adjust the catalog/language/english.php and define the title path right.

 

Or, adjust/add: define('HEADER_WIDGETS', 'Widgets');

 

 

 

Then the code in your header.php should change

 

From:

 

<a href="<?php echo tep_href_link(FILENAME_DEFAULT, 'cPath=24'); ?>">Widgets</a>

 

Into:

 

<li><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=24') . '">' . HEADER_WIDGETS . '</a>'; ?></li>

 

I am running v2.3 and the codes have worked for me.

 

Maybe everyone knew this already but I did not... so hope it helps others too!

 

Thanks again for your hard work on this menu alek!

[dynathecat]

Also, I actually had a default breadcrumb overlap of the horizontal menu.

 

The overlap came from a bread crumb "top > Catalog" feature that came with my default osc install.

 

While the feature is very nice, you may wish to remove this feature as it may conflict with your horizontal menu items.

 

You will need to go into catalog/includes/application_top

 

Simply put // in front to slash out the feature (and you can still keep the code so you can use it again in the future if you wanna.):

 

//// application_top.php slashed out (line 453 & 454)

 

// $breadcrumb->add(HEADER_TITLE_TOP, HTTP_SERVER);

// $breadcrumb->add(HEADER_TITLE_CATALOG, tep_href_link(FILENAME_DEFAULT));

 

This removed the "bread crumb" header so it did not overlap the horizontal menu.

 

If you do not have this problem, then good for you. :D