Foros del Web » Creando para Internet » CSS »

Al hacer click que se desplegue el menu

Estas en el tema de Al hacer click que se desplegue el menu en el foro de CSS en Foros del Web. Hola!! Estoy realizando un menú desplegable a partir de un tutorial, está todo perfecto pero ahora quiero conseguir que el menú se desplegue al hacer ...
  #1 (permalink)  
Antiguo 22/04/2009, 06:17
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Al hacer click que se desplegue el menu

Hola!!

Estoy realizando un menú desplegable a partir de un tutorial, está todo perfecto pero ahora quiero conseguir que el menú se desplegue al hacer click en el primer enlace y después se mantenga abierto. (No se si me abré explicado muy bien)

Dejo el código HTML del menú:

Código:
       	<div id="dlmenu">
		<ul id="menu">
			<li class="gallery">

				<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
				<dt><a href="index.html">1.HOME</a></dt>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
            
            <li>
			<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
				<dl class="gallery">
                    <dt><a href="#">2.EMPRESA</a></dt>
                    <dd><a href="empresa.html">2.1 Presentación</a></dd>
                    <dd><a href="politica.html">2.2 Politica de empresa</a></dd>
                    <dd><a href="salud.html">2.3 Salud y seguridad</a></dd>
				</dl>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            
            
			<li>

                <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
                <dl class="gallery">
                    <dt><a href="#">3.TRABAJOS</a></dt>
                    <dd><a href="rehabilitacion.html">3.1 Rehabilitación</a></dd>
                    <dd><a href="obranueva.html">3.2 Obra Nueva</a></dd>
                    <dd><a href="pintura.html">3.3 Pintura</a></dd>
                    <dd><a href="revestimientos.html">3.4 Revestimientos</a></dd>
                    <dd><a href="cubiertas.html">3.5 Cubiertas</a></dd>
                    <dd><a href="canalizacionesbajantes.html">3.6 Canalizaciones-Bajantes</a></dd>
                    <dd><a href="patios.html">3.7 Patios</a></dd>
                </dl>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
                        
            <li>
            <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
				<dl class="gallery">
                    <dt><a href="#">4.SERVICIOS</a></dt>
                    <dd><a href="emergencia.html">4.1 Emergencias</a></dd>
                    <dd><a href="fotografia.html">4.2 Fotografia</a></dd>
                    <dd><a href="vehiculos.html">4.3 Vehículos</a></dd>
                </dl>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
            
			
            <li class="gallery">
            <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
                <dt><a href="contacto.php">5.CONTACTO</a></dt>
            </li>
		</ul>
      </div>
Y el código css

Código:
#colMenu{
width:200px;
height:300px;
background-color:#009933;
float:left;
}
#dlmenu {
	height:200px; 
	margin:0; 
	width:200px; 
	height:300px; 
	float:left;}
#menu {
	list-style-type:none; 
	margin:0 0 2px; 
	padding:0; 
	position:absolute; 
	width:5em; 
	z-index:100;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:10px; 
	width:200px;
	height:450px; 
	float:left; 
	background-image:url(../images/fondo_botonera.jpg);}
#menu li {
	display:block; 
	padding:0; 
	margin:0; 
	position:relative; 
	z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background-image:url(../images/btn_prin_fndo.jpg); color:#cc9900; font-weight:bold; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {height:180px;}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em; font-family:Arial, Helvetica, sans-serif;}
#menu dl {width: 200px; margin: 0; cursor:pointer;}
#menu dt {margin:0; padding: 0; font-size: 10px; border-top:1px solid #cce;}


#menu dd {margin:0; padding:0; font-size: 1em; text-align:left; visibility:visible; }
.gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 20px;  background-image:url(../images/btn_prin_fndo2.jpg);}
.gallery dd a, .gallery dd a:visited {color:#FFF7C4; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 30px; }
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover { background-image:url(../images/seleccion.png); color:#fff; font-weight:bold;}
Podéis ver el funcionamiento actual del menú en http://www.revesmar.com

Muchas gracias por vuestra ayuda.

Un saludo.
  #2 (permalink)  
Antiguo 22/04/2009, 08:52
 
Fecha de Ingreso: octubre-2008
Mensajes: 387
Antigüedad: 9 años, 1 mes
Puntos: 18
Respuesta: Al hacer click que se desplegue el menu

No se te ende bien. la pagina Revesmar es la que estas trabajando. Porque a mi me parece como que ya conseguiste lo que querias. Ahora si no lo es, la mejor forma de hacer un menu desplegable no es con CSS sino con Javascript, AJAX, y si tenes el Dreamweaver es muy per muy sencillo con el Spry Framework.

Saludos.
  #3 (permalink)  
Antiguo 22/04/2009, 11:34
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Al hacer click que se desplegue el menu

Lo que quiero es que cuando hago click en el botón el menú quede abierto... y no se vuelva a cerrar al mover el ratón... se que con css se puede hacer creo que por lo que he leído con:

visibility hidden o visible pero no se dónde debo meterlo...
  #4 (permalink)  
Antiguo 22/04/2009, 11:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Al hacer click que se desplegue el menu

Con CSS deberías añadir al selector que tiene el efecto :hover un :focus y un :active, por ejemplo:
li a:hover, li a:focus, li a:active {...}

Esto hará que al pulsar se quede abierto, pero sólo hasta que pulses en otra parte. Si quieres que el quedarse abierto sea persistente no puedes hacerlo sólo con CSS, porque no tiene un mecanismo para cambiar la clase; deberás usar otro método como con javascript por ejempo.
  #5 (permalink)  
Antiguo 23/04/2009, 02:55
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Al hacer click que se desplegue el menu

Mikmoro eso es lo que deseo que se quede abierto hasta que pulse en otro lugar. Ok voy a probar, aunque no se si me ha quedado demasiado claro... bueno cuando haya estreñido mis neuronas os cuento!!

Gracias!!!
  #6 (permalink)  
Antiguo 23/04/2009, 11:20
Avatar de adriancitov7  
Fecha de Ingreso: abril-2009
Ubicación: New York
Mensajes: 75
Antigüedad: 8 años, 7 meses
Puntos: 4
Respuesta: Al hacer click que se desplegue el menu

mikmoro en su pagina tiene muchos menus usando css y html estandar muy bien logrados deberias visitar araudi.net y ver su codigo fuente
  #7 (permalink)  
Antiguo 07/05/2009, 03:20
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Al hacer click que se desplegue el menu

Anda pues sí, que bien esa página no la conocia!!! Me va a servir de mucho!!! Muchas gracias y un saludo!!
  #8 (permalink)  
Antiguo 07/05/2009, 15:56
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Al hacer click que se desplegue el menu

Hola:

Cita:
Iniciado por denica001 Ver Mensaje
la mejor forma de hacer un menu desplegable no es con CSS sino con Javascript
y si el usuario tiene el javascript desactivado ¿funciona ese menú?

Saludos.

  #9 (permalink)  
Antiguo 07/05/2009, 17:27
Avatar de adriancitov7  
Fecha de Ingreso: abril-2009
Ubicación: New York
Mensajes: 75
Antigüedad: 8 años, 7 meses
Puntos: 4
Respuesta: Al hacer click que se desplegue el menu

la mayoria de los menus de araudi.net son usando solo codigo css valido asi que todos funcionan perfectamente en cualquier navegador ;)
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 04:46.