Posted by David Tedman

* This blog post is part of Invoke’s participation in the 2008 Vancouver Blogathon for Charity

Invoke’s highly successful EATS software launches it’s largest
client yet this week.? Fort Worth Texas based Super Suppers has over
150 locations and is close to being the largest meal preparation
franchise in the world.? Judie Byrd founded The Culinary School of
Fort Worth where people can earn chef’s certificates after their day
jobs.? Now Judie and her team write, test, and implement the recipes
that makes Super Suppers so successful.

This week our team has worked very hard to help the stores achieve a
seamless migration to their new home with EATS and we can’t be more
proud of the effort and success of the launch.

With the new EATS system, Super Suppers has increased their ability to
analyze sales and buying patterns through EATS reporting systems, and
also move towards a quicker checkout process with a full-featured Web
based POS.

The Suckerfish menus we originally used had problems with Safari/Opera support so we used a variant based on Suckerfish called Son of Suckerfish. From there we had to make some Wordpress modifications.

1. Open sidebar.php and remove (or comment out) wp_list_pages(); line

2. Open your header.php and put this code wherever you want the menus to start

<div id=”toolbar”>

<?php wp_list_pages(); ?>

</div>

3. In your header.php paste the following.

<script language=”javascript”>

sfHover = function() {

var sfEls = document.getElementById(“nav”).getElementsByTagName(“LI”);

for (var i=0; i<sfEls.length; i++) {

sfEls[i].onmouseover=function() {

this.className+=” sfhover”;

}

sfEls[i].onmouseout=function() {

this.className=this.className.replace(new RegExp(” sfhover\b”), “”);

}

}

}

if (window.attachEvent) window.attachEvent(“onload”, sfHover);

</script>

4. style.css

We wanted to go horizontal so we used the following in our style.css file.

/*menu */

#nav {

margin-left: 295px;

list-style: none;

background: #900;

padding: 0;

border: 1px solid #fff;

border-width: 0px 0px 0px 1px;

}

#nav ul {

margin: 0;

padding: 0;

height: 1em;

}

#toolbar form {

margin: 0;

padding: 0.1em 2em 0.1em 0em;

height: 1em;

}

#toolbar input {

margin: 1px;

}

#nav a {

display: block;

color: #fff;

text-decoration: none;

padding: 0.1em 2em;

}

#nav li {

float: left;

padding: 0;

background: #900;

border: 1px solid #fff;

border-width: 1px 0;

}

#nav li ul {

position: absolute;

left: -999em;

height: auto;

width: 14.4em;

w\idth: 12.9em;

font-weight: normal;

border: 1px solid #fff;

margin: 0;

list-style: none;

}

#nav li li {

padding-right: 1em;

width: 13.4em;

border: 0px;

}

#nav li ul a {

width: 12em;

w\idth: 9em;

}

#nav li ul ul {

margin: -1.75em 0 0 14em;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left: auto;

}

#nav li:hover, #nav li.sfhover {

background: #F20000;

}

/* end menu */

5. You should be good to go. Best of luck!

6. Edit wp-includes/template-functions-post.php
around line 326 comment out or replace
$output .= ‘<li class=”pagenav”>’ . $r['title_li'] . ‘<ul>’;
with
$output .= ‘<ul id=”nav”>’;

Thanks to htmldog for Son of Suckerfish tutorial.