Problema con Javascript y CSS Hola!
estoy haciendo un menu retractil con javascript para que cuando el usuario clique en el MENU 1, este se expanda y muestre sus submenues, y si el usuario despues clica en MENU 2 el primer menu que clico MENU 1 desaparece y el MENU 2 se expande con sus submenues. Cada menu se expande y se vuelve a contraer con una funcion javascript . Espero que se tenga entendido la aclaracion del menu retactil.
clico menu 1: clico menu 2:
MENU 1 MENU 1
- Submenu 1 MENU 2
- Submenu 2 - Submenu 1
MENU 2 - Submenu 2
MENU 3 - Submenu 3
MENU 3
Solo que cada menu tiene un submenu y ese submenu es un link (<a href"">...</a>). Ahora, solamente los menus (MENU 1, MENU 2, MENU 3) tiene una imagen de fondo, los submenues no tienen ninguna imagen de fondo.
Entonces, cuando yo vengo y clico en MENU 1 se expande(funciona correcto el javascript) y me muestra los submenus, solo que cada submenu viene con la misma imagen de fondo que los menus, y cuando intento clicar en los enlaces del submenu este submenu tiene la misma reaccion javascript que los MENUS, vuelve a contraerse y no lleva a ninguna otra pagina(el enlace no funciona).
No se que puede ser... quizas sea que el menu y el submenu estan con la misma tag <a></a>... ahi va el codigo:
<script type="text/javascript" src="includes/boxes/lib/jquery.js"></script>
<script type="text/javascript" src="includes/boxes/lib/chili-1.7.pack.js"></script>
<script type="text/javascript" src="includes/boxes/lib/jquery.easing.js"></script>
<script type="text/javascript" src="includes/boxes/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="includes/boxes/js/jquery.accordion.js"></script>
<script src="includes/boxes/Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="includes/boxes/Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery().ready(function(){
// simple accordion
jQuery('#list1a').accordion();
jQuery('#list1b').accordion({
autoheight: false
});
// second simple accordion with special markup
jQuery('#navigation').accordion({
active: false,
header: '.head',
navigation: true,
event: 'mouseover',
fillSpace: true,
animated: 'easeslide'
});
// highly customized accordion
jQuery('#list2').accordion({
event: 'mouseover',
active: '.selected',
selectedClass: 'active',
animated: "bounceslide",
header: "dt"
}).bind("change.ui-accordion", function(event, ui) {
jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown</div>').appendTo('#log');
});
// first simple accordion with special markup
jQuery('#list3').accordion({
header: 'div.title',
active: false,
alwaysOpen: false,
animated: false,
autoheight: false
});
var wizard = $("#wizard").accordion({
header: '.title',
event: false
});
var wizardButtons = $([]);
$("div.title", wizard).each(function(index) {
wizardButtons = wizardButtons.add($(this)
.next()
.children(":button")
.filter(".next, .previous")
.click(function() {
wizard.accordion("activate", index + ($(this).is(".next") ? 1 : -1))
}));
});
// bind to change event of select to control first and seconds accordion
// similar to tab's plugin triggerTab(), without an extra method
var accordions = jQuery('#list1a, #list1b, #list2, #list3, #navigation, #wizard');
jQuery('#switch select').change(function() {
accordions.accordion("activate", this.selectedIndex-1 );
});
jQuery('#close').click(function() {
accordions.accordion("activate", -1);
});
jQuery('#switch2').change(function() {
accordions.accordion("activate", this.value);
});
jQuery('#enable').click(function() {
accordions.accordion("enable");
});
jQuery('#disable').click(function() {
accordions.accordion("disable");
});
jQuery('#remove').click(function() {
accordions.accordion("destroy");
wizardButtons.unbind("click");
});
});
</script>
<style type="text/css">
<!--
.style1 {
font-size: 16px
}
.style9 {font-family: Verdana, Arial, Helvetica, sans-serif}
-->
</style>
<title>Menu retratil</title></head>
<body>
<div id="wrapper">
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="content">
<div class="post">
<div class="entry">
<h2> </h2>
<div id="list1b">
<?
$sql=mysql_query("... algo...");
while($categorias=mysql_fetch_array($sql)){
$name_categoria=$categorias['1'];
?>
<a><? echo $name_categoria;?></a>
<div id="list_int">
<?
$sql2=mysql_query("...algo...");
while($row_categorias=mysql_fetch_array($sql2)){
$name=$row_categorias['1'];
?>
<img src="images/categories_marker.gif" width="3" height="6" alt="" border="0" />
<p><a class="none" id="none" href="allprods.php"><? echo $name; ?></a></p>
<? } ?>
</div>
<? }
?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</div>
y el codigo CSS:
* { margin: 0; padding: 0; }
html, body, #main { height: 100% }
body, div { font-family: 'lucida grande', helvetica, verdana, arial, sans-serif }
body { margin: 0; padding: 0; font-size: small; color: #333 }
h1, h2 { font-family: 'trebuchet ms', verdana, arial; padding: 10px; margin: 0 }
h1 { font-size: large }
h3 { margin-top: .5em; }
#main { padding: 1em; }
#banner { padding: 15px; background-color: #06b; color: white; font-size: large; border-bottom: 1px solid #ccc;
background: url(bg.gif) repeat-x; text-align: center }
#banner a { color: white; }
fieldset { padding: 8px; }
legend { font-weight: bold; }
pre { margin-bottom: 1em; }
li { list-style-type: none; }
.basic, #list2, #list3, #navigation { width:20em; }
#log { position:fixed; bottom: 0; right:1em; text-align:right; }
#switch { position: fixed; bottom: 0; right: 15em; }
#list1b {
width: 200px;
font-family: verdana;
border: 0px solid black;
}
#list1b div {
background-color: #fff;
}
#list1b div p {
margin-bottom : 0px;
padding: 3px;
}
#list1b div a{
background-color: #00a0c6;
}
#list1b p {
margin-bottom : 10px;
border: none;
text-decoration: none;
font-weight: bold;
font-size: 10px;
margin: 0px;
padding: 10px;
}
#list1b a {
cursor:pointer;
display:block;
padding:5px;
margin-top: 0;
text-decoration: none;
font-weight: bold;
font-size: 10px;
color: #ffffff;
background-color: #00a0c6;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #999;
background-image: url("../images/AccordionTab2.gif");
}
#list1b a:hover {
background-color: white;
background-image: url("../images/AccordionTab2.gif");
}
#list1b a.selected {
color: #ffffff;
background-color: #80cfe2;
background-image: url("../images/AccordionTab2.gif");
}
#list_int p a.none{
color: #00ff66;
background-color: #ffffff;
background-image:none;
margin-bottom : 0px;
padding: 3px;
}
#list2 {
height: 178px;
border: 1px solid #eee;
overflow: hidden;
}
#list2 .red {
color: red;
background-color: red;
}
#list2 .green {
color: green;
background-color: green;
}
#list2 .blue {
color: blue;
background-color: blue;
}
#list2 dd { height: 130px; overflow: hidden; }
#list3 { border: 1px solid #111; }
#list3 div.selected .title { font-weight: bold; }
#list3 div div {
border-left:8px solid #6699CC;
padding: 5px;
}
#list3 div.title {
border: 1px solid #3366AA;
background-color: #6699CC;
padding: 10px;
cursor: pointer;
}
#list3 div.selected {
border-bottom: none;
}
#navigation {
border:1px solid #5263AB;
margin:0px;
padding:0px;
text-indent:0px;
background-color:#E2E2E2;
width:200px;
}
#navigation a.head {
cursor:pointer;
border:1px solid #CCCCCC;
background:#5263AB url(images/collapsed.gif) no-repeat scroll 3px 4px;
color:#FFFFFF;
display:block;
font-weight:bold;
margin:0px;
padding:0px;
text-indent:14px;
text-decoration: none;
}
#navigation a.head:hover {
color:#FFFF99;
}
#navigation a.selected {
background-image: url(images/expanded.gif);
}
#navigation a.current {
background-color:#FFFF99;
}
#navigation ul {
border-width:0px;
margin:0px;
padding:0px;
text-indent:0px;
}
#navigation li {
list-style:none outside none; display:inline;
}
#navigation li li a {
color:#000000;
display:block;
text-indent:10px;
text-decoration: none;
}
#navigation li li a:hover {
background-color:#FFFF99;
color:#FF0000;
}
#wizard {
width: 200px;
border: 1px solid black;
}
#wizard .title {
background-color:#DDDDDD;
}
@media print {
.basic div, #navigation ul, #list2 dd, #list3 div{
display: block!important;
height: auto!important
}
}
por favor me ayuden.... necesto solucionarlo con urgencia.... y no se como en el enlace del submenu sacar el efecto del javascript con css....
gracias de antemano...
Atte,
YO
