переробить всплывающее меню в раскрывающееся на JavaScript

[netweb]

задача состоит в том штоби переделать меню в котором раскриваєтса подуровни при наведении мишкой и не закриваютса на меню в котором откриваютса и закриваютса подуровни при клике мишки

сайт зделан с помощю скрипта vamshop и дополнительно установлен модуль CSS меню для стандартных шаблонов VaM Shop для того штоби кроме вывода категорий-подкатегорий можно также в меню показывать и товары. вот сам сайт http://dindon.com.ua/

Html/JavaScript

{config_load file="$language/lang_$language.conf" section="boxes"}
{literal}
<script type="text/javascript">
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.onclick=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>
{/literal}

[netweb]

добавляю php

<?php
$start = microtime();
$box = new vamTemplate;
$box_content = '';
$box->assign('language', $_SESSION['language']);
if (!CacheCheck()) {
$cache=false;
$box->caching = 0;
} else {
$cache=true;
$box->caching = 1;
$box->cache_lifetime = CACHE_LIFETIME;
$box->cache_modified_check = CACHE_CHECK;
$cache_id = $_SESSION['language'].$_SESSION['customers_status']['customers_status_id'].$cPath;}
if(!$box->is_cached(CURRENT_TEMPLATE.'/boxes/box_categories.html', $cache_id) || !$cache){
$box->assign('tpl_path', 'templates/'.CURRENT_TEMPLATE.'/');
$cssMenuConfig = array();
$cssMenuConfig['ShowEmptyCategories'] = true;
show empty categories? true / false;
$cssMenuConfig['includeProducts']     = true;
$cssMenuConfig['maxProductsInMenu']   = 8;
$cssMenuConfig['moreText']            = "More...."; 
// require_once (DIR_FS_CATALOG.'templates/'.CURRENT_TEMPLATE.'/source/
inc/vam_show_category.inc.php');
require_once (DIR_FS_INC.'vam_has_category_subcategories.inc.php');
require_once (DIR_FS_INC.'vam_count_products_in_category.inc.php');
$categories_string = '';
if (GROUP_CHECK == 'true') {
$group_check = "and c.group_permission_".$_SESSION['customers_status']['customers_status_id']."=1 ";}
$categories_query = "select c.categories_id,
cd.categories_name,
c.parent_id from ".TABLE_CATEGORIES." c, ".TABLE_CATEGORIES_DESCRIPTION." cd
where c.categories_status = '1'
and c.parent_id = '0'

[netweb]

вот файли stylesheet.css + categories.php + box_categories.html

[netweb]

продовження php

".$group_check."
and c.categories_id = cd.categories_id
and cd.language_id='".(int) $_SESSION['languages_id']."'
order by sort_order, cd.categories_name";
$categories_query = vamDBquery($categories_query);
function PrintProducts( $category_id, $categories_string , $includeul, $languageID)
{global $cssMenuConfig;
$product_path="product_info.php?cPath=".$category_id."&products_id=";
$products_query = vam_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 = '&nbsp;(' . $totalitemsincategory . ')';}}
$i=0;
while ($i < $productsDisplay) {
$products = vam_db_fetch_array($products_query);
$product_query = vam_db_query("select products_name from products_description where products_id = " . $products['products_id'] . " AND language_id = ".$languageID );
$product = vam_db_fetch_array($product_query);
$returnval .= "<li><a href='".$product_path.$products['products_id']."'>+1".$product['products_name']."+2</a></li>\n";
//   $returnval .= "<li><a href='".vam_href_link(FILENAME_PRODUCT_INFO, vam_product_link($products['products_id'], $product['products_name']))."</a></li>\n";
$i++;}
if ( $addMore ) {
$returnval .= "<li><a href='".$categories_string."'>".$cssMenuConfig2['moreText']."</a></li>\n";}
if ( $productsDisplay > 0 || !$includeul ) {
$returnval .= "</ul>";}
return $returnval;}
function PrintSubMenus( $parentID, $languageID, $start_path ){
global $cssMenuConfig;
$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'>";}
if (GROUP_CHECK == 'true') {
$group_check = "and c.group_permission_".$_SESSION['customers_status']['customers_status_id']."=1 ";}
$categories_query = vam_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . 
TABLE_CATEGORIES_DESCRIPTION . " cd where c.categories_status = '1' and c.parent_id = '".$parentID."' ".$group_check." and 
c.categories_id = cd.categories_id and cd.language_id='" . (int)$languageID ."' order by sort_order, cd.categories_name");
while ($categories = vam_db_fetch_array($categories_query))  {
if ($start_path == "") {
$grouppath = $categories['categories_id'];
} else {
$grouppath = $categories['categories_id'];}
$cPath_new = vam_category_link($grouppath,$categories['categories_name']);
$categories_string = vam_href_link(FILENAME_DEFAULT, $cPath_new);
$totalitemsincategory = vam_count_products_in_category($categories['categories_id']);
$count_string = '';
if ((SHOW_COUNTS == 'true') && ($totalitemsincategory > 0) ){
$count_string = '&nbsp;(' . $totalitemsincategory . ')';}
if (cssMenu_ShowCategory($cssMenuConfig['ShowEmptyCategories'], $totalitemsincategory)) {
$returnval .= "<li><a href='".$categories_string."'>".$categories['categories_name'].$count_string."</a>\n";}
if ( vam_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;}}}
$box->assign('BOX_CONTENT', PrintSubMenus( 0, $_SESSION['languages_id'], '' ));}
if (!$cache) {
$box_categories = $box->fetch(CURRENT_TEMPLATE.'/boxes/box_categories.html');
} else {
$box_categories = $box->fetch(CURRENT_TEMPLATE.'/boxes/box_categories.html', $cache_id);}
$vamTemplate->assign('box_CATEGORIES', $box_categories);
?>

[netweb]

+css

.suckerdiv li {display: table;}
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: disc;
width: inherit;
border-bottom: 2px solid #ccc;
font-family: arial;
font-size: 13px;
}
	
.suckerdiv ul li{
position: static;
background-color: #eee;
}

/*1st level sub menu style */
.suckerdiv ul li ul{
position: static;
width: inherit;
display: none;
list-style-type: disc;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul{ 
left: 164px; /* ничого */
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li a{ 
left: 164px; /* ничого */
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: table;
color: #0000FF;
text-decoration: none;
background-color: #eee;
padding: 1px 5px;
border: 1px solid #0033FF;
border-bottom: 1px solid #0033FF;
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: #00CC33;
color: yellow;
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(img/arrow_right.gif) no-repeat ;
}

/* 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;
}


* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

[Levsha100]

Здрасте! Меня зовут %USERNAME% )))))
Как дела?