menú css Es mi primer post en este foro y quería saber si alguien me podía echar un cable.
Resulta que estoy probando de instalar un menú en CSS para mi tienda pero necesitaría modificarlo de tal forma que al cargarse apareciese desplegada la primera subcategoría y que esta quedará fija (que no se escondiera). El resto de subcategorías si que me interesa que se escondan. Espero haberme explicado
Os copio el código del menú:
Código:
Muchas Gracias de nuevo.<?
// cssMenu - Begin of configuration //
$cssMenuConfig = array();
$cssMenuConfig['ShowEmptyCategories'] = false; // Should CSS Menu show empty categories? true / false;
// cssMenu - End of configuration //
?>
<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: 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 */
</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 ){
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'>";
}
$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);
$totalitemsincategory = tep_count_products_in_category($categories['categories_id']);
if (cssMenu_ShowCategory($cssMenuConfig['ShowEmptyCategories'], $totalitemsincategory)) {
$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 );
}
if (cssMenu_ShowCategory($cssMenuConfig['ShowEmptyCategories'], $totalitemsincategory)) {
$returnval .= "</li>";
}
}
$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>
<!-- categories_eof //-->
Saludos desde Palma!!!
).
