0
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.
Edited by al3ks, 10 June 2012 - 01:33 AM.
