Jump to content
Sign in to follow this  
Chemo

[Contribution] Collapsible CSS Category Menu

Recommended Posts

This contribution caches the category tree as a serialized array. Upon each page call the script first checks to make sure the cache file exists and if so uses that data to populate the category tree. If the file does not exist it calls tep_get_categories(), sets the $tree array, and then writes the data to the cache file.

 

Modifications by the store owner to the categories (rename, move, delete, etc.) are handled by the script to simply delete the cache file. When a customer visits the store and the cache file in not present it will create it automatically.

 

The category menu is fully CSS driven and easy to modify for the individual store look and feel. In addition, it is faster and less resource intensive than the traditional DHTML menu solutions.

 

Download Collapsible CSS Category Menu

 

Bobby

Share this post


Link to post
Share on other sites

I include a link in the install directions for a live store that has the contribution installed. For those that don't download the package and read the install directions here is a link to a store that I installed it on:

MDofPC.com

 

Note: this is a live store so don't place any test orders. Further, I did not design the site so the graphic outlay is not mine. I merely modified his code to produce the contribution.

 

Bobby

Share this post


Link to post
Share on other sites

Damm that's nice Chemo.

 

Can't wait to use this contribution.

 

Have a client in China with a bazillion subcategories.

 

Perfect solution for them.

 

I'll be sure and make a donation if and when I use it!

 

The cool menu is nice, but it has to be positioned and doesn't work well on a centered page and is a pain in the a$$ to install.

 

TJ

 

 

 

 

I include a link in the install directions for a live store that has the contribution installed.  For those that don't download the package and read the install directions here is a link to a store that I installed it on:

MDofPC.com

 

Note: this is a live store so don't place any test orders.  Further, I did not design the site so the graphic outlay is not mine.  I merely modified his code to produce the contribution.

 

Bobby

Share this post


Link to post
Share on other sites

Just remember that everything is CSS driven so be sure to customize it for the site outlay...I'm sure you're well versed with CSS though so it shouldn't be a problem.

 

Enjoy!

 

Bobby

Share this post


Link to post
Share on other sites

I'm going to play with it today and will send you a link.

 

Thanks Bobby.

 

 

 

 

Just remember that everything is CSS driven so be sure to customize it for the site outlay...I'm sure you're well versed with CSS though so it shouldn't be a problem.

 

Enjoy!

 

Bobby

Share this post


Link to post
Share on other sites

Hello

 

This is a cool contrib :D

 

However I might have misconfigured something, as when I got to any submenu the menu collapses, and thus you are not able to see where in the hierarchy you are currently browsing.

 

Can you tell me what to change, to be able to keep the menus expanded.

 

Thanks

 

/Henrik

Share this post


Link to post
Share on other sites

I just clicked on "Computer Packages" in Categories, and it created another "Computer Packages" category directly under the original. Ahh, it's probably because it doesn't have sub-cats.

 

So you should make it go directly into the category if there are no subcategories. Also, when a menu drops down, it won't go away until you click something else. Instead, it should disappear if you RE-click the same parent category.

 

Good job, looks great!

Share this post


Link to post
Share on other sites
I just clicked on "Computer Packages" in Categories, and it created another "Computer Packages" category directly under the original.  Ahh, it's probably because it doesn't have sub-cats.

 

So you should make it go directly into the category if there are no subcategories.  Also, when a menu drops down, it won't go away until you click something else.  Instead, it should disappear if you RE-click the same parent category.

 

Good job, looks great!

Luckily is open source and GPL so you can add the onMouseOut javascript and do all that! :) Be sure to upload it back to the contribution area when you get it tweaked and fully explain the modifications.

 

Bobby

Share this post


Link to post
Share on other sites

How to avoid the doubling of the name of category ?

 

original css_categories.php :

  for ($i=0; $i<sizeof($tree);$i++){
$level = substr_count($tree[$i]['text'], ' ');
switch ($level) {
 case 0:
	 if ($i === 0) {
	 $categories_string .=
	 '<dt id="cat'.$i.'" onclick="javascript:expand(\'smenu'.$i.'\');" onmouseover="javascript:changestylenone(\'cat'.$i.'\');" onmouseout="javascript:changestylebg(\'cat'.$i.'\');">'.$tree[$i]['text']. '</dt>'."\n".
	 '<dd id="smenu'.$i.'">'."\n".'<ul>'."\n";
	 $categories_string .= '<li><a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath='.$tree[$i]['id'], 'NONSSL') . '">' . $tree[$i]['text'] . '</a></li>'."\n";

	 } else {
	 $categories_string .=
	 '</ul>'."\n".'</dd>'."\n".'<dt id="cat'.$i.'" onclick="javascript:expand(\'smenu'.$i.'\');" onmouseover="javascript:changestylenone(\'cat'.$i.'\');" onmouseout="javascript:changestylebg(\'cat'.$i.'\');">'.$tree[$i]['text'] . '</dt>'."\n".
	 '<dd id="smenu'.$i.'">'."\n".'<ul>'."\n";
	 $categories_string .= '<li><a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath='.$tree[$i]['id'], 'NONSSL') . '">' . $tree[$i]['text'] . '</a></li>'."\n";

	 }

 

I try this modification :

  for ($i=0; $i<sizeof($tree);$i++){
$level = substr_count($tree[$i]['text'], ' ');
switch ($level) {
 case 0:
	 if ($i === 0) {
	 $categories_string .= 
	 '<dt id="cat'.$i.'" onclick="javascript:expand(\'smenu'.$i.'\');" onmouseover="javascript:changestylenone(\'cat'.$i.'\');" onmouseout="javascript:changestylebg(\'cat'.$i.'\');"><a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath='.$tree[$i]['id'], 'NONSSL') . '">' . $tree[$i]['text'] . '</a></dt>'."\n".
	 '<dd id="smenu'.$i.'">'."\n".'<ul>'."\n";
	 
	 } else {
	 $categories_string .= 
	 '</ul>'."\n".'</dd>'."\n".'<dt id="cat'.$i.'" onclick="javascript:expand(\'smenu'.$i.'\');" onmouseover="javascript:changestylenone(\'cat'.$i.'\');" onmouseout="javascript:changestylebg(\'cat'.$i.'\');">'.$tree[$i]['text'] . '</dt>'."\n".
	 '<dd id="smenu'.$i.'">'."\n".'<ul>'."\n";
	 $categories_string .= '<li><a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath='.$tree[$i]['id'], 'NONSSL') . '">' . $tree[$i]['text'] . '</a></li>'."\n";

	 }

 

But I have a reload who makes me disappear the sub-categories !

 

Thanks

Share this post


Link to post
Share on other sites
I just clicked on "Computer Packages" in Categories, and it created another "Computer Packages" category directly under the original.  Ahh, it's probably because it doesn't have sub-cats.

 

So you should make it go directly into the category if there are no subcategories.  Also, when a menu drops down, it won't go away until you click something else.  Instead, it should disappear if you RE-click the same parent category.

 

Good job, looks great!

 

 

Hi

 

I have tried - but cannot get the menu to work in the way described in this post - although this is what I want - I guess I have 3 choices

 

Learn javascript

wait until someone does this and then apply the contrib

look elsewhere :huh:

 

Charles


A kite flies highest AGAINST the wind !

 

"Life should NOT be a journey to the grave with the intention of arriving safely in an attractive and well preserved body, but rather to skid in sideways, a lover in one hand, martini in the other, body thoroughly used up, totally worn out and screaming ~ WOO HOO!! What a ride!"

Share this post


Link to post
Share on other sites

*sigh*

 

I too wish there was a solution to not having the category name appear more than once when the CSS Category Menu is expanded :(.

 

I've been trying to hack at it for days, but I haven't been able to successfully get it to work properly with my limited programming skills.

Share this post


Link to post
Share on other sites

Hi Chemo,

I just isntalled yr Collapsible CSS Category Menu v1.0 with MS2 in my local server but i m having blank menu means only CATEGORY heading is apearing and nothing in category list. I think there are problem with my cache directory link. could u please help me what do i should use .

 

my cache directory is located at

D:\Program Files\Apache\htdocs\dharkan\cache

 

I am using STS..

i will be really thanksfull if u help me about this cuz i have been lookign this thing for long.

 

regards

Share this post


Link to post
Share on other sites

Hi Bobby

 

Just used your CSS Menu and like it, the only small problem was the duplication of the top category name :( but i think i can live with it :blush:

 

BUT, i did find out that the menu distorts the layout of the sitemap http://www.oscommerce.com/community/contri...search,site+map

 

It looks like the CSS in the menu file is knocking out the layout on the sitemap.

 

I reverted back to the original menu just to make sure.

 

Any ideas how i could resolve this problem? move all the CSS into the original stylesheet? or would the problem still occur?

 

Hope you can help thanks

 

Mike

 

:thumbsup:

Share this post


Link to post
Share on other sites

it has got something to do with the li in the css code, i have tried amending that but with no luck. It is knocking out the <li> if it is used anywhere else on the page :huh:

Share this post


Link to post
Share on other sites

Something very odd.

 

In the includes/category_cache.php

I accidently put the path to the file to categorIES_cache.php instead of categorY_cache.php. I got some permission error messages, but the catalog box worked. Then I figured out that I had the wrong file and fixed them in category_cache.php and now error messages are gone, but I have a blank category box. Very confused right now, haha.

Share this post


Link to post
Share on other sites

I found a way to bypass the error messages and get the categories box to work by supplying a made up file name (.../includes/c) to put in category_cache.php, but the cache doesn't work (at least I don't think) like it's supposed to, because I'm getting tons of queries per page.

Share this post


Link to post
Share on other sites

Hi all,

I have been playing around with Chemo's CSS Menu and have run into a few problems. I would like to fix these few things:

 

1. For some reason or other I have 2 grey bars (top and bottom) on the menu, I would like to get rid of them and have the menu flush against the top left corner.

 

2. If its not too difficult I would like the menu to collapse if it is clicked on after being expanded. Say a customer clicks on camping, it expands to show categories, and then the customer wants to close the menu and clicks camping again, it would then collapse.

 

3. This is the more complicated of the three, I would like to have progressive categories. What I mean is that say I have a product in Camping -> First Aid -> Stansport. When a customer clicks on "camping", as it is now all of the categories come up, I would like only the categories directly under "camping" to show up, for this example "First Aid". If they then clicked on "First aid" it would then expand to include the categories in Camping -> First Aid which includes "Stansport." The idea is implemented in the category menus that come with creloaded but I prefer this CSS driven menu.

 

A picture is worth a thousand words so feel free to take a look at my website at www.bladesnthings.com USERNAME: admin PASSWORD: testing.

 

I have the password up now because I am not on a developer server and want to keep people from ordering and the bots out for now. The site is very much a work in progress, feel free to provide suggestions. Oh yeah and the awful green buttons on there will be replaced, dont worry. Please dont place any orders, ssl is not implemented and there are bugs.

 

Thanks,

Marc

 

Here is the code to the categories box.

 

<?php

/*-----------------------------------------------------------------------------*\

################################################################################

#

# Script name: includes/boxes/css_categories.php

# Version: 1.0

#

# Copyright © 2005 Bobby Easland

# Internet moniker: Chemo

# Contact: chemo@mesoimpact.com

#

# This script is free software; you can redistribute it and/or

# modify it under the terms of the GNU General Public License

# as published by the Free Software Foundation; either version 2

# of the License, or (at your option) any later version.

#

# This program is distributed in the hope that it will be useful,

# but WITHOUT ANY WARRANTY; without even the implied warranty of

# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

# GNU General Public License for more details.

#

# Script is intended to be used with:

# osCommerce, Open Source E-Commerce Solutions

# http://www.oscommerce.com

# Copyright © 2003 osCommerce

################################################################################

\*-----------------------------------------------------------------------------*/

?>

<style>

dd {

margin: 0;

padding: 0;

list-style-type: none;

display:none;

}

 

dl, dt, ul, li {

margin: 0;

padding: 0;

list-style-type: none;

}

 

#menu {

position: relative;

top: 0;

left: 0;

background-color:#528BB8;

}

 

dl#menu {

width: 16em;

}

 

dl#menu dt {

cursor: pointer;

margin: 4px;

height: 20px;

line-height: 15px;

text-align: center;

font-weight: bold;

border-bottom: 1px dotted black;

background-image: url('');

color: #FFFFFF;

}

 

dl#menu dd {

border-bottom: 1px dotted black;

}

 

dl#menu li {

text-align: left;

font-weight: bold;

background-color:#528BB8;

}

 

dl#menu li a, dl#menu dt a {

color: #000000;

text-decoration: block;

display: block;

border: 0 none;

height: 100%;

}

 

dl#menu li a:hover, dl#menu dt a:hover {

background-image: url('');

background-color: #63383D;

color: #FFFFFF;

}

</style>

 

<script type="text/javascript">

<!--

window.onload=expand;

function expand(id) {

var d = document.getElementById(id);

for (var i = 0; i<=<? echo sizeof($tree); ?>; i++) {

if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}

}

if (d) {d.style.display='block';}

}

function changestylenone(id) {

var d = document.getElementById(id);

if (d) {

d.style.backgroundImage='url()';

d.style.color='#63383D';

}

}

function changestylebg(id) {

var d = document.getElementById(id);

if (d) {

d.style.backgroundImage='url()';

d.style.color='#FFFFFF';

}

}

//-->

</script>

 

<!-- categories //-->

<tr>

<td>

<?php

//$info_box_contents = array();

//$info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);

 

//new infoBoxHeading($info_box_contents, true, false);

 

$categories_string = '<dl id="menu">'."\n";

$info_box_contents = array();

 

for ($i=0; $i<sizeof($tree);$i++){

$level = substr_count($tree[$i]['text'], ' ');

switch ($level) {

case 0:

if ($i === 0) {

$categories_string .=

'<dt id="cat'.$i.'" onclick="java script:expand(\'smenu'.$i.'\');" onmouseover="java script:changestylenone(\'cat'.$i.'\');" onmouseout="java script:changestylebg(\'cat'.$i.'\');">'.$tree[$i]['text']. '</dt>'."\n".

'<dd id="smenu'.$i.'">'."\n".'<ul>'."\n";

$categories_string .= '<li><a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath='.$tree[$i]['id'], 'NONSSL') . '">' . $tree[$i]['text'] . '</a></li>'."\n";

 

} else {

$categories_string .=

'</ul>'."\n".'</dd>'."\n".'<dt id="cat'.$i.'" onclick="java script:expand(\'smenu'.$i.'\');" onmouseover="java script:changestylenone(\'cat'.$i.'\');" onmouseout="java script:changestylebg(\'cat'.$i.'\');">'.$tree[$i]['text'] . '</dt>'."\n".

'<dd id="smenu'.$i.'">'."\n".'<ul>'."\n";

$categories_string .= '<li><a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath='.$tree[$i]['id'], 'NONSSL') . '">' . $tree[$i]['text'] . '</a></li>'."\n";

 

}

break;

case 2:

case 4:

default:

 

$c = array();

tep_get_parent_categories($c, $tree[$i]['id']);

$c = array_reverse($c);

$id = (implode('_', $c) ? implode('_', $c) . '_' . $tree[$i]['id'] : $tree[$i]['id']);

 

$categories_string .= '<li><a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath='.$id, 'NONSSL') . '">' . $tree[$i]['text'] . '</a></li>'."\n";

break;

}

 

}

$categories_string .= '</ul>'."\n".'</dd>'."\n".'</dl>'."\n";

$info_box_contents[] = array('align' => 'left',

'text' => $categories_string);

 

new menuBox($info_box_contents);

?>

<br />

</td>

</tr>

<!-- categories_eof //-->

Share this post


Link to post
Share on other sites

Hello,

 

I installed this fantastic contribution but the cache feature doesn't really work for me.

The cache file exists and I verified that the category_cache.php file is using it.

 

The problem is that the css_categories.php file then seems to call:

tep_get_parent_categories($c, $tree[$i]['id']);

 

which increases my queries from 28 to 65.

 

I get this kind of queries: [18] => select parent_id from categories where categories_id = '18'

 

Anyone got a solution?

 

Thanks.

Share this post


Link to post
Share on other sites

I've installed this but there's a little problem. The script doesn't seem to output the names of the categories and subcategories nor the paths in the url. I've looked around and I've seen a few others having the same problem but I've found no solution.

 

This is what I get:

 

<dl id="menu">
<dt id="cat0" onclick="java script:expand('smenu0');" onmouseover="java script:changestylenone('cat0');" onmouseout="java script:changestylebg('cat0');"></dt>
<dd id="smenu0">
<ul>
<li><a href="*website url*/index.php?cPath="></a></li>
</ul>
</dd>
<dt id="cat1" onclick="java script:expand('smenu1');" onmouseover="java script:changestylenone('cat1');" onmouseout="java script:changestylebg('cat1');"></dt>
<dd id="smenu1">
<ul>
<li><a href="*website url*/index.php?cPath="></a></li>
</ul>
</dd>
<dt id="cat2" onclick="java script:expand('smenu2');" onmouseover="java script:changestylenone('cat2');" onmouseout="java script:changestylebg('cat2');"></dt>
<dd id="smenu2">
<ul>
<li><a href="*website url*/index.php?cPath="></a></li>
</ul>
</dd>
<dt id="cat3" onclick="java script:expand('smenu3');" onmouseover="java script:changestylenone('cat3');" onmouseout="java script:changestylebg('cat3');"></dt>
<dd id="smenu3">
<ul>
<li><a href="*website url*/index.php?cPath="></a></li>
</ul>
</dd>
<dt id="cat4" onclick="java script:expand('smenu4');" onmouseover="java script:changestylenone('cat4');" onmouseout="java script:changestylebg('cat4');"></dt>
<dd id="smenu4">
<ul>
<li><a href="*website url*/index.php?cPath="></a></li>
</ul>
</dd>
<dt id="cat5" onclick="java script:expand('smenu5');" onmouseover="java script:changestylenone('cat5');" onmouseout="java script:changestylebg('cat5');"></dt>
<dd id="smenu5">
<ul>
<li><a href="*website url*/index.php?cPath="></a></li>
</ul>
</dd>
<dt id="cat6" onclick="java script:expand('smenu6');" onmouseover="java script:changestylenone('cat6');" onmouseout="java script:changestylebg('cat6');"></dt>
<dd id="smenu6">
<ul>
<li><a href="*website url*/index.php?cPath="></a></li>
</ul>
</dd>
</dl>

 

Any help would be greatly appreciated!

 

Cheers! / Bjorn

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×