CSS Menu

[Kuujiryo 0]

Or if that can't be done just resizing all the Subcategories would be fine with me :)

Edited June 30, 2007 by Kuujiryo

[Kuujiryo 0]

Anyone?

[Kuujiryo 0]

Thankyou anyway.

[Kopite 0]

Is there a tutorial to get this to work with STS?

[Kopite 0]

Ok, I've got it installed with STS.

 

However, my left column is 150px. The menu is 200px. I have tried changing some variables in categores_css.php but it has no effect.

 

Any ideas?

<?php
/*
 $Id: categories.php,v 1.25 2003/07/09 01:13:58 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/
?>
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 100%; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
font-family: arial;
font-size: 11px;
}

.suckerdiv ul li{
position: relative;
background-color: #eee;
}

/*1st level sub menu style */
.suckerdiv ul li ul{
left: 100%; /* Parent menu width - 1*/
position: absolute;
width: 100%; /*sub menu width*/
top: 0;
display: none;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul{ 
left: 100%; /* Parent menu width - 1*/
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li a{ 
left: 100%; /* Parent menu width - 1*/
background-color: #ddd;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li a{ 
background-color: #bbb;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li ul li a{ 
background-color: #aaa;
}

/* menu links style */
.suckerdiv ul li a{
display: block;
color: black;
text-decoration: none;
background-color: #eee;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
line-height: 2em;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: yellow;
color: black;
text-decoration: none;
}

.suckerdiv ul li ul li a:hover{
background-color: yellow;
color: black;
text-decoration: none;
}

.suckerdiv ul li ul li ul li a:hover{
background-color: yellow;
color: black;
text-decoration: none;
}

/* The main categories with sub-categories */
.suckerdiv .subfolderstyle{
background: url(images/arrow-list.gif) no-repeat center right;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul .subfolderstyle {
background-color: #ddd;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul li ul .subfolderstyle {
background-color: #bbb;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul li ul li ul .subfolderstyle {
background-color: #aaa;
}

/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//SuckerTree Vertical Menu (Aug 4th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
 var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
 }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

</script>
<?
 function PrintSubMenus( $parentID, $languageID, $start_path ){
  $returnval = '';
  if (($start_path == '') && ($parentID > 0)) {
	$start_path = $parentID;
  } else {
	if ($parentID > 0) $start_path .= "_" . $parentID;
  }
  if ($parentID != 0) {
	$returnval .= "<ul>";
  } else {
	$returnval .= "<div class='suckerdiv'>";
	$returnval .= "<ul id='suckertree1'>";
  }
  $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '".$parentID."' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languageID ."' order by sort_order, cd.categories_name");
  while ($categories = tep_db_fetch_array($categories_query))  {
	if ($start_path == "") {
	  $grouppath = $categories['categories_id'];
	} else {
	  $grouppath = $start_path . "_" . $categories['categories_id'];
	}
	$cPath_new = 'cPath=' . $grouppath;
	$categories_string = tep_href_link(FILENAME_DEFAULT, $cPath_new);
	$returnval .= "<li><a href='".$categories_string."'>".$categories['categories_name']."</a>";
	if ( tep_has_category_subcategories($categories['categories_id'] ) ) {
	   $returnval .= PrintSubMenus( $categories['categories_id'], $languageID, $start_path );
	}
	$returnval .= "</li>";
  }
  $returnval .= "</ul>";
  if ($parentID == 0) $returnval .= "</div>";
  return $returnval;
 }
?>
<!-- categories //-->
	  <tr>
		<td>
<?php
 $info_box_contents = array();
 $info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);

 new infoBoxHeading($info_box_contents, true, false);

 $info_box_contents = array();
 $info_box_contents[] = array('text' => PrintSubMenus( 0, $languages_id, '' ));

 new infoBox($info_box_contents);

?>
		</td>
	  </tr>
<!-- categories_eof //-->

[lenamtl 0]

Hi,

 

this menu is very slow to load...for 200 products it's took 7 seconds to load on every page.

 

 

I hope other menu will be implemented only few menu are available and they are slow to load.

 

for now i'll stay with dynamenu

[♥radders 0]

That sounds odd. Mine takes less than a second for the complete page load including the menu with more products than that (but I only go down to category level not product level).

[Guest]

Hi Guys

 

some troubles with this css menu few weeks ago, i had to change for the old ms2 menu... >_<

It worked perfectly for a year and troubles appeared suddenty, without code modification...

 

Now, I get these errors

 

Warning: Invalid argument supplied for foreach() in /home/Www/xxxxxx/includes/boxes/categories.php on line 243

 

line 243: foreach($categories_start as $key => $value) {

 

Warning: Invalid argument supplied for foreach() in /home/Www/xxxxxx/includes/boxes/categories.php on line 251

 

line 251: foreach ($cat_subs[$parentID] as $v) { //$categories = tep_db_fetch_array($categories_query)

 

Can't explain this problem... Any ideas?

 

For information: PHP Version 4.4.6 used

[Kopite 0]

Is there anyway to make the subcategories apear on the top of this menu ie underneatht he main categories?

 

Thanks

[e1boy 0]

Hi i have downloaded the latest version of CSS Menu - is there anyway to just show the top categories - ie i don't require the fly-out sub menus

 

Also the menu has picked up:

BOX_INFORMATION_ALLPRODS

BOX_SPECIALS_ALLPRODS

BOX_WHATSNEW_ALLPRODS

 

which i don't requrie

 

http://www.violateclothing.com/catalog/index.php

[jarzom 0]

PERFECT !!!! Just what i was looking for.

 

Thanx m8

 

 

 

 

 

Thanks David for sending me the file. I have my menu working now and the code is below.

 

var menuids=["suckertree1","suckertree2","suckertree3"] //Enter id(s) of SuckerTree UL menus, separated by commas

 

<?php
 $info_box_contents = array();
 $info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);

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

 $info_box_contents = array();

 $info_box_contents[] = array('text' => //'<div class="suckerdiv"><ul id="suckertree3"><li><a href='.tep_href_link("index.php").'>Home</a></ul>' .
'<a ' . tep_image(DIR_WS_IMAGES . 'infobox/Pictures.jpg', 'Galleries') . '</a>'
. PrintSubMenus( 0, $languages_id, '' ). '<a ' . tep_image(DIR_WS_IMAGES . 'infobox/TravelInfob.jpg', 'Galleries') . '</a>'
. '<div class="suckerdiv"><ul id="suckertree2"><li><a href='.tep_href_link("Tips.php").'>Travel Tips</a><a href='.tep_href_link("Tips.php").'>Culture</a><a href='.tep_href_link("Tips.php").'>Language</a><a href='.tep_href_link("Tips.php").'>History</a></ul></div>');

 $info_box_contents[] = array('text' => '<div class="suckerdiv"><ul id="suckertree3"><li><a href='.tep_href_link("links.php").'>Links</a><ul><li><a href="http://www.lonelyplanet.com/" target="_blank">Lonely Planet</a></li><li><a href="http://www.danheller.com/" target="_blank">Dan Heller</a></li><li><a href='.tep_href_link("rss.php").'>RSS Feed</a></li></ul>');
//  $info_box_contents[] = array('text' => PrintSubMenus( 0, $languages_id, '' ));
//  $info_box_contents[] = array('align' => 'center',
//							  'text'  => '<a href="' . tep_href_link(FILENAME_ALLPRODS, '', 'NONSSL') . '">' . BOX_INFORMATION_ALLPRODS . '</a>');
//  $info_box_contents[] = array('align' => 'center',
//							   'text'  => '<a href="' . tep_href_link(FILENAME_SPECIALS, '', 'NONSSL') . '">' . BOX_SPECIALS_ALLPRODS . '</a>');
//  $info_box_contents[] = array('align' => 'center',
//							   'text' => '<a href="' . tep_href_link(FILENAME_PRODUCTS_NEW) . '">' . BOX_WHATSNEW_ALLPRODS .'</a>');							   

 new infoBox($info_box_contents);

?>
		</td>
	  </tr>

<!-- MenuConfigategories_eof //-->

 

As I am using a picture for my header I commented out new infoBoxHeading.

 

Hopefully it's be helpful to someone.

[twantwan1 0]

I have installed this contri on www.fitnesswinkel.net and in IE it looks good, but in Firefox something went wrong.

[♥radders 0]

Yes it looks as if you only sell one product!

[twantwan1 0]

Yes we are starting the webshop and are filling now. But this has nothing to do with the position of the menu in firefox

[pure11 0]

hi, i have http://addons.oscommerce.com/info/4910 fixed width

my css with this edit has this info in it:

 

BODY {

text-align: center;

color: #ffffff;

/* change background: #000000; to the color of your choice*/

background: #99CCFF;

margin: 0;

}

#cwdusacontainer {

width: 97%;

border: 0px solid #916714;/*border can be removed for a borderless page*/

background: #000000;

color: #ffffff;

margin: 10px auto 10px auto;/*this codeing is margin top 10px,right auto, bottom 10px and left 10px. Don't change the auto*/

text-align: left;

}

 

 

i installed this today, but the menu is showing at the very top of the page, see picture

 

how do i fix this problem ?

thank you :thumbsup:

[jurro 0]

HELP

I've got a problem with this css menu

 

the menu works perfect

but as you can see on my site http://www.professionalsound.nl

the menu gose of screen when i go to submenu's..

the list is to big to be in my internetexplorer and the last in list are off the page..

(can't see them) anybody got a solution?

 

thanks allready

[pure11 0]

hi, i have http://addons.oscommerce.com/info/4910 fixed width

my css with this edit has this info in it:

 

i installed this today, but the menu is showing at the very top of the page, see picture

 

how do i fix this problem ?

thank you :thumbsup:

 

 

can someone please please please help me i really would love to use this menu, please!

[DejaVu 0]

Rather than the categories 'popping' into view is there a way they can 'fade in' or 'scroll out' into view?

 

I'm gonna look for a CSS to add that may do this, but if anyone has an idea how to do this already, I'd appreciate it.

 

I've looked through piles and piles of CSS Menu examples all over the net, but I cannot find one that actually does it as yet! It'd make it more unique and a lot better. :)

[itsjust 2]

great contribution

 

anyone know an easy way of taking it out of its box settings, so that it can be placed anywere? I want to put it in my header

[DejaVu 0]

I've installed cName & pName SEO URL's and now the CSS Menu no longer works.

 

Anyone know a fix?

[DejaVu 0]

Turns out it was a 'Cache' problem.

 

I dont seem to be able to 'Cache' the CSS menu when visitors hit my site from http://www.mydomain.com or http://mydomain.com I think this is because there is no actual file to 'Cache' (http://www.mydomain.com/index.php)

 

Bug perhaps? Can it be fixed? I've turned 'Cache' off for now, which is a shame.

[sheenaw 0]

Turns out it was a 'Cache' problem.

 

I dont seem to be able to 'Cache' the CSS menu when visitors hit my site from http://www.mydomain.com or http://mydomain.com I think this is because there is no actual file to 'Cache' (http://www.mydomain.com/index.php)

 

Bug perhaps? Can it be fixed? I've turned 'Cache' off for now, which is a shame.

 

Does this mean that the contribution won't work with ultimate seo urls by chemo?

[tedbooks 8]

i get an error if there is no category.

i am using it in a multi shop and sometimes there is no category or product entered yet

stupid situation yes but is there a way not to get error about array being empty

Edited November 18, 2007 by tedbooks

[pure11 0]

Turns out it was a 'Cache' problem.

 

I dont seem to be able to 'Cache' the CSS menu when visitors hit my site from http://www.mydomain.com or http://mydomain.com I think this is because there is no actual file to 'Cache' (http://www.mydomain.com/index.php)

 

Bug perhaps? Can it be fixed? I've turned 'Cache' off for now, which is a shame.

 

 

same problem i have SEO installed , i had to turn cache off just to the the menu to work and show up

 

and now turning the cache off the menu displays correctly

 

BUT

 

when clicking on any of the links on the menu i get this error:

 

Fatal error: Call to undefined function: read_cache() in /home/puregnet/public_html/shop/includes/classes/url_rewrite.php on line 215

 

 

i am sure it is because i have SEO G installed... any help ?

[pure11 0]

same problem i have SEO installed , i had to turn cache off just to the the menu to work and show up

 

and now turning the cache off the menu displays correctly

 

BUT

 

when clicking on any of the links on the menu i get this error:

 

Fatal error: Call to undefined function: read_cache() in /home/puregnet/public_html/shop/includes/classes/url_rewrite.php on line 215

i am sure it is because i have SEO G installed... any help ?

 

nevermind it was not seo g causing the problem