Contenido

Menús desplegables con CSS

1 mar

+ 27

Con este fantástico tutorial podremos montar menús desplegables de forma rápida, obteniendo unos menus de lo más utiles. Como siempre Interner Explorer ha de tocar los coj… para poder hacer funcionar este ejemplo en IE tendrémos que ñadir un fichero javascript que se encargue de realizar el efecto…

Imagen3.jpg

<!--[if gte IE 5.5]>
<script language="JavaScript" src="dhtml.js" type="text/JavaScript"></script>
<![endif]-->

Pero por lo demás esta comprobado que funciona perfectamente en los siguientes navegadores.

  • Firefox – Windows
  • Firefox – Linux, Mac
  • IE 5.5+ – Windows
  • Safari 2.0+ – OSX
  • Opera 7+ – Windows
  • Opera 7+ – Linux

La forma de implementar estos menus es bastante simple y lógica. Simplemente introducimos una lista dentro de otra lista, y otra dentro de esta… asi conseguimos esta escalera de elementos que queremos mostrar.

<ul id="navmenu">
    <li><a href="#">Root nav item</a>
    <ul>
        <li><a href="#">Sub nav item</a></li>
    </ul>
    </li>
</ul>

Importanto el fichero CSS ya tendremos listo nuestro menu desplegable.

  • Hola, necesito este instructivo, me estoy volviendo loco con el tiempo (el cual no tengo) y me piden constantes modificaciones. te agradeceria de verdad

  • Oscar no entiendo que necesitas. Explicate un poco mejor y sin problemas intentaremos ayudarte entre todos.

  • Hola

    Bueno el menu css reciente que he creado funciona igual que este utilizando javascript.

    Lo que no es normal es que desde internet explorer no es posible descargar el “background-images” que he insertado en ella. En mozilla funciona correctamente.

    Algun tips??

    Gracias,

  • Hola.
    En FireFox funcione muy bien pero en IE6 SP2 no funaciona, los elementos no se despliegan, ya inclui la linea para asociar el JavaScript y nada!!.. alguien me puede indicar que pasa?
    Muchas gracias

  • Tengo un problema con IE6.
    Cuando selecciono algún elemento del menú este queda desabilitado totalmente ya no vuelve a mostrar las opciones del menú. En firefox funciona correctamente.
    Muchas gracias

  • holas…gracias por el ejemplo esta muy bueno. Pero no puedo hacer que ande para IE, me pueden explicar bien como hacerlo, donde tengo que agregar el fihrero de java??

  • Les escribo desde Monterrey, Mexico y tengo el mismo problema cuando utilizo IE 6, en mi computadora funciona perfectamente porque es IE 7.

    Alguien de uds. tiene una idea de como hacerlo funcionar en IE 6?

    Saludos…

  • Hola alguien sabe de donde podria bajar el fichero de javascript para ie 6? desde ya muchas gracias.

  • Estupendo me sacaron de un lio, y en estos momentos estoy investigando cada como se realizo paso a paso..jejeje mas vale saber pork si no luego me pierdo..jejeje

    Para los que no les funciona en ie6 les recomiendo que usen el script para desplegar el submenu…en caso de que al ponerlo en un archivo.js, no se pork pero no funciona(bueno yo estoy usando masterpages, no se si sea por eso..)

    Pero pongan el script en la cabecera…saludos…

  • He probado a poner el archivo javascript y mi menu desplegable sigue sin funcionar.

    Alguna otra solucion??

    Gracias de antemano

  • hola, estoy trabajando con css y tengo un menu desplegable pero el menu se despliega por debajo de la imagenes que tengo en la parte de abajo…. como soluciono esto?.. gracias.

  • Hola, quisiera hacer más grande el ancho de las columnas porque no me caben muchas de las palabras que introduzco. Lo más que he conseguido modificando el css es hacer todas las celdas más grandes, pero los desplegables secundarios solapan a los primeros porque se despliegan en la misma posición que cuando eran más pequeños. Alguna idea?

  • a mi también me anduvo en IE6 cuando coloqué el codigo JS directamente en el head, y no llamandolo a un archivo…

    ¿porque sería esto? ¿alguna explicación posible, además de que cada vez que uno se sienta a diseñar algo tenga que rezongar tanto con IE…?

  • Espero se encuentren bien solo quiero saber como puedo hacer para poder hacer un menu que he tratado de varias formas pero no lo logro hacer si ustedes pueden mandarme algun otro ejemplo,Cuando coloco mi menu si aparece en la pagina pero cuando se cambia la configuracion de tama;o se cambia de pocision que puedo hacer gracias…

  • Fantastico ????
    no pasa nada..no me funciona
    porque mejor no colocas todos los archivos en un zip

  • A mi en Ie6 no me funcionaba el menu horizontal y el problema lo he resuelto modificando el css

    UL#navmenu-h {
    BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px; WIDTH: 500px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; LIST-STYLE-TYPE: none; HEIGHT: 500px
    }

    el problema estaba en la altura (height)

  • Gracias por el post, me ha servido para hacer un menu de forma muy rápida. Saludos

  • Holas:
    he puesto el menú desplegable pero resulta que me falla en el ” Internet Explorer” únicamente en la página de inicio(index).Al intentar pasar el cursor sobre alguno de los botones que se despliegan estos desaparecen y no se pueden clickear.Alguien me podria decir cual puede ser el problema?

  • A mi me va casi perfecto… Lo modifiqué por completo y me quedó muy parecido a lo que buscaba. El único problema es que cuando le meto el js a través del archivo no se convierte en navegación horizontal (el menu si aparece). No se si habrá forma de arreglarlo pero dejo mi dirección por si alguien sabe algo o quiere saber qué hice oscardemallorca@yahoo.es

    Por cierto, en la linea de comando que pone arriba para el js hay un error y a lo mejor por eso a mucha gente no le funciona. El nombre del archivo no coincide con el archivo que te descargas.
    dhtml.js vs nav-h.js

  • Donde puedo descargar los archivos js?
    Si alguien de buen corazon me los puede enviar a goncofre@gmail.com se lo agradecería mucho

    See you later

  • Este sitio presenta dificultades para visualizar correctamente en internet explorer los tags que figuran abajo:

    WordPress webkit usabilidad themes Safari prototype plugins plugin PHP Opera navegadores MooTools lightbox jquery javascript itouch ipod iphone internet explorer imagenes IE8 iconos HTML5 HTML hack google.chrome google framework flash firefox3.1 firefox3 firefox firebug estandares entrevistas diseño CSS3 CSS comentarios canvas ajax Accesibilidad 2.7 2.6 2.5

  • Hola, tengo un menu desplegable en mi pagina web, y me funciona bien en cualquier navegador exepto Internet Explorer 7 en este sobresale el menu espero alguien me pueda ayudar.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.