[SOLUCIONADO] Menu vertical con pestaña desplegable

yokiboku · #1 (**permalink**) 12/03/2013, 05:59

Buenas!

Estoy diseñando una página, básicamente con HTML y CSS pero me gustaría hacer una cosa con javascript para el menú que seguramente sea sencilla pero al no controlar mucho pido vuestra ayuda.

Quiero hacer un menú normal vertical con imágenes que se mantenga fijo en la página en la parte izquierda (hasta ahí fácil) pero me gustaría que se ocultara y se desplegara con una pestaña de menú... ¿Cómo puedo hacer para ocultar un elemento y que se despliegue al pinchar o al poner encima el cursor?

Pongo una imagen para ilustrar un poco mejor lo que intento describir. Muchisimas gracias :D

IsaBelM · #2 (**permalink**) 12/03/2013, 07:09

si te he entendido, para desplegar y plegar el menú, puedes usar también css

Cita:

<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
position: relative;
}

html, body {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
background-color: red;
}

#slide_menu{
background-color: #282828;
color: #CCC;
font: 13px Verdana, Helvetica, sans-serif;
text-align: left;
display: block;
cursor: pointer;
width: 150px;
height: auto !important;
padding: 40px 30px;
position: fixed;
top: 100px;
left: -190px;
border: 1px solid #424141;
border-radius: 0 12px 12px 0;
box-shadow: 2px 2px 5px #333;
-webkit-box-shadow: 2px 2px 5px #333; /* para safari */
transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}

#slide_menu:hover{
left: -20px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
z-index: 99; /* para que se superponga el contenedor */
}

#contenedor {
float: right;
height: auto;
margin-left: 50px;
background-color: red;
}
</style>
</head>
<body>

<div id="slide_menu">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type<br /> and scrambled it to make a type specimen book.
</div>

<div id="contenedor">

<div>
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
</div>

</div>

</body>
</html>

yokiboku · #3 (**permalink**) 13/03/2013, 06:31

Hola IsaBelM

Muchisimas gracias, era eso lo que quería hacer, lo he probado y me ha quedado perfecto, no sabía que se podía hacer con CSS. Gracias de nuevo :D