Menu desplegable 100% CSS

antonioamdp · #**271** (**permalink**) 20/01/2010, 09:23

Hola a todos, soy nuevo en este foro y me inscribí con el fin de agradecer a MIKIMORO su extraordinario trabajo y dedicación para crear un menú desplegable. No sé si leerás esta respuesta, porque he visto que desde Setiembre pasado no intervienes en el foro, igual tienes buenos discípulos que pueden continuar por ti.
Aunque te hayas retirado, cansado, jubilado o lo que sea, igual tu obra perdura. Eso es lo bueno en un ser humano, que no pasa por la vida como un vegetal.
Un gran abrazo.
Antonio

Araneda · #**272** (**permalink**) 16/02/2010, 08:37

Hola a todos. No sé si han llegado a enterarse pero se ha encontrado otro sistema de menús sólo con CSS y que no apela a comentarios condicionales en la página: http://thinkhtml.blogspot.com/

Inspirado en el ejemplo de Timo, he creado un sistema de menú tipo acordeón con sólo CSS. En su última versión incluye el efecto deslizante mediante CSS3 "transitions" (actualmente funcional en Chrome y Safari, en desarrollo en Firefox y Opera) y SMIL (para IE): http://aranedaalejandro.wordpress.com

PJ100 · #**273** (**permalink**) 24/03/2010, 07:44

Mikmoro, con respecto al primer Menu CSS que escribiste en el primer post, si yo quiero agregarle más menús debajo, no me deja seleccionar bien los links de los <li> de segundo nivel. ¿Existe alguna solución?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Menu desplegable CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="menu.css" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>

<ul>
<li><a href="#">Opción 1.1</a></li>
<li><a href="#">Opción 1.2</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 2</a>

<ul>
<li><a href="#">Opción 2.1</a></li>
<li><a href="http://www.google.es">Opción 2.2</a></li>
<li><a href="#">Opción 2.3</a></li>
<li><a href="#">Opción 2.4</a></li>
<li><a href="#">Opción 2.5</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 3</a>

<ul>
<li><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="#">Opción 3.3</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 4</a>

<ul>
<li><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="#">Opción 4.4</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 5</a>

<ul>
<li><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="#">Opción 5.3</a></li>
</ul>

</li>
<li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>

<ul>
<li><a href="#">Opción 1.1</a></li>
<li><a href="#">Opción 1.2</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 2</a>

<ul>
<li><a href="#">Opción 2.1</a></li>
<li><a href="http://www.google.es">Opción 2.2</a></li>
<li><a href="#">Opción 2.3</a></li>
<li><a href="#">Opción 2.4</a></li>
<li><a href="#">Opción 2.5</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 3</a>

<ul>
<li><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="#">Opción 3.3</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 4</a>

<ul>
<li><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="#">Opción 4.4</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 5</a>

<ul>
<li><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="#">Opción 5.3</a></li>
</ul>

</li>

</ul>
</div>
</body>
</html>

delgaillo · #**274** (**permalink**) 27/04/2010, 04:49

Muchas gracias.

masuv · #**275** (**permalink**) 03/06/2010, 22:14

Necesito hacer un menú vertical que se despliega a la izquerda...alguien me puede ayudar con eso please

alexk · #**276** (**permalink**) 03/06/2010, 22:23

Cita:

Iniciado por masuv

Necesito hacer un menú vertical que se despliega a la izquerda...alguien me puede ayudar con eso please

lee

este mismo post y las faqs

nicolaslt · #**277** (**permalink**) 12/06/2010, 15:25

Que grande!!

:)

vega_85 · #**278** (**permalink**) 09/07/2010, 04:21

Hola!!! He hecho un menú vertical con el ejemplo MENU 5 y en los enlaces de que llevan submenú y en ese momento están activos no me funcionan. Os pongo el código:

Código HTML:

Ver original<div id="menu" style="position:absolute; left: 2px; top: 221px; z-index:2;">
<ul>
  <li class="nivel1 primera"><a href="index.htm" class="nivel1"><img src="flechita.gif" width="17" height="17" border="0" style="vertical-align:middle " />&nbsp;&nbsp;EMPRESA</a>
<!--[if lte IE 6 ><a href="#" class="nivel1ie">EMPRESA<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
  <li class="nivel1"><a href="productos.htm" class="nivel1"><img src="flechita.gif" width="17" height="17" border="0" style="vertical-align:middle " />&nbsp;&nbsp;PRODUCTOS  > </a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">PRODUCTOS<table class="falsa"><tr><td><![endif]-->
    <ul>
        <li class="primera"><a href="garbanzo.htm"> · GARBANZO</a></li>
        <li><a href="frijol.htm"> · FRIJOL</a></li>
        <li><a href="ajonjoli.htm"> · AJONJO&Iacute;</a></li>
        <li><a href="nuez.htm"> · NUEZ</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="procal.htm" class="nivel1"><img src="flechita.gif" width="17" height="17" border="0" style="vertical-align:middle " />&nbsp;&nbsp;PROCESO Y CALIDAD</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">PROCESO Y CALIDAD<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
  <li class="nivel1"><a href="contacto.htm" class="nivel1"><img src="flechita.gif" width="17" height="17" border="0" style="vertical-align:middle " />&nbsp;&nbsp;CONTACTO</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">CONTACTO<table class="falsa"><tr><td><![endif]-->
  </li>
</ul>
</div>

El error me aparece en la página productos, garbanzos, ajonjoli, frijol y nuez. A no he comentado que el error me da en IE8, en mozilla funciona a la perfección.

Saludos!! Y gracias de antemano!!

shafa361 · #**279** (**permalink**) 14/07/2010, 10:59

mikmoro yo tengo una pregunta soy nuevo en esto de css quiseiera saber como bajar estos menus ya tengo una web bueno pequeñita pero no he podido diseñar un menu como estos me dices como los bajo porfavor

shafa361 · #**280** (**permalink**) 14/07/2010, 11:01

mikmoro yo tengo una pregunta soy nuevo en esto de css quiseiera saber como bajar estos menus ya tengo una web bueno pequeñita pero no he podido diseñar un menu como estos me dices como los bajo porfavor, si tienes una respuesta o alguien tiene una respuesta a mi peticion favor mandarme un mensaje con las instrucciones a mi correo es [email protected] gracias a todos

Carlangueitor · #**281** (**permalink**) 14/07/2010, 11:09

Solo copias el código (html y css).

Saludos

darkjav · #**282** (**permalink**) 09/08/2010, 11:30

hola que tal, como podria hacer para redondear las puntas en el Menú 5: menú en vertical???, he intentado modificando el .css y no tengo resultado, ojala alguien me responda, gracias por todo

Libardo · #**283** (**permalink**) 18/08/2010, 14:23

Cordial saludo.
Mil felicitaciones por vuestra pagina.
Como soy novato en esto de paginas web, muy comedidamente le solicito que expliquen como ver o copiar el código de la pagina y la de css.
Gracias.

jomaruro · #**284** (**permalink**) 18/08/2010, 14:34

Hola:

No sé de que página hablas pero desde el menú de tu navegador Ver -> Código fuente

Saludos.

JnN_jEnN · #**285** (**permalink**) 20/08/2010, 11:14

Se puede hacer un menu horizontal que tengas links que despliegue un submenu vertical y otro link que contenga otro submenu horizontal y que a la vez pueda desplegar otr submenu vertical??? Si me hago entender????

Tengo ese menu pero no me sirve porque tengo que manejar bases de datos y este es un script

Alguien que me ayude

jomaruro · #**286** (**permalink**) 21/08/2010, 01:15

Hola:

¿Y que se desplieguen a la vez?

Saludos.

JnN_jEnN · #**287** (**permalink**) 23/08/2010, 08:59

Hola

Mira tengo 16 links que tienen que caber dentro de un mismo menu.

Lo que necesito es que aparezcan como minimo 9 links con menu vertical con sus respectivos submenus, y el ultimo link = "ver el resto del menu" y que ahi aparezcan el resto de links que hacen falta del los 20, pero de forma horizontal, igualmente con sus respectivos submenus y que estos se depliegue verticalmente.

Gracias por tu ayuda

jomaruro · #**288** (**permalink**) 23/08/2010, 14:32

Hola:

Date una vuelta por las FAQ's de CSS, a ver si alguno de los menús aportados por Mikmoro te sirve de algo.

Saludos.

JnN_jEnN · #**289** (**permalink**) 23/08/2010, 16:12

ya no es necesario, encontre la solucion a mi problema =)

Algo un poco chambona pero igual sirve

jijiji

= gracias

Milad · #**290** (**permalink**) 08/09/2010, 16:29

hola a todos, tengo una duda que me está volviendo loco, y no logro encontrar el problema. veo que a todo el mundo le funcionó, y no veo que mi problema se haya repetido en el hilo.

El inconveniente: quiero usar el primer menu (horizontal y que se despliegue hacia abajo) pero no logro hacer que el menu me aparezca centrado. El nivel 2 parece que sí aparece centrado con respecto al contenedor general, entonces sucede que el nivel 2 se ve corrido hacia la derecha del nivel 1 (que no está centrado)

pego el código css, a ver si me pueden ayudar:

@charset "utf-8";
/* CSS Document */

/* Propiedades del fondo, para que ocupe todo el fondo de pantalla */

html, body {
background-color: #0e4663;
}

/* estilo que permite que el contenido del sitio se sitúe encima del fondo */

#scrollable {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
overflow:auto;
z-index:2;
}

/* caja */

#contenedor {
width: 760px;
margin: auto;
text-align: left;
background-color: #dde0db;
padding: 10px;
}

/* estilos de cabecera */

#cabecera {
text-align: center;
margin: auto;
}

#img_cabecera {
text-align: center;
margin: auto;
width:760px;
height:160px;
background-image: url('../img/encabezado.jpg');
}

#menu {
text-align: center;
font-family: Arial, sans-serif;
font-size: 10pt;
background-color: #094a2b;
width: 760px;
height: 25px;
margin: 0 auto;
}

#menu ul { list-style-type: none;}

#menu ul li.nivel1 { float: left;
width: 100px;
margin-right: 1px;
padding: 5px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #094a2b;
position: relative;
}

#menu ul li:hover {position: relative;
}

#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}

#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}

#menu ul li ul {display: none;
}

#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {width: 100px;
border-top-color: #000;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}

/* estilos de contenido */

#colcont {
width: 740px;
background: #ccd6ce;
float: left;
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
}

#col1 {
width: 350px;
float: left;
font-family: Arial, sans-serif;
font-size: 10pt;
color: #0e4663;
text-align: left;
margin-left: 10px;
}

#col2 {
width: 350px;
float: left;
font-family: Arial, sans-serif;
font-size: 10pt;
color: #0e4663;
text-align: left;
margin-top: 40px;
margin-left: 20px;
}

/* estilos de pie */

#pie {
width: 760px;
font-family: Arial, sans-serif;
font-size: 8pt;
font-weight: strong;
color: #dde0db;
text-align: center;
background: #0e4663;
padding: 3px 0px 3px 0px;
margin-top: 10px;
clear: both;
}

/* estilos de formulario de contacto */

input {
width:330px;
height:20px;
color:#000;
font-family: Arial, sans-serif;
}

#boton {
float:left;
background:#fff;
color:#c4161c;
width: 50px;
height: 20px;
font-family: Arial, sans-serif;
font-size: 10px;
outline:none;
border: 0px;
}

.estilotextarea {
width: 330px;
height: 200px;
}

/* estilo de texto del contenido */

.titulo {
font-family: Arial, sans-serif;
font-size: 13pt;
text-align: left;
color: #0e4663;
font-weight: bold;
}

.subtitulo {
font-family: Arial, sans-serif;
font-size: 9pt;
text-align: left;
color: #0e4663;
font-weight: bold;
}

.requeridos {
font-family: Arial, sans-serif;
font-size: 9pt;
text-align: left;
color: #005b7b;
font-style:italic;
}

Espero que alguna persona pueda ayudarme, desde ya gracias!

Milad · #**291** (**permalink**) 14/09/2010, 15:46

ya lo solucioné, gracias de todos modos.

jmcm73 · #**292** (**permalink**) 16/09/2010, 07:16

Buenas tardes,

He intentado usar el menu 4, horizontal pulsado, en IE8, y no se ve correctamente, quedando el submenu detrás de los botones principales. Hay forma de arreglarlo?.

Yo ya tengo adaptado para lo que necesito el menu 2, existe algún código del css que cambiandolo se quede como el menu 4, es decir, que no sea hover, sino pulsado.

Gracias de antemano.

nonocampa · #**293** (**permalink**) 03/10/2010, 05:35

Hola

felicidades por el post y por el curro.
Tengo una pregunta de novato total.
He insertado el menu 2 en la web q estoy haciendo y lo he adpatado en tamaño y colores pero lo q me sucede es q otra lista q tengo en web me la deforma, osea quita el tabulado original de la lista y lo pone todo a la izquierda y alineado.
he intentado cambiarlo por listas de distintos tipos y definiciones pero nada.

aq se debe ?

gracias

JJAT80 · #**294** (**permalink**) 08/10/2010, 02:03

Hola estoy utilizando el menu desplegable nº 5: http://chopinete.onlinewebshop.net/ en la barra izquierda, el tema es que con IE 6 y con mozilla se ve correctamente, pero con IE 7 y con IE 8, no se ve nada del menu, el codigo del menu es este:

<div id="menu">
<ul>
<li class="nivel1 primera"><a href="#" class="nivel1">Peces Marinos</a>


<ul>
<li class="primera"><a href="#">Acanthuridos (Peces Cirujano)</a></li>
<li><a href="#">Blenios, Gobios y Labridos</a></li>
<li><a href="#">Chaetodones (Peces Mariposa)</a></li>
<li><a href="#">Gasterostiformes(Caballitos, Pipas...)</a></li>
<li><a href="#">Pomacanthidos (Peces Angel)</a></li>
<li><a href="#">Pomacentridos (Payasos y Damiselas)</a></li>
<li><a href="#">Peces Ballesta, Halcon y Escorpion </a></li>
<li><a href="#">Serranidos y Anthias</a></li>
<li><a href="#">Otros Peces Marinos</a></li>

</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Corales e Invertebrados</a>


<ul>
<li class="primera"><a href="#">Anemonas</a></li>
<li><a href="#">Coral Blando</a></li>
<li><a href="#">Coral Duro LPS</a></li>
<li><a href="#">Coral Duro SPS</a></li>
<li><a href="#">Crustaceos, Camarones...</a></li>
<li><a href="#">Estrellas y Erizos</a></li>
<li><a href="#">Tridacnas y Bivalvos</a></li>
<li><a href="#">Otros Invertebrados</a></li>

</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Roca, Sustrato, Alga</a>

<ul>
<li class="primera"><a href="#">Algas Marinas</a></li>
<li><a href="#">Roca Viva y Roca Base</a></li>
<li><a href="#">Sustratos</a></li>

</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Acuario de Agua Dulce</a>

<ul>
<li class="primera"><a href="#">Bettas</a></li>
<li><a href="#">Discos</a></li>
<li><a href="#">Escalares</a></li>
<li><a href="#">Plantas Acuaticas</a></li>
<li><a href="#">Resto Animales Acuaticos</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Productos Acuariofilia</a>

<ul>
<li class="primera"><a href="#">Aditivos</a></li>
<li><a href="#">Alimentacion</a></li>
<li><a href="#">Bombas y Circulacion del Agua</a></li>
<li><a href="#">Enfriadores/Calentadores</a></li>
<li><a href="#">Iluminacion</a></li>
<li><a href="#">Reactores</a></li>
<li><a href="#">Sal Sintetica</a></li>
<li><a href="#">Skimmers</a></li>
<li><a href="#">Urnas y Sumps</a></li>

como veis al primer nivel del menu le he añadido esto:<!--[if lte IE 7]> <!--[if lte IE 8]> que como podeis ver no esta en los siguientes primeros niveles ya que al no verse en IE 7 y 8, intente hacer una prueba a ver si asi se veia, pero tampoco se ve con este sistema.
Si le cambio el html y le indico:
<!--[if lte IE *]><a href="#" class="nivel1ie">
si que se ve en IE 7 y 8 el menu, pero entonces tengo el problema de que se ve tambien en la web la orden <!--[if lte IE *]> y no queda bien ya que aparece encima de cada nivel del menu dicha orden que en teoria tendria que estar oculta.
Alguien saber como resolver el problema y hacer que se vea correcto en IE 7 y 8??

De la hoja de estilos solo he cambiado el color del fondo y de los enlaces el resto es igual que la que tenemos en el foro.

madman_18 · #**295** (**permalink**) 08/10/2010, 08:30

pedazo de ayuda ^^ un 10!!!!

:aplauso :

nonocampa · #**296** (**permalink**) 12/10/2010, 14:32

yo tampoco consigo hacerlo funcionar en IE8.

[URL="http://www.espinabifidasevilla.es"]http://www.espinabifidasevilla.es[/URL]

walvaRo · #**297** (**permalink**) 14/10/2010, 17:05

¡Increible trabajo Mikmoro!
Me has dejado asombrado.

Imagino que se puede ir extendiendo como un árbol, cada una de las opciones...

nonocampa · #**298** (**permalink**) 22/10/2010, 17:03

Cita:

Iniciado por nonocampa

yo tampoco consigo hacerlo funcionar en IE8.

[URL="http://www.espinabifidasevilla.es"]http://www.espinabifidasevilla.es[/URL]

Al final he tenido q optar por el IE8.js para poderlo mostrar en IE8 pero sigo sin poder ccentrar las cabeceras del nivel1. si sabeis como me lo podeis decir ?

gracias.

[URL="http://www.espinabifidasevilla.es"]www.espinabifidasevilla.es[/URL]

P.D. Gracias por el menú.

opcionuno · #**299** (**permalink**) 28/12/2010, 10:57

Yo lo monte en la siguiente pagina pero no se porque se me descuadro el nivel 2 y además al pasar el mouse en el menú y al pasar al nivel 2 no se deja seleccionar, alguien me puede ayudar mil gracias de antemano.

ver aqui www.asellerator.com

Ricardo

madman_18 · #**300** (**permalink**) 28/12/2010, 13:33

Cita:

Iniciado por opcionuno

Yo lo monte en la siguiente pagina pero no se porque se me descuadro el nivel 2 y además al pasar el mouse en el menú y al pasar al nivel 2 no se deja seleccionar, alguien me puede ayudar mil gracias de antemano.

ver aqui www.asellerator.com

Ricardo

Verás, el descuadre viene dado por que usa la propiedad del margen para situar las cajas con más o menos desplazamiento. Prueba a ver en el css del nivel2 del menú (lo siento pero no recuerdo qué nombre le daba en el estilo) y juega con dicha propiedad....creo también que por eso no te permite en ocasiones seleccionar el submenú....ya me comentas a ver si te ha servido de ayuda =)