Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

DHTML categories menu


Recommended Posts

I have the DHTML categories menu set up on my website and it works fine in Firefox 3, Opera, and Google Chrome. It, however, does not like IE 8. I don't like IE 8 either but some of my customers do. Check it out with the different browsers and see what it's doing, it's not separating the cats and subcats correctly. My website is http://www.houseofhid.com

 

Here is a link to the contribution:

http://www.oscommerce.com/community/contributions,2844

 

Please help me out here! Thanks!

Edited by ifubar
Link to comment
Share on other sites

Thats an old contrib & no doubt there are issues with the script.

Also an additional issue for u is all those visitors with javascript disabled (about 10%) as they get no menu at all!!

 

I would suggest u look at a css menu instead, you could achieve the same result with css without the issues (some early version of ie may need a 'helper')

 

As most use ie to browse u should always look at it first.

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

thats fine, or there are many at http://www.cssplay.co.uk/menus/pro_drop2 thogh you need to re-code for osC

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

So I have my new categories menu configured how I want it. But I want to also add the same style to the information box below the category listing and the gallery box. I figured it'd be pretty easy but I went and gave myself too much credit again lol. Here's the two codes...

 

categories.php

<?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
*/
?>
<?
// cssMenu - Begin of configuration //
$cssMenuConfig = array();
$cssMenuConfig['ShowEmptyCategories'] = true;
$cssMenuConfig['includeProducts']	 = false;	 // Should CSSMenu show products
$cssMenuConfig['maxProductsInMenu']   = 8;		  // Maximum number of products to show in a menu ( stops massive menus being created )
$cssMenuConfig['moreText']			= "More...."; // Maximum number of products to show in a menu ( stops massive menus being created )
$cssMenuConfig['showSubMenu']		 = true; // Show category dependent menu
//	$cssMenuConfig['idSubMenu']		   = array('619', '620'); // Category id for the dependent menu

// cssMenu - End of configuration //

$categories_subs = array();
$categories_start = array();

$categories_subs_query = tep_db_query("select count(*) as count, parent_id from " . TABLE_CATEGORIES . " GROUP BY parent_id");
while($row = tep_db_fetch_array($categories_subs_query)) {
	$categories_subs[$row['parent_id']] = $row['count'];
}

$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.categories_id = cd.categories_id and cd.language_id = '" . $languages_id . "' order by sort_order, cd.categories_name");
while($row = tep_db_fetch_array($categories_query)) {
	$categories_start['S_' . $row['categories_id'] . '_' . $row['parent_id'] . '_E'] = $row;
}

?>
<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: 150px; /* Width of Menu Items */
border-bottom: 1px solid #000000;
font-family: verdana;
font-size: 10px;
}

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

/*1st level sub menu style */
.suckerdiv ul li ul{
left: 150px; /* Parent menu width - 1*/
position: absolute;
width: 199px; /*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: #000000;
}

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

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

/* menu links style */
.suckerdiv ul li a{
display: block;
color: white;
text-decoration: none;
background-color: #000000;
padding: 1px 1px;
border: 0;
border-bottom: 1px solid #0099FF;
line-height: 1.75em;
}

.suckerdiv ul li a:hover{
background-color: #0099FF;
color: white;
text-decoration: none;
}

.suckerdiv ul li ul li a:hover{
background-color: #0099FF;
color: white;
text-decoration: none;
}

.suckerdiv ul li ul li ul li a:hover{
background-color: #0099FF;
color: white;
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: #000000;
}

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

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

/* 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 PrintProducts( $category_id, $categories_string , $includeul, $languageID)
 {
   global $cssMenuConfig;

   $product_path="product_info.php?cPath=".$category_id."&products_id=";
   $products_query = tep_db_query("select pc.products_id, pc.categories_id from products_to_categories pc, products p where pc.categories_id = " . $category_id . " and p.products_id = pc.products_id and products_status=1 order by products_price");

   $productsDisplay=mysql_num_rows( $products_query );
   $addMore= false;

   if ( $includeul  && $productsDisplay > 0 ) {
	 $returnval .= "<ul>";

   }

   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 .= "<li><a href='".$product_path.$products['products_id']."'>".$product['products_name']."</a></li>\n";
	 $i++;
   }

	if ( $addMore ) {
	 $returnval .= "<li><a href='".$categories_string."'>".$cssMenuConfig['moreText']."</a></li>\n";
	}

	if ( $productsDisplay > 0 || !$includeul ) {
	$returnval .= "</ul>";
	}

	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 .= "<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");
  $cat_subs = array();
  foreach($categories_start as $key => $value) {
	if(strstr($key, '_' . $parentID . '_E')) {
		$cat_subs[$parentID][] = substr($key, 2, strpos($key, "_", 2) - 2);
	}
  }

//	  if (!isset($_GET['cPath'])) {

	foreach ($cat_subs[$parentID] as $v)  { //$categories = tep_db_fetch_array($categories_query)
	  $categories = $categories_start['S_' . $v . '_' . $parentID . '_E'];

	  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 .= "<li><a href='".$categories_string."'>".$categories['categories_name'].$count_string."</a>\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 .= "</li>";
	  }
	}
//	  }
  if ( !$cssMenuConfig['includeProducts'] ) {
	$returnval .= "</ul>";
  }
  if ($parentID == 0) $returnval .= "</div>";
  return $returnval;
 }

 function cssMenu_ShowCategory( $switch, $products) {
  if ( $switch == 1 ) {
	 return true;
  } else {
	if ($products > 0) {
	   return true;
	} else {
	   return false;
	}
  }
 }
?>
<!-- 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>
<!-- MenuConfigategories_eof //-->

 

information.php

<?php
/*
 $Id: information.php 1739 2007-12-20 00:52:16Z hpdl $

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

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/
?>
<!-- information //-->
	  <tr>
		<td>
<?php
 $info_box_contents = array();
 $info_box_contents[] = array('text' => BOX_HEADING_INFORMATION);

 new infoBoxHeading($info_box_contents, false, false);

 $info_box_contents = array();
 $info_box_contents[] = array('text' => '<a href="' . tep_href_link(FILENAME_INSTALLATION) . '">' . BOX_INFORMATION_INSTALLATION . '</a><br>' .
						 '<a href="' . tep_href_link(FILENAME_TESTIMONIALS) . '">' . BOX_INFORMATION_TESTIMONIALS . '</a><br>' .
				'<a href="' . tep_href_link(FILENAME_SHIPPING) . '">' . BOX_INFORMATION_SHIPPING . '</a><br>' .	
									 '<a href="' . tep_href_link(FILENAME_WARRANTY) . '">' . BOX_INFORMATION_WARRANTY . '</a><br>' .
						 '<a href="' . tep_href_link(FILENAME_FAQ) . '">' . BOX_INFORMATION_FAQ . '</a><br>' .
									 '<a href="' . tep_href_link(FILENAME_PRIVACY) . '">' . BOX_INFORMATION_PRIVACY . '</a><br>' .
									 '<a href="' . tep_href_link(FILENAME_DEALERS) . '">' . BOX_INFORMATION_DEALERS . '</a><br>' .	
									 '<a href="contact.php">' . BOX_INFORMATION_CONTACT . '</a>');

 new infoBox($info_box_contents);
?>
		</td>
	  </tr>
<!-- information_eof //-->

Link to comment
Share on other sites

You need to apply a style, so change the line:

 

  $info_box_contents[] = array('text' => '<a href="' . tep_href_link(FILENAME_INSTALLATION) . '">' . BOX_INFORMATION_INSTALLATION . '</a><br>' .

 

to:

 

$info_box_contents[] = array('params' => 'class="infobox2"', 'text' => '<a href="' . tep_href_link(FILENAME_INSTALLATION) . '">' . BOX_INFORMATION_INSTALLATION . '</a><br>' .

 

then add to your css

 

.infobox2 a {font-family:verdana;
font-size:10px;
list-style-type:none;background-color:#000000;
border-color:-moz-use-text-color -moz-use-text-color #0099FF;
border-style:none none solid;
border-width:0 0 1px;
color:white;
line-height:1.75em;
padding:1px;
text-decoration:none;}

 

Not tested, but that shows u the method.

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