Foros del Web » Creando para Internet » CSS »

Problema con Javascript y CSS

Estas en el tema de Problema con Javascript y CSS en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 26/10/2010, 20:19
 
Fecha de Ingreso: octubre-2010
Mensajes: 1
Antigüedad: 7 años, 1 mes
Puntos: 0
Pregunta 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>&nbsp;</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'];

?>

&nbsp;<img src="images/categories_marker.gif" width="3" height="6" alt="" border="0" />&nbsp;
<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

Etiquetas: javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:16.