Menu scroll horizontal desplegable

JnN_jEnN · #1 (**permalink**) 04/08/2010, 16:14

Hola soy reeeenueva y tengo un super problemon.

Estoy haciendo una web en asp (poco se de asp, lo basico), y me piden un menu que sea scroll y que cuando uno pase por encima de algun link se depliegue un submenu; y todos los datos vienen de una base de datos.

Si me explique?¿

?¿ creo q si!

Ayudaaaa!! ya lo he intentado todo, busco y no encuentroooooo

webbber · #2 (**permalink**) 04/08/2010, 16:16

hola,
aki hay miles de formas de hacer menus en CSS en todas las posiciones.
saludos

JnN_jEnN · #3 (**permalink**) 04/08/2010, 16:21

Te juro que he buscadoo y rebuscadoo, he hecho hasta hibridos y nada no se puede, busque en todas las webs de css que existen y no =(

webbber · #4 (**permalink**) 05/08/2010, 14:50

Es que lo que quieres no lo vas a encontrar hecho. En link quete di puede servirte parahacer el menu estilo acordion o como lo quieras, pero para hacer aparecer datos de tu base de datos, ahi tienes que usar tu programacion y agregar los estilos del menu.

TheDark03 · #5 (**permalink**) 05/08/2010, 15:17

Holas...

hace unos dias tenia q hacer algo similar y esto es lo q use de referencia

Código HTML:

Ver original<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Prueba vertical</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $("#secondpane p.vertical_head").mouseover(function()
    {
         $(this).css({backgroundImage:"url(down.png)"}).next("div.vertical_body").slideDown(500).siblings("div.vertical_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(left.png)"});
    });
});
</script>
<style type="text/css">
body {
    margin: 10px auto;
    font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.vertical_list {    
    width: 150px;
}
.vertical_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
    font-weight:bold;
    background: #eef4d3 url(left.png) center right no-repeat;
}
.vertical_body {
    display:none;
}
.vertical_body a{
  display:block;
  color:#006699;
  background-color:#EFEFEF;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.vertical_body a:hover{
  color: #000000;
  text-decoration:underline;
  }
</style>
</head>
<body>
 
  <div class="vertical_list" id="secondpane"> <!--Code for vertical starts here-->
        <p class="vertical_head">Header-1</p>
        <div class="vertical_body">
        <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a> 
        </div>
        <p class="vertical_head">Header-2</p>
        <div class="vertical_body">
            <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a> 
        </div>
        <p class="vertical_head">Header-3</p>
        <div class="vertical_body">
          <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>         
       </div>
  </div>  
 
</body>
</html>

no se como ponerte el jquery mejor te pongo la version y te la descargas es la 1.2.3 o sino me dices una forma de pasartelo

Saludos.. espero q te sirva

JnN_jEnN · #6 (**permalink**) 10/08/2010, 10:14

Hola, si ya se que no lo encuentro hecho, lo he intentado haciendolo con js, coji un slideshow y lo acomode a la necesidad, funciona a las mil maravillas en Firefox anexandole el menu desplegable, pero en IE ya no me funciona si le agrego el otro menu; y aparte de todo el tiene un codigo en el div que le dice que tiene cierta altura para ver lo que se encuentra dentro, haciendo que el menu desplegable no se vea, de la unica forma que logro visualizarlo es colocando el height mas grande, pero esto ocuparia mucho espacio =S y quedaria mal.

TheDark03, seria de gran ayudaaaa ;)

Igual gracias a todos por tomarse el tiempito de ayudarme :)

TheDark03 · #7 (**permalink**) 10/08/2010, 11:31

Hola... antes te deje un ejemplo con el codigo necesario para desplegar el menu al pasar el mouse x el hipervinculo.. solo te faltaria implementar un scroll y ya q todo esta dentro de un contenedor te sera mas facil...

Saludos DTB...

mira implementa el scroll y te voy ayudando de a pocos OK... aunque eso ya no seria css :S

JnN_jEnN · #8 (**permalink**) 10/08/2010, 12:00

Chanfle, no creo que pertenezca a este foro mas

me tocara trastearme con mis catres para Javascript. Bueno será.