Superfish Horizontal Category Menu

Adapted from:

  1. Category Box as Nested Unordered List for EZ(er) CSS & Dynamic menus v 1.00
  2. Superfish Jquery Menu plugin

Links to Demos and more info at www.niora.com/css-oscommerce.

Installation:

STEP 1: Upload files
Upload the included file cat_navbar.php to catalog/includes/modules.
Upload the included file superfish.css to catalog/css (you may need to create a folder called 'css' on the catalog level
Upload the included file superfish.js to catalog/javascript (you may need to create a folder called 'javascript' on the ctalog level
Upload the included five background files to the images folder superfish-arrows.png, superfish-background.png, superfish-border.png, superfish-shadow.png and superfish-underline.png

STEP 2: Reference the installed files

If you are using OSCommerce 2.3 or above, skip step 2.
If you are using the OSC to CSS contribution (tableless OSCommerce)
open includes/application_top.php

change:

$stylesheet='<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
';

to:

$stylesheet='<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src=" '.(isset($_SERVER['HTTPS']) && (strtolower($_SERVER['HTTPS']) == 'on') ? 'https://' : 'http://') . 'ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript/superfish.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/superfish.css" />
';

If you are using the Standard OSCommerce place the following references in each catalog page between the <head> and </head> tags:

<link rel="stylesheet" href="css/superfish.css" />
<script type="text/javascript" src=" '.(isset($_SERVER['HTTPS']) && (strtolower($_SERVER['HTTPS']) == 'on') ? 'https://' : 'http://') . 'ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript/superfish.js"></script>

STEP 3
If you are using the OSC to CSS contribution (tableless OSCommerce)
open includes/template_top.php

just above the closing </head> tag add:

<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
</script>

If you are using the Standard OSCommerce place the following in each catalog page just above the closing </head> tag:

<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
</script>

STEP 4: Install the Html in header.php
open includes/header.php

find:

<div id="header-breadcrumbs">

place the following directly above

<!--Superfish Horizontal Navigation bar-->
<div class="clear"></div>
<div class="cat_navbar">
<?php
if ( file_exists(DIR_WS_MODULES.'cat_navbar.php') ) {
require(DIR_WS_MODULES.'cat_navbar.php');
}
?>
</div>
<div class="clear"></div>
<!--end Superfish-->

Operation:

use the CSS in the file superfish.css to design the menu. Additional configuration options can be found in the comments of cat_navbar.php.

OSC to CSS version 2.0: Upgrade

See Demos/Discussion/Support:
Demos/Discussion/Support

OSC to CSS upgrade to version 2.0

This contribution upgrades OSC to CSS to OSC to CSS v2.0

    Improvements

  • Reorganizes CSS stylesheet(s) Separate Stylesheets are created for structure, text, navigation bar and styling.
  • Stylesheet selectors rewritten for consistency and ease of design Many div tags rewritten with multiple classes. This allows the elimanation of many stylesheet selectors, and makes it far easy to make uniform consistent site wide changes.
  • Improves/simplifies infobox layout. Layout is much more intuitive and easy to style
  • Improves styling (appearance)

    New Features

  • Installs 960 grid system The 960 grid system greatly facilitates alignment, proportion and layout issues. It speeds up design, creates consistency, solves cross browser problems, and opens up a new world of options and possiblities are available.
  • Infobox can be installed anywhere. For example

    <?php include(DIR_WS_BOXES . 'shopping_cart.php'); ?>

    the code that places the shopping infobox in the left or right column, will place the same file in the content, header or footer. It can be independently styled. For example:

    .infobox_heading{
    background: url(../images/bg_infobox_header.gif);
    }

    Puts a background image in the infobox header but the same shopping_cart infobox placed in shops header (which has an id=header) can be styled with no header at all like so:

    #header .infobox_heading{
    background: none;}

  • Adds horizontal JQuery-Ready category navbar (superfsh) A horizontal Navbar is installed the operates just like the category infobox. This navbar is a JQuery-ready from Superfish. From the superfish site you can download stylesheets and files to easily create new styling and effects.

Installation

OSC to CSS version 2.0 is designed for OSCommerce v2.2 r2a with the OSC to CSS contibution installed. Expect some layout issues, esp. if you have modified your installation of OSC to CSS. The included stylesheet, upgrade.css, contains CSS selectors used in OSC to CSS that should help alleviate these issues.

Step 1:Start with your installation of OSC to CSS

Step 2:Upload all files in the contribution, overwriting your existing files

Step 3: Open includes/application_top.php

find:

$stylesheet='<link rel="stylesheet" type="text/css" href="stylesheet.css">';

replace with:

$stylesheet='<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/superfish.css" />
<link rel="stylesheet" href="css/upgrade.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/styles.css" />
';


note: the order that these stylesheets are listed is important. You want reset.css to be read first

Step 4: Open includes/languages/english.php

remove the span tags from all infobox header definitions
for example, change:

// categories box text in includes/boxes/categories.php
define('BOX_HEADING_CATEGORIES', '<span class="categories">Categories');



to:

// categories box text in includes/boxes/categories.php
define('BOX_HEADING_CATEGORIES', 'Categories');


Step 5:Open includes/functions/html_output.php

Make sure the following has been changed. (only if you are not replacing html_output.php) add stylesheet control to the text forms
replace

function tep_draw_input_field($name, $value = '', $parameters = '', $type = 'text', $reinsert_value = true) {

with

function tep_draw_input_field($name, $value = '', $parameters = 'class="input-style"', $type = 'text', $reinsert_value = true) {

add class designations to images and thus stylesheet control(in OSC to CSS v2 many images have classes. You need this to style them)
replace

// The HTML image wrapper function
function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') {
if ( (empty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {
return false;
}
// alt is added to the img tag even if it is null to prevent browsers from outputting
// the image filename as default

$image = '<img src="' . tep_output_string($src) .'" border="0" alt="' . tep_output_string($alt) . '"';


with

// The HTML image wrapper function
function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '', $class= '') {
if ( (empty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {
return false;
}
// alt is added to the img tag even if it is null to prevent browsers from outputting
// the image filename as default

$image = '<img src="' . tep_output_string($src) . '" class="'. tep_output_string($class) .'" border="0" alt="' . tep_output_string($alt) . '"';

Step 5.5: If you are using CSS buttons instead replace html_output.php with the same file in v2 set or make the following changes

In includes/functions/html_output.php
replace

with

add the following to your styles.css

Step 6: Open the remaining catalog pages.

Compare with the catalog pages in OSC V2 and make changes.

Essentially you are deleting/changing the class designation on a few html tags on each page to match the html tags on the same page of OSC to CSSv2. These are the class designations in the stylesheet upgrade.css. When you are done, you should delete upgrade.css from the css folder.


That's it, you're done