menu php css y java! Mi problemita es el siguiente... Tengo un dropline menu creado con php, css y javascript,... el caso es que una vez que se haga click en cualquier opcion del menu automaticamente se tiene que desplegar el submenu asociado a este.
El caso es que si funciona pero hay que hacer click sobre la imagen(+) y no sobre el texto del menu... no se si me explico... a continuacion dejo el codigo
Código PHP:
<?php
//connect to database
include('conecta.php');
//get all rows
$query = mysql_query('SELECT * FROM categorias');
while ( $row = mysql_fetch_assoc($query) )
{
$menu_array[$row['categoria_id']] = array('categoria_id'=>$row['categoria_id'],'categoria_name' => $row['categoria_name'],'categoria_padre' => $row['categoria_padre']);
}
//recursive function that prints categories as a nested html unorderd list
function generate_menu($parent)
{
$has_childs = false;
//this prevents printing 'ul' if we don't have subcategories for this category
global $menu_array;
//use global array variable instead of a local variable to lower stack memory requierment
foreach($menu_array as $key => $value)
{
if ($value['categoria_padre'] == $parent)
{
//if this is the first child print '<ul>'
if ($has_childs === false)
{
//don't print '<ul>' multiple times
$has_childs = true;
echo '<ul>';
}
echo '<li><a href="index.php?categoria_id='.$value['categoria_id'].'">'.$value['categoria_name'] .'</a>';
//echo '<li><a href="index.php?' . $value['categoria_id'] . '/">' . $value['categoria_name'] . '</a>';
generate_menu($key);
//call function again to generate nested list for subcategories belonging to this category
echo '</li>';
}
}
if ($has_childs === true) echo '</ul>';
}
//generate menu starting with parent categories (that have a 0 parent)
?>
<link rel="stylesheet" href="expand.css" />
<script src="expand.js"></script>
<ul id="categories">
<?php
generate_menu(0);
?>
</ul>
</div>
<script>menu_initiate();</script> Código HTML:
var menu, menu2, cookieA,cookieA2, cookieC;
//global variables
function menu_initiate()
{
cookieC=0;
if(document.cookie)
{
cookieA=document.cookie.split(";");
cookieA2=new Array();
for(i in cookieA)
{
cookieA2[ cookieA[i].split("=")[0].replace(/ /g,"") ] = cookieA[i].split("=")[1].replace(/ /g,"");
}
}
cookieA = ( document.cookie.indexOf("state=")>=0 ) ? cookieA2["state"].split(",") : new Array();
menu = document.getElementById("categories");
for( var o=0; o< menu.getElementsByTagName("li").length;o++)
{
if(menu.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0)
{
menu2 = document.createElement("span");
menu2.className = "images";
menu2.style.backgroundImage = (cookieA.length>0)?((cookieA[cookieC]=="true")? "url('minus.png')":"url('plus.png')"):"url('plus.png')";
menu2.onclick = function()
{
show_hide(this.parentNode);
wCookie();//save state
}
menu.getElementsByTagName("li")[o].insertBefore(menu2,menu.getElementsByTagName("li")[o].firstChild)
menu.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";
if(cookieA[cookieC]=="true")
{
show_hide(menu.getElementsByTagName("li")[o]);
}
cookieC++;
}
else
{
menu2 = document.createElement("span");
menu.getElementsByTagName("li")[o].insertBefore(menu2,menu.getElementsByTagName("li")[o].firstChild);
}
}
}
function show_hide(el)
{
el.getElementsByTagName("ul")[0].style.display = ( el.getElementsByTagName("ul" )[0].style.display == "block" ) ? "none" : "block";
el.getElementsByTagName("span")[0].style.backgroundImage = ( el.getElementsByTagName("ul")[0].style.display=="block" ) ? "url('minus.png')":"url('plus.png')";
}
function wCookie()
{
cookieA=new Array()
for( var c = 0;c < menu.getElementsByTagName("li").length; c++ )
{
if( menu.getElementsByTagName("li")[c].childNodes.length>0 )
{
if ( menu.getElementsByTagName("li")[c].childNodes[0].nodeName == "SPAN" && menu.getElementsByTagName("li")[c].getElementsByTagName("ul").length>0 )
{
cookieA[ cookieA.length ] = ( menu.getElementsByTagName("li")[c].getElementsByTagName("ul")[0].style.display=="block" );
}
}
}
document.cookie="state="+cookieA.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();
//set cookie expiration to 1 year
}
function desplegar(catNode)
{
var menu = document.getElementById( 'menu' );
var cats = menu.getElementsByTagName( 'UL' );
for( i=0; i<cats.length; i++ ) {
var items = cats[i].getElementsByTagName( 'LI' );
for( u=0; u<items.length; u++ ) {
if( cats[i] != catNode ) {
items[u].style.display = 'none';
} else {
items[u].style.display = 'block';
}
}
}
}
var visto = null;
function mostrar() {
obj = document.getElementById("categories");
obj.style.display = (obj==visto) ? 'none' : 'block';
if (visto != null)
visto.style.display = 'none';
visto = (obj==visto) ? null : obj;
}
a,a:visited
{
color:#000000;
text-decoration:none;
}
a:hover
{
text-decoration:underline;
}
#categories ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
font: bold 13px Arial;
background: #242c54 url(bluedefault.gif) center center repeat-x;
}
#categories ul li{
display: inline;
}
#categories ul li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
}
#categories ul li a:visited{
color: white;
}
#categories .images{
float:left;
width:16px;
height:1em;
background-position:0 50%;
background-repeat:no-repeat;
}
#categories ul li ul{
position: absolute;
z-index: 100;
margin: 0;
padding: 0;
float: left;
top: 40px;
background: #303c76;
width: 95%;
}
#categories ul li ul li a{
font: normal 13px Verdana;
padding: 6px;
padding-right: 8px;
margin: 0;
border-bottom: 1px solid navy;
}
#categories ul li ul li a:hover{
background: #242c54;
}
#categories, #categories ul{
font-size:14px;
font-family:Tahoma,Verdana,Arial;
text-align:left;
margin:0;
padding:0;
padding:0px;
list-style-position:outside;
list-style-type:none;
}
#categories li{
margin:0 0 0 30px;
padding:0;
list-style-type:none;
padding:0px;
display:inline;
}
#categories .images{
float:left;
width:16px;
height:1em;
background-position:0 50%;
background-repeat:no-repeat;
}
--
-- Estructura de tabla para la tabla `categorias`
--
CREATE TABLE IF NOT EXISTS `categorias` (
`categoria_id` int(11) NOT NULL AUTO_INCREMENT,
`categoria_name` varchar(100) COLLATE utf8_bin NOT NULL,
`categoria_padre` int(11) NOT NULL,
PRIMARY KEY (`categoria_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=13 ;
--
-- Volcar la base de datos para la tabla `categorias`
--
INSERT INTO `categorias` (`categoria_id`, `categoria_name`, `categoria_padre`) VALUES
(1, 'Web development', 0),
(2, 'Application development', 0),
(3, 'Linux', 0),
(4, 'Misc', 0),
(5, 'Php', 1),
(6, 'Mysql', 1),
(7, 'Javascript', 1),
(8, 'CSS', 1),
(9, 'C plus plus', 2),
(10, 'wxWidgets', 2),
(11, 'Tutorials', 3),
(12, 'My thoughts', 4);
