hola amigos, les cuento tengo un menu desplegable con jquery, este menu lo hice con puros divs con el atributo class para cada div lo y q pasa es q solo tengo el menu con un solo item q al hacer click se desplegan sus subitems y lo q quiero ahora es seguir agregando items a su lado derecho del item existentes, obviamente alineados y eso es lo q no he logrado, ya q probe con el atributo float left, pero no me funcionciona al igual q el atributo float right, este es mi prblema ¿como le agrego items al menu hacia el lado derecho alineados con el item existente?, aca esta mi codigo
HTML y Javascript
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="css/estilo.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menú Toggle</title>
<script type="text/javascript">
$(document).ready(function()
{
$(document).click(function(){
$("div.menu_body").hide();
});
$("#firstpane p.menu_head").click(function(e)
{
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(img/left.png)"});
e.stopPropagation();
});
});
</script>
</head>
<body>
<div style="float:left;" >
<div id="firstpane" class="menu_list">
<p class="menu_head"><strong>Inventario</strong></p>
<div class="menu_body">
<p class="menu_head">Carga de Datos</p>
<div class="menu_body">
<a href="#">Cargar Archivo</a>
<a href="#">Ingreso Manual</a>
<a href="#">Estado Cargas</a>
</div>
<p class="menu_head">Inspección</p>
<div class="menu_body">
<a href="#">Generar Pautas</a>
<a href="#">Inspecciones</a>
<a href="#">Estado Inspecciones</a>
</div>
<p class="menu_head">Reportes</p>
<div class="menu_body">
<a href="#">Resumen</a>
<a href="#">Detalle Inventario</a>
</div>
<p class="menu_head">Mantenedor</p>
<div class="menu_body">
<a href="#">Unidad</a>
<a href="#">Marca/Modelo</a>
</div>
</div>
</div>
</body>
</html>
Codigo CSS
Código:
body {
margin: 10px auto;
font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.menu_list {
width: 150px;
}
.menu_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body {
display:none;
}
.menu_body a{
display:block;
color:#006699;
background-color:#EFEFEF;
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover{
color: #000000;
text-decoration:underline;
}
espero me puedan guiar de antemano gracias...