I need some advice in case I am attempting the impossible

Hi

I have tried to set up a vertical menu, with sub-menus, which are shown with the help of JQuery. There are eight “top” menu items altogether, four don’t have sub-menus and four do.

I have managed, through searching on the internet to find numerous examples of jQuery scripts to make the menu work (ie, when you click on a menu with a sub-menu, everything slides down to expose the sub-menus). But what I would like to do is when you have exposed the sub-menus and gone to one, the exposed sub-menus should remain exposed, until another “top” menu item is clicked, at which time another set of sub-menus would be exposed. Currently, as soon as a sub-menu is clicked, all the exposed sub-menus slide up, and if you want to select another from that set, you have to click the “top” menu again.

Essentially I am always on the same web page. The site is run through a database, and there is a index.php file to control what is going on, but the web page is always generated by a file called display.php, regardless of what menu item is selected, because that is only to indicate as to which information should be retrieved from the database.

I am not showing any code at this stage because I really would like to sort it out for myself (even though I am a complete novice with jQuery). But at the same time, I would really like to have this functionality, so may ask for more concrete help later.

So initially, if my ramblings above make sense, is what I wish to achieve possible?

Thanks in advance

Two questions

  1. When you click on a sub-menu option, does the page get reloaded or is the new content displayed using ajax so the page doesn’t physically refresh?

  2. Of all the drop down menu scripts you have tried, do you have a favorite that we might be able to help you tweak to do what you want?

Firstly, I have been away from my computer all day today, so am only just replying - thanks for your reply.

In answer to question (1) I really am not too sure. Do I have to use Ajax to refresh the page without it reloading? What I have is an index.php which controls all of the database actions, this “includes” a display.php to show the result in the web page. So when a submenu is clicked index.php gets the appropriate information from the database and then displays it in display.php, but because index.php is always showing in the URL window, I have always assumed that the page wasn’t really being reloaded. Now I think I must be wrong.

In answer to (2), it seems that the vertical menu at http://www.designchemical.com sees to be good. They have an advanced version which also save info to Cookies, which might be useful.

Can you perhaps tell me if I have a problem with pages reloading, in which case I have to check out how Ajax works. I think this is probably the case, and I have been wrong about my page not reloading. I usually like to solve things for myself, because it helps me learn, but of course, sometimes I have to ask for help, so I thank you for your help so far.

With #1, the script that uses cookies to save state will help you out with your problem, so I’d go that route.

Now I noticed they have a few menus, the Drill Down Menu and the Accordion Menu, both allow saving state out of the box. However, I’m not sure which menu you want to implement (keep in mind it doesn’t have to be either of those, we can likely help you implement save state into one of the others, if it is that important).

Hi cpradio. Thanks for the quick reply. I am interested in any of their vertical menus that use the jQuery slideDown and slideUp to expose the sub-menus. Once you have exposed the sub-menus I would like them to remain exposed until another “top menu” is clicked in case a user is interested in selecting more than one sub-menu option (not at the same time, of course).

If you go to http://www.designchemical.com/lab/jquery-vertical-accordion-menu-plugin/examples/ the menu I would quite like is the top left one. Of course I have a different look to my menu. In fact I have a css3 gradient behind the link names, to get that there I have used a <span>. But I guess that doesn’t matter, because when I tried that particular plugin, it did go to the page selected, it is just that the sub-menus slidUp as soon at they were clicked. Do you think that one looks like it might be made to leave the selected sub-menus exposed?

Thanks

Yes, that is one that I was referring to. Can you show us the code you used on your website to have the menu created using that plugin? Both the HTML and the JavaScript. As when I try it on their examples page, the sub-menus stay open as I click each link.

I couldn’t get it to work when I tried it the other day. When I clicked on the “top menu” it didn’t slideDown, so I gave up. I will have to set it up again and then I will post it here. Right now I am trying to get some other work finished (deadlines, don’t you love them?). It is probably going to take a few hours, so I will get onto this first thing in the morning, and then post both things here.

I really appreciate your help. I had a quick look at AJAX, it looks a little complicated, to say the least.

Not a problem, when you are ready, just post the information and I’ll take a look.
As for Ajax, yes, it can be complicated, so if you are not using it, let’s not go that route :slight_smile:

Good morning cpradio

I have installed the dcAccordion plugin (the No 1 version). But, before I show all my code (because there is so much of it, not because it is a secret) I wonder if I have discovered the problem.

I said last night that everything was controlled by one index.php file. Well, I have just realised that is not quite true. The Home page (which, of course is part of the navigation) has its own index.php file. Could this be causing the problem? I have linked the plugin’s js files and put the setup function into the head of both index.php files, but could there be some confusion being caused there. If you think not, then I will paste all my code, which I assume will be my two index.php file, the css file. and the nav.php which holds the navigation and is included into both index.php files.

Actually, I have decided to include all the files. It is not working properly. If I click the One of the pages with a slideDown submenu it doesn’t slide down. If I click on the Home page, then try one of the slideDown menus again, it does work. But only once, until I select the Home page again. So here is all the code:

nav.php:


<nav>
    <ul class="menu">
        <li><a href="/"><span class="menuBut">Home</span></a></li>
        <li><a href="#"><span class="menuBut">Coffees</span></a>
            <ul>
                <li class="dcjq-current-parent"><a href="/pages/?cat=1&subcat=all_coffees"><span>&blacktriangleright;</span> All Coffees</a></li>
                <li><a href="/pages/?subcat=DA"><span>&blacktriangleright;</span> Dandelion</a></li>
                <li><a href="/pages/?subcat=BU"><span>&blacktriangleright;</span> Dandelion &amp; Burdock</a></li>
                <li><a href="/pages/?subcat=CY"><span>&blacktriangleright;</span> Chicory</a></li>
                <li><a href="/pages/?subcat=RM"><span>&blacktriangleright;</span> Roasted Malt</a></li>
                <li><a href="/pages/?subcat=CO"><span>&blacktriangleright;</span> Chinnoh</a></li>
                <li><a href="/pages/?subcat=YA"><span>&blacktriangleright;</span> Yannoh</a></li>
                <li><a href="/pages/?subcat=FC"><span>&blacktriangleright;</span> French Coffee</a></li>
                <li><a href="/pages/?subcat=CODA"><span>&blacktriangleright;</span> Comfrey &amp; Dandelion</a></li>
                <li><a href="/pages/?subcat=*substitute"><span>&blacktriangleright;</span> Why a Coffee Substitute</a></li>
            </ul>
        </li>
        <li><a href="#"><span class="menuBut">Mills &amp; Misc</span></a>
            <ul>
                <li><a href="/pages/?subcat=samap_hand"><span class="triangle">&blacktriangleright;</span> Hand Mills</a></li>
                <li><a href="/pages/?subcat=samap_electric"><span class="triangle">&blacktriangleright;</span> Electric Mills</a></li>
                <li><a href="/pages/?subcat=samap_comm"><span class="triangle">&blacktriangleright;</span> Commercial Mills</a></li>
                <li><a href="/pages/?subcat=samap_comm"><span class="triangle">&blacktriangleright;</span> Chestnut Mills</a></li>
                <li><a href="/pages/?subcat=samap_dough"><span class="triangle">&blacktriangleright;</span> Dough Mixer</a></li>
                <li><a href="/pages/?subcat=samap_meter"><span class="triangle">&blacktriangleright;</span> Grain Humidity Meter</a></li>
                <li><a href="/pages/?subcat=porkert_wheatgrass"><span class="triangle">&blacktriangleright;</span> Wheatgrass Juicer</a></li>
                <li><a href="/pages/?subcat=porkert_ssg"><span class="triangle">&blacktriangleright;</span> Small Seed Grinder</a></li>
                <li><a href="/pages/?subcat=porkert_corn"><span class="triangle">&blacktriangleright;</span> Corn Grinder</a></li>
                <li><a href="/pages/?subcat=porkert_mincer"><span class="triangle">&blacktriangleright;</span> Meat Mincer</a></li>
                <li><a href="/pages/?subcat=porkert_nut"><span class="triangle">&blacktriangleright;</span> Nut Grater</a></li>
                <li><a href="/pages/?subcat=sauerkraut"><span class="triangle">&blacktriangleright;</span> Sauerkraut Pots</a></li>
                <li><a href="/pages/?subcat=max_labbe"><span>&blacktriangleright;</span> Pottery Sprouter</a></li>
                <li><a href="/pages/?cat=2&subcat=*order_mills"><span class="triangle">&blacktriangleright;</span> Order Form</a></li>
            </ul>
        </li>
        <li><a href="#"><span class="menuBut">Oils &amp; Varnishes</span></a>
            <ul>
                <li><a href="/pages/?subcat=naturalP"><span class="triangle">&blacktriangleright;</span> Natural Paints</a></li>
                <li><a href="/pages/?subcat=naturalF"><span class="triangle">&blacktriangleright;</span> Natural Finishes</a></li>
                <li><a href="/pages/?subcat=floor"><span class="triangle">&blacktriangleright;</span> Floor Products</a></li>
                <li><a href="/pages/?subcat=osmo"><span class="triangle">&blacktriangleright;</span> Osmo Products</a></li>
                <li><a href="/pages/?cat=3&subcat=*order_oils"><span class="triangle">&blacktriangleright;</span> Order Form</a></li>
            </ul>
        </li>
        <li><a href="#"><span class="menuBut">Herbs &amp; Chestnut Flour</span></a>
            <ul>
                <li><a href="/pages/?subcat=HE"><span class="triangle">&blacktriangleright;</span> Herbs</a></li>
                <li><a href="/pages/?subcat=CH"><span class="triangle">&blacktriangleright;</span> Chestnut Flour</a></li>
                <li><a href="/pages/?cat=4&subcat=*order_herbs"><span class="triangle">&blacktriangleright;</span> Order Form</a></li>
            </ul>
        </li>
        <li><a href="/pages/?subcat=contact"><span class="menuBut">Contact Us</span></a></li>
        <li><a href="/pages/?subcat=shipping"><span class="menuBut">Shipping Info</span></a></li>
        <li><a href="/pages/?subcat=links"><span class="menuBut">Links</span></a></li>
    </ul>
</nav>

css file


/*
    Document   : mainStyle
    Created on : Jul 22, 2012, 5:03:00 PM
    Author     : Arnold Acres Design
    Description: Stylesheet for Golden Fields Limited.
*/


/*  normal html tags  */
body {
    background-color: rgb(255,242,205);
    background-image: url('/images/pattern.gif');
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-size:100%;  /* making all   */
    font-size:16px;  /* browsers font-size 1em - 16px  */
    font-size:1em;   /*  font-size - 1em = 16px  */
}
#container {         /*size of containing div */
    max-width:858px;
    margin:20px auto;
}
header {
    width:100%;
    height:85px;
    margin-bottom:15px;
}
footer{
    width:549px;
    padding:0 20px;
    float:right;
    text-align:center;
    font-size:0.75em;   /* 12 / 16 */
    line-height:1.2em;
    margin-bottom:20px;
}
footer span {
    color:#a68500;
}

footer a{
    font-weight:normal;
}
section img {
    padding:5px;
}
i {
    font-style: italic;
}
b {
    font-style:bold;
}
.menu {
    width: 24.708624%;    /*212px  / 858px  */
    padding:0 5px;
    float:left;
    background-color:#f1e171;
    border-left: 10px solid #e7b901;
    text-align: center;
    -moz-border-radius: 0 20px 20px 0;
    -webkit-border-radius: 0 20px 20px 0;
    border-radius: 0 20px 20px 0;
}
.menu li a {
    display: block;
    width:180px;
    font-size: 0.75em;   /* 12  /  16  */
    margin: 11px 0 11px 12px;
    padding-top:11px;
    text-decoration: none;
    color: #ea7617;
}
.menu li a:hover, .menu li a.active {
    color: #000;
}
.menu li ul {
    display: none; /* used to hide sub-menus */
}
.menu li ul li {
    text-align:left;
}
.menu li ul li a {
    padding: 3px 10px;
}
.menu li ul li a.active {
    color:#000;
}
.menu span.triangle {
    font-size:1.4em;
    color:#a68500;
}
.menuBut {
    display:block;
    width:180px;
    text-align:center;
    padding:4px 3px;
    -moz-border-radius: 8px 8px 8px 8px;
    -webkit-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
    z-index:500;
    background: #c0c521; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #c0c521 69%, #edde6a 91%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(69%,#c0c521), color-stop(91%,#edde6a)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  #c0c521 69%,#edde6a 91%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  #c0c521 69%,#edde6a 91%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  #c0c521 69%,#edde6a 91%); /* IE10+ */
    background: radial-gradient(ellipse at center,  #c0c521 69%,#edde6a 91%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0c521', endColorstr='#edde6a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
section {
    width:549px;
    padding:10px 20px 20px 20px;
    float:right;
    background-color: #f1e171;
    border-right: 10px solid #c0c521;
    text-align: justify;
    -moz-border-radius: 20px 0 0 20px;
    -webkit-border-radius: 20px 0 0 20px;
    border-radius: 20px 0 0 20px;
}

section p  {
    font-size:0.875em; /* 14 / 16 */
    line-height:1.2em;
    padding-bottom:10px;
}
section ul {
    list-style:disc;
    padding:0 0 10px 5px;
}
section li  {
    font-size:0.875em; /* 14 / 16 */
    line-height:1.2em;
    padding-bottom:10px;
}
section li:last-child {
    padding-bottom:0;
}

h1 {
    font-weight:bold;
    font-size:1.5em;
    padding-top:5px;
    padding-bottom:10px;
}
section h1:first-child {
    padding-top:0;
}
a{
    /*  color: brown;*/
    color:#ea7617;
    font-weight: bold;
    text-decoration: none;
}
.cellbgHome {
    background-color:#fff2cd;
    margin: 0;
    font-size:0.875em;
    line-height:1.3em;
    padding:8px 4px;
    width:50%;
    vertical-align:top;
    border-color: #f1e171;
    border-width: 3px 3px 0 0;
    border-style: solid;
}
#extraInfo {
    background-color:#fff;
    border:1px solid #000;
    margin-top:20px;
    padding:0 10px;
}
table .shipInfo {
    font-size:0.85em; /* 12 / 16 */
    line-height:1.2em;
}
table.contactus td {
    padding:3px;
    vertical-align:top;
    font-size:0.85em; /* 12 / 16 */
    line-height:1.2em;
}
table.prodTable {
    border-collapse: collapse;
    width:552px;
    font-size:0.85em; /* 12 / 16 */
    line-height:1.2em;
}
table.prodTable thead {
    background-color:#c0c521;
    color: white;
    font-size:8pt;
    font-weight: bold;
}
table, th, td
{
    border-bottom: 2px solid #f1e171;
    border-right: 2px solid #f1e171;
    padding:4px;
    vertical-align: middle;
}
.cellbg{
    background-color: #fff2cd;
}
.rightAlign {
    text-align: right;
}
.centreAlign {
    text-align:center;
}
.leftAlign {
    text-align:left;
}
.none {
    display:none;
}

Home page index.php


<?php
$current_menu = "Home";
include $_SERVER['DOCUMENT_ROOT'] . "/../code4/db.inc.php";
?>
<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1.0,width=device-width"/>
        <title>Welcome | Golden Fields Limited</title>
        <meta name="description" content="Golden Fields - New Zealand Organic Coffee Substitutes - Purchase Online.">
        <meta name="keywords" content="golden fields,new zealand,golden fields dandelion,golden fields coffee,dandelion coffee">
        <meta name="author" content="Arnold Acres Design">
        <meta name="copyright" content="Golden Fields Limited">
        <meta name="contact_addr" content="Philippe Weiss <sales@goldenfields.co.nz>">
        <meta name="robot" content="ALL">
        <meta name="revisit-after" content="30 Days">
        <!-- **** layout stylesheets **** -->
        <link rel="stylesheet" href="/css/reset.css">
        <link rel="stylesheet" href="/css/mainStyle.css">
        <!-- jQuery 1.7.1 -->
        <script src="/js/jquery.min.js"></script>
        <script src='js/jquery.cookie.js'></script>
        <script src='js/jquery.hoverIntent.minified.js'></script>
        <script src='js/jquery.dcjqaccordion.2.7.min.js'></script>
        <!-- Modernizr 2.5.3 -->
        <script src="/js/modernizr.js"></script>
        <!--<script src="/js/menu.js"></script>-->
        <script>
            $(document).ready(function($){
                $('.menu').dcAccordion({
                    eventType: 'click',
                    autoClose: true,
                    saveState: true,
                    disableLink: true,
                    speed: 'fast',
                    showCount: false,
                    autoExpand: true,
                    cookie    : 'dcjq-accordion-1',
                    classExpand     : 'dcjq-current-parent'
                });
            });
        </script>
   </head>
    <body>
        <div id="container">
            <?php
            include $_SERVER['DOCUMENT_ROOT'] . "/includes/header.php";
            include $_SERVER['DOCUMENT_ROOT'] . "/includes/nav.php";
            ?>
            <section>
                <p>
                    Welcome to <i>Golden Fields</i>.  Established in 1987, and based in clean, green New Zealand, <i>Golden Fields</i> is a coffee substitute manufacturer and importer of natural paints and oils, mills and other products promoting a healthy lifestyle.
                </p>
                <p>
                    Below is a snapshot of our most popular products, please consult the menu on the left for a comprehensive listing.
                </p>
                <p>
                    Below is a snapshot of our most popular products, please consult the menu on the left for a comprehensive listing.
                </p>
                <table class="tableHome" cellspacing="2" width=550px>
                    <tr>
                        <td class="cellbgHome" width="50%">
                            <b>BioPin</b><br>
                            • <a href="natural_paints.php">Natural paints</a><br>
                            • <a href="floor_products.php">Natural oils, stains &amp varnishes</a><br>
                        </td>
                        <td class="cellbgHome" width="50%">
                            <b>Porkert</b><br>
                            • <a href="corn_grinder.php">Grinders</a><br>
                            • <a href="wheatgrass_juicer_fruit_press.php">Juicers</a><br>
                            • <a href="meat_mincer.php">Mincers</a><br>
                        </td>
                    </tr>
                    <tr>
                        <td class="cellbgHome">
                            <b>Samap</b><br>
                            • <a href="hand_mill.php">Hand stone grain mills</a><br>
                            • <a href="electric_mill.php">Electric stone grain mills</a><br>
                            • <a href="grain_humidity_meter.php">Grain humidity meter</a><br>
                        </td>
                        <td class="cellbgHome">
                            <b>Osmo</b><br>
                            • <a href="osmo.php">Natural wood finishes</a><br>
                        </td>
                    </tr>
                    <tr>
                        <td class="cellbgHome">
                            <b>Fermentation Pots</b><br>
                            • <a href="sauerkraut_pot.php">Sauerkraut pots</a><br>
                            • <a href="sauerkraut_pot.php">Cabbage shredders</a><br>
                        </td>
                        <td class="cellbgHome">
                            <b>Coffee &amp; Teas</b><br>
                            • <a href="dandelion_coffee.php">Dandelion coffee</a><br>
                            • <a href="all_coffees.php">Other coffee alternatives</a><br>
                            • <a href="herbs.php">Herbal Teas</a><br>
                        </td>
                    </tr>
                </table>
                <div id="extraInfo">
                    <h1 style="font-size:24px;"><b>New Products</b></h1>
                    <p>
                        <img style="float: right" src="/images/sprouters/sprouterLargeAndSmall2.jpg" />
                        <img style="float: right" src="/images/sprouters/sprouterSmallTrays2.jpg" />
                        <b>Pottery Sprouters</b>
                    </p>
                    <p>
                        Sprouting is an easy way to add essential vitamins and enzymes to your diet. It takes very little space in the kitchen and allows you to grow some of your food without actually needing a garden.<br><a href="sprouter.php">Check them out here.</a>
                    </p>
                    <br>
                    <p>
                        <b>Peppermint tea</b>
                    </p>
                    <p>
                        With our own peppermint, organically grown in Canterbury.
                    </p>
                </div>
            </section>
            <?php
            $foot = '';
            include $_SERVER['DOCUMENT_ROOT'] . "/includes/footer.php";
            ?>
        </div>
    </body>
</html>

All other pages index.php


<?php
include $_SERVER['DOCUMENT_ROOT'] . '/includes/helpers.inc.php';
?>
<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1.0,width=device-width"/>
        <title><?php echo $title; ?></title>
        <meta name="description" content="<?php echo $meta_description; ?>">
        <meta name="keywords" content="<?php echo $meta_keywords; ?>">
        <meta name="author" content="Arnold Acres Design">
        <meta name="copyright" content="Golden Fields Limited">
        <meta name="contact_addr" content="Philippe Weiss <sales@goldenfields.co.nz>">
        <meta name="robot" content="ALL">
        <meta name="revisit-after" content="30 Days">
        <!-- **** layout stylesheets **** -->
        <link rel="stylesheet" href="/css/reset.css">
        <link rel="stylesheet" href="/css/mainStyle.css">
        <!-- jQuery 1.7.1 -->
        <script src="/js/jquery.min.js"></script>
        <script src='js/jquery.cookie.js'></script>
        <script src='js/jquery.hoverIntent.minified.js'></script>
        <script src='js/jquery.dcjqaccordion.2.7.min.js'></script>
        <!-- Modernizr 2.5.3 -->
        <script src="/js/modernizr.js"></script>
        <!--<script src="/js/menu.js"></script>-->
        <script>
            $(document).ready(function($){
                $('.menu').dcAccordion({
                    eventType: 'click',
                    autoClose: true,
                    saveState: true,
                    disableLink: true,
                    speed: 'fast',
                    showCount: false,
                    autoExpand: true,
                    cookie    : 'dcjq-accordion-1',
                    classExpand     : 'dcjq-current-parent'
                });
            });
        </script>
    </head>
    <body>
        <div id="container">
            <?php
            include $_SERVER['DOCUMENT_ROOT'] . "/includes/header.php";
            include $_SERVER['DOCUMENT_ROOT'] . "/includes/nav.php";
            ?>
            <section>
                <?php
                echo $top;
                echo $table_head;
                if ($table_type == 1) :
                    ?>
                    <tbody>
                        <?php foreach ($results as $row) : ?>
                            <tr>
                                <td class="cellbg"><?php htmlout($row['pID']); ?></td><td class="cellbg"><?php htmlout($row['description']); ?></td><td  class="cellbg rightAlign">$<?php htmlout($row['price']); ?></td><td class="cellbg rightAlign">&nbsp;</td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                <?php elseif ($table_type == 2) : ?>
                    <tbody>
                        <?php foreach ($results as $row) : ?>
                            <tr>
                                <td class="cellbg"><?php htmlout($row['pID']); ?></td><td class="cellbg"><?php htmlout($row['description']); ?></td><td  class="cellbg rightAlign">$<?php htmlout($row['price']); ?></td><td class="cellbg rightAlign"><?php htmlout($row['priceINTL']); ?></td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                <?php elseif ($table_type == 3) : ?>
                    <tbody>
                        <?php foreach ($results as $row) : ?>
                            <tr>
                                <td class="cellbg"><?php htmlout($row['pID']); ?></td><td class="cellbg"><?php htmlout($row['description']); ?></td><td class="cellbg">Info</td><td class="cellbg centreAlign"><?php htmlout($row['coverage']); ?></td><td  class="cellbg rightAlign">$<?php htmlout($row['price']); ?></td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                <?php elseif ($table_type == 4) :
                    ?>
                    <tbody>
                        <?php foreach ($results as $row) : ?>
                            <tr>
                                <td class="cellbg"><?php htmlout($row['pID']); ?></td><td class="cellbg"><?php htmlout($row['description']); ?></td><td  class="cellbg rightAlign">$<?php htmlout($row['price']); ?></td><td class="cellbg rightAlign">&nbsp;</td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                <?php endif; ?>
                <?php
                if ($table_type != '') {
                    echo '</table>';
                }
                ?>
            </section>
            <?php
            include $_SERVER['DOCUMENT_ROOT'] . "/includes/footer.php";
            ?>
        </div>
    </body>
</html>

Thanks for your help

Okay, I’ve copied a majority of your code to play around with (stripped out a few pieces here and there just so I didn’t have to recreate all of the components).
Try it here

The menu you remembering the state perfectly for me after I made the following change:

I see you are assuming the site is being executed in the root folder (I am not, so that is one change I had to make). However, your pages/index.php file is trying to reference JavaScript files in /pages/js/ instead of /js/ is that intentional? (this is likely your problem, files: jquery.cookie.js, jquery.hoverIntent.minified.js, and the jquery.dcjqaccordion.2.7.min.js)

Let me know if that solve it for you too.

Thank you so very much cpradio! My menu is now working just like I want it to.

What a stupid mistake to make. I probably made it because I copied the js src file from the index.html supplied by the download, but that is no excuse for stupidity!