Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

CSS Menu


fear4me

Recommended Posts

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

 

Thanks

 

 

Hi, did you find out how to make the subcategories appear on the top as I would like to make mine do this.

 

regards

 

Patrick

Link to comment
Share on other sites

  • Replies 250
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
Hi!

 

I've just dropped CSS Menu version 0.1 at the contribution-page at osCommerce. This thread will be used to support this contribution. :thumbsup:

 

Roger

 

Hello and thanks for your great contribution. Just a little question : I try to use dropped CSS Menu version 0.3 , three times in the same page. But unfortunately it works only for the first dropped CSS Menu and doesn't work for two another dropped CSS Menu . Do you have any idea or advice to repare it?

For exemple in column_left.php we have :

dropped CSS Menu of categories

another copie of

dropped CSS Menu of categories

and once more

dropped CSS Menu of categories

 

and only the first menu works

 

Thanks,

 

Michel

Link to comment
Share on other sites

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

 

Thanx m8

 

 

 

 

 

 

(heinzsight @ Jun 4 2007, 05:09 PM)

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.

 

Hi, somebody knows ho to make this code multi language?

Link to comment
Share on other sites

i have a flash swf file on the left side and the menu on the right, so the menu branches off to load more categories , but since i added this flash image on the right, the menu loads UNDER the flash image, is there any way for me to make the menu load on TOP of anything and everything?

 

 

thanks

Link to comment
Share on other sites

i have a flash swf file on the left side and the menu on the right, so the menu branches off to load more categories , but since i added this flash image on the right, the menu loads UNDER the flash image, is there any way for me to make the menu load on TOP of anything and everything?

thanks

 

 

nevermind i found a fix!!

 

wmode='transparent' width='425' height='355' add this to your flash code and menu will load on top!

Edited by pure11
Link to comment
Share on other sites

  • 2 weeks later...

Hi, I like this contribution, but I want select just one or two categories ID to be visible in the css menu, (not enable/disable cat) in a standart categories box it's easy :-" (id = '100' for the example) but I really do not arrive there :'(

$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 = '100' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");

thank you for your assistance, and forgiveness for my bad English.

Link to comment
Share on other sites

  • 2 weeks later...

How can i modify the configure_css.php so that after its been clicked a category, the category text turns BOLD or the clicked category box to change color (so that the client knows which category he is browsing through) ?

Edited by qwerty555
Link to comment
Share on other sites

  • 2 weeks later...

I want to remove a product from showing up on the menu, but have it still exist on the site (i want to link to that page from another menu i created on top) and only want this item to be accessable from the top menu.. does anyone know how to do this?

 

 

thanks

Edited by pure11
Link to comment
Share on other sites

  • 1 month later...

Hi All,

 

Thanks for that great looking contribution. I started reading the whole thread, but 10pages is too much :(., so here is my question (may be answered already):

How can I make it work after STS has been installed? and also sorry for my dumb question, but why is this right below the categories and how can I get rid of it?

"BOX_INFORMATION_ALLPRODS

BOX_SPECIALS_ALLPRODS

BOX_WHATSNEW_ALLPRODS "

 

Also by default the background color of the categories is black, how do I change it?

 

Thx again.

Link to comment
Share on other sites

  • 1 month later...

HI,

i'm using CSS Menu v0.4.1 and work ok.

Now want test Search Engine Friendly URL v1.11.zip but when i switch "Go to Configuration/Cache and turn on Caching"

menu stop work.. :-"

This is the error:

Warning: Invalid argument supplied for foreach() in ......\includes\boxes\categories_css.php on line 243

Warning: Invalid argument supplied for foreach() in .......\includes\boxes\categories_css.php on line 251

 

can help me?

Edited by scaistar
Link to comment
Share on other sites

I've just added a little mod.

 

It stores the output of the css menu in a cache file. But it lacks of an admin section mod to update the cache file when the categories structure is changed (add a new category or delete a new one).

 

I hope you find this mod useful as long as it saves a lot of database queries.

 

Regards,

Hey!!... I still need help with this http://www.oscommerce.com/forums/index.php?showtopic=309208. Please, take a look on it.

Link to comment
Share on other sites

thank you for devoloping this great addon, but i'm having problems instaling-it on Oscommerce 2.2rc2 w/STS, can someone give me a fail-safe manual ? :S

 

when i tried it gave me back the javascript code on the page before the rest of the template... i really don't know much about php/javascript :s

Link to comment
Share on other sites

thank you for devoloping this great addon, but i'm having problems instaling-it on Oscommerce 2.2rc2 w/STS, can someone give me a fail-safe manual ? :S

 

when i tried it gave me back the javascript code on the page before the rest of the template... i really don't know much about php/javascript :s

 

0) { print_r(multiArraySearch($v['parent_id'], $categories)); $categories[$v['parent_id']][$v['categories_id']] = $v; unset($categories[$v['categories_id']]); } } */ ?>  0 ) { $returnval .= "

* "; } if ( $productsDisplay > $cssMenuConfig['maxProductsInMenu'] ) { $productsDisplay=$cssMenuConfig['maxProductsInMenu']; $addMore= true; } $count_string = ''; if (SHOW_COUNTS == 'true') { if ($totalitemsincategory > 0) { $count_string = ' (' . $totalitemsincategory . ')'; } } $i=0; while ($i < $productsDisplay) { $products = tep_db_fetch_array($products_query); $product_query = tep_db_query("select products_name from products_description where products_id = " . $products['products_id'] . " AND language_id = ".$languageID ); $product = tep_db_fetch_array($product_query); $returnval .= "".$product['products_name']."
* \n"; $i++; } if ( $addMore ) { $returnval .= "".$cssMenuConfig['moreText']."
  \n"; } if ( $productsDisplay > 0 || !$includeul ) { $returnval .= "

"; } return $returnval; } function PrintSubMenus( $parentID, $languageID, $start_path ){ global $cssMenuConfig, $categories_subs, $categories_start; $returnval = ''; if (($start_path == '') && ($parentID > 0)) { $start_path = $parentID; } else { if ($parentID > 0) $start_path .= "_" . $parentID; } if ($parentID != 0) { $returnval .= "

  "; } else { $returnval .= "
  "; $returnval .= "
	  o "; } // $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"); foreach($categories_start as $key => $value) { if(strstr($key, '_' . $parentID)) { $cat_subs[$parentID][] = substr($key, 0, strpos($key, "_")); } } foreach ($cat_subs[$parentID] as $v) { //$categories = tep_db_fetch_array($categories_query) $categories = $categories_start[$v . '_' . $parentID]; 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); $totalitemsincategory = tep_count_products_in_category($categories['categories_id']); $count_string = ''; if ((SHOW_COUNTS == 'true') && ($totalitemsincategory > 0) ){ $count_string = ' (' . $totalitemsincategory . ')'; } if (cssMenu_ShowCategory($cssMenuConfig['ShowEmptyCategories'], $totalitemsincategory)) { $returnval .= "".$categories['categories_name'].$count_string."\n"; } if (array_key_exists($categories['categories_id'], $categories_subs)) { //tep_has_category_subcategories($categories['categories_id']) $returnval .= PrintSubMenus( $categories['categories_id'], $languageID, $start_path ); if ( $cssMenuConfig['includeProducts'] ) { $returnval .= PrintProducts($categories['categories_id'],$categories_string, false, $languageID); } } else { if ( $cssMenuConfig['includeProducts'] ) { $returnval .= PrintProducts($categories['categories_id'],$categories_string, true, $languageID); } } if (cssMenu_ShowCategory($cssMenuConfig['ShowEmptyCategories'], $totalitemsincategory)) { $returnval .= "
		"; } } if ( !$cssMenuConfig['includeProducts'] ) { $returnval .= ""; } if ($parentID == 0) $returnval .= "
  "; return $returnval; } function cssMenu_ShowCategory( $switch, $products) { if ( $switch == 1 ) { return true; } else { if ($products > 0) { return true; } else { return false; } } } ?>
  Fatal error: Call to undefined function PrintSubMenus() in C:\Programas\EasyPHP 2.0b1\www\includes\boxes\categories.php on line 320

when i try to use the categories_css it gives me this error, without sts, with sts it gets worst :s

Link to comment
Share on other sites

There is a firefox compatibility bug with this. If there is a category with only inactive items in it, the very first category in the menu will always list the subcategories, regardless of what category you are hovering over. I'm pretty sure this only happens when "hide empty categories" is turned on.

 

Less important, but still viable:

 

There is also lots of excess UL and LI openings and closings that cause there to be gaps where empty categories are. Basically they aren't being completely hidden.

 

The W3C validator complains a lot about the code generated by this menu as well, mostly to do with the hidden empty categories.

Link to comment
Share on other sites

There is a firefox compatibility bug with this.

 

I figured out what the problem is, I'm just not sure how to solve it. It's all of the excess list items at the end of the menu.

 

I was messing with the generated source code in dreamweaver. At the end of all the list items I changed the following from this:

</li></ul></li><ul><ul></ul><ul></ul><ul></ul><ul></ul><ul></ul><ul></ul></ul></ul></div></td>

to this:

</li></ul></li></li></ul></div></td>

The menu went back to functioning normally.

 

Now the script that generates the menu needs to be fixed. I'm not quite sure how to do that.

Edited by yatahaze
Link to comment
Share on other sites

  • 1 month later...

Hey mikefrombg

 

This worked for my install with OSC RC2.2a and STS 4.5.8 Note: I used CSS Menu ver 0.3, once you get this working you can tweek it with the updates from later versions as I have not tested it with later versions.

FOR STS USERS ONLY! AND MAKE A BACKUP OF ALL EFFECTED FILES FIRST SO IF SOMETHING GOES WRONG YOU CAN GET BACK TO A WORKING STATE.

Upload included files from the contrib first : )

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

catalog/includes column_left.php

 

Find:

 

} else {

include(DIR_WS_BOXES . 'categories.php');

 

Change to:

 

} else {

include(DIR_WS_BOXES . 'categories_css.php');

 

The only thing you realy do here is change the portion 'categories.php' to 'categories_css.php'

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

 

catalog/includes/functions cache.php

 

Find:

 

ob_start();

include(DIR_WS_BOXES . 'categories.php');

 

Change to:

 

ob_start();

include(DIR_WS_BOXES . 'categories_css.php');

 

The only thing you realy do here is change the portion 'categories.php' to 'categories_css.php'

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

 

For STS USERS ONLY

 

catalog/includes/modules sts_inc/column_left.php

 

Find:

 

} else {

include(DIR_WS_BOXES . 'categories.php');

 

Change to:

 

} else {

include(DIR_WS_BOXES . 'categories_css.php');

 

The only thing you realy do here is change the portion 'categories.php' to 'categories_css.php'

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

 

For STS USERS ONLY

 

catalog/includes/sts_templates/"your default folder"/sts_template.html

 

Add just below the <head> tag

 

<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).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>

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

You can customize the way the menu looks with the stylesheet settings below.

In catalog/stylesheet.css

 

Find:

 

TD.headerInfo {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

background: #00ff00;

color: #ffffff;

font-weight: bold;

text-align: center;

}

 

Add just below:(placement is not critical)

 

.suckerdiv ul{

margin: 0;

padding: 0;

list-style-type: none;

width: 200px; /* 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: 199px; /* Parent menu width - 1*/

position: absolute;

width: 200px; /*sub menu width*/

top: 0;

display: none;

}

 

/*All subsequent sub menu levels offset */

.suckerdiv ul li ul li ul{

left: 199px; /* Parent menu width - 1*/

}

 

/*All subsequent sub menu levels offset */

.suckerdiv ul li ul li a{

left: 199px; /* 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 */

Edited by sitefire
Link to comment
Share on other sites

I instlalled this great contribution...waw.....

 

I have a litle problem...

I set my page web width 90%...

when I click on index or default page ..it show full page..

but when I click on product it look well or 90% width..

 

there's anything wrong with my code on index.php or may be in configure_css.php.

 

thanks for the attention n sory for m y bad english

warmest regards from indonesia..

Link to comment
Share on other sites

great contribution(one year that i have this menu)...work well in IE6 and Firefox 2...the problem is in IE7, anyone can help me.

 

is there a space between categories....like that:

 

CSS_MENU.jpg

Link to comment
Share on other sites

Wanted to see if anyone else is having this issue or knows a fix.

When you first load your page if you click on one of the css menu links it reloads the same page, the second and all other clicks in the same browser session work fine, just the first click.

It looks like its some type of cache issue.

This is the same in Firefox or IE

Anyone have a clue as to what the issue is?

I'm using ver 3 CSS Menu as most of the later fixes didn't affect my setup.

Link to comment
Share on other sites

  • 3 weeks later...

Hi

 

I have installed this menu and have it up and running fine.

 

I have also installed the cache add-on which is caching the menu however it is also caching the session ID. This is not good as all customers will get the same oscsid.

 

Can anyone help to remove the session from the cache and then add it back to the right customer.

 

Here is the code from jamartin’s contribution

 

INSTRUCTIONS:

in catalog/includes/boxes/categories_css.php

almost in the Enf of the File Find:

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

 new infoBoxHeading($info_box_contents, true, false);

 $info_box_contents = array();


After that insert:

 if (!file_exists(DIR_FS_CATALOG . '/cache/categories.css.php')){
  $categories_content = PrintSubMenus( 0, $languages_id, '' );
$cache= '<?php
		$categories_content = "' . str_replace( '"', '\"',  $categories_content) . '";
		?>';
$fp = fopen(DIR_FS_CATALOG . '/cache/categories.css.php' , 'w');
$fout = fwrite($fp , $cache);
fclose($fp);
 }  else {
  require(DIR_FS_CATALOG . '/cache/categories.css.php');
 }


Find:

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

And Replace with:

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

 

 

Thanks

 

Ken

Link to comment
Share on other sites

hi friends

 

in my house, I installed oscommerce 2.2rc2a using xampp. until there all good. then I installed css menu. everything functioned perfectly well. But, when I pass to the server, correctly is located. But a click is enough so that they disappear and come back to appear the original menu of oscommerce. which the configuration that I am not making? (for example: www.inforzone.net/tienda)

 

thank you!

Link to comment
Share on other sites

  • 1 month later...

I have installed css_menu, but I have a display problem.

 

On my shop around the category box, a white border appears, like in the picture below.

 

Can someone tell me how can I get rid of that border?

 

Can this be because I use a bought template?

 

Thanks in advance.

Any help will be highly appreciated.

 

categoriesle0.jpg

Edited by ultras.nick
Link to comment
Share on other sites

Its a infobox, so set that

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...