Crea tu propio menú desplegable con submenús dentro! Todo eso con solo HTML y CSS sin la necesidad de lenguajes como javascript.

Share on Pinterest
Comparte con tus amigos










Enviar

En este tutorial aprenderás como hacer un menú desplegable con HTML y CSS de una manera muy sencilla, con pocas lineas de código sin tener que utilizar javascript de por medio.

 Como hacer un menú desplegable – Videotutorial

 

 

Demo: http://www.falconmasters.com/demos/menu-desplegable.html

Código en Github: https://github.com/falconmasters/tutoriales/blob/master/menu-desplegable.html

 

Preguntas Frecuentes

P: Como puedo centrar el menú horizontalmente?

Respuesta: Se supone que el menú que tienes debería estar centrado, ya que al id header ya le agregamos un ancho y un margen automático, en el extraño caso de que no tuvieras centrado tu menú debes seguir los siguientes pasos.

Es muy sencillo, lo único que tienes que hacer es tomar todo el código que se encuentre dentro de la etiqueta <ul class=”nav”> y encerrarlo en otra etiqueta, en este caso utilizare una etiqueta html5 llamada nav, (etiqueta que debí usar en el menú desde el principio, pero para no confundirlos no la puse) y a esta ultima etiqueta nav agregarle con CSS un ancho y un margen automático para que se centre, el código quedaría algo asi:

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • Guest

    lol

  • xD

    Hola disculpa a mi no me sale así en horizontal a que se deberá?

    • Debería salirte en horizontal, me parece extraño, pero revisa bien tu código css, seguramente hay esta el problema, revisa sobre todo los float left

    • Seguramente el problema esta en los float, revisa bien tu código sobre todo el código css, si aun tienes problemas no dudes en decírmelo.

      • Scar Forget

        Tío nunca avía visto esa dedicación has respondido todos los comentarios te has ganado un subscriptor ando estudiando html y css pronto comenzare con javascript no se mucho pero si lo basico y un tin mas. la verdad no pondre mis errores aqui ya que se como analizar el codigo y buscar los errores o modificarlo por mi mismo pero gracias por el aporte.☼

        • Pues si paso un buen rato respondiendo, pero vale la pena ayudar lo mas que pueda :D
          Muchas gracias a ti por ver mi contenido :D

          • Juan Espartosa

            Es genial funciona perfectamente.Mil gracias
            El unico problema que tengo es que por mas que lo intento no puedo pegar el menu a la izquierda de la pantalla
            Podrias decirme como arreglar esto?? gracias

          • No le pongas la propiedad de margin auto que le puse en el video.

  • Leonardo Javier Maturana Verga

    una pregunta amigo…. tengo un problema no se me muestran lkos menus al pasr el raton encima???? que puede ser

    • El problema esta en los hovers entonces, revisa de la linea 48 a 50 este código, que no tengas errores:

      • Leonardo Javier Maturana Verga

        Amigo aun no logro encontrar el error
        te adjunto mi codigo a ver si me puedes orientar

        Portada

        body {
        background-image: url(imagenes/fondo%20madera.gif);
        }
        * {padding:0px;
        margin:0px;
        }
        #header{margin:auto;
        width:auto;
        font-family:”Comic Sans MS”;
        }
        ul, ol{
        list-style:none;
        }
        .nav li a {
        background:#FFBF00;
        color:#045FB4;
        text-decoration:none;
        padding:10px 15px;
        display:block;
        }
        .nav li a:hover{
        background:#BDBDBD;
        }
        .nav > li{
        float:left;
        }
        .nav li ul {
        display:none;
        position:absolute;
        min-width:150px;
        }
        .nav li a:hover > ul {
        display:block;
        }

         

        Útiles
        Mi Escuela
        Inspectoria
        Actualiza tus Datos
        Docentes
        Menú
        Apoderados
        Correo STLS
        Agenda Semanal
        Puebas
        Guías de Estudio
        Talleres Escolares
        Extensión Universiraria
        Fotografías

        Inicio

        ¿Quiénes Somos?

        Proyecto Educativo
        Nuestra Filosofía
        Misíon
        Academia
        Visión

        Admisión

        Mateo-Net

        Mineduc

        Charlas Postulación 2014
        Becas y Creditos 2014
        Memorias Ayudadas Estudiantiles
        Rebaja Cuota CAE

        Contacto

        Estimados Apoderados……. se les recuerda que el día viernes 02 de mayo se realizarán clases Normales

         
         
         
         
         
         
         
         

         
         
         
         
         
         
         
         

         
         
         
         
         
         
         
         

         
         
         
         
         
         
         
         

         
         
         
         
         
         
         
         

         
         
         
         
         
         
         
         

         
         
         
         
         
         
         
         


        Sitio Optimizado para Mozilla Firefox
        http://www.mavalnet.cl

        • Te recomiendo que tu código lo pongas aquí, es mas fácil que me lo muestres de mediante esa plataforma: http://codepen.io/pen/

          El error esta en que en el codigo css no especificas donde esta el nav y el ul, el problema que tienes es que estas haciendo un sitio web con tablas, los sitios web no se hacen con tablas, eso no se hace desde hace 10 años, utiliza divs, es mucho mejor y no tendrias problemas como el que tienes ahora.

  • Luis Gomez

    Excelente :P

  • Snilek

    Exelente aporte… bueno yo tengo una duda en el código ya que me aparece por debajo de un los submenús es decir se empalma arriba y no me deja ver los submenús.. agradecería una ayuda… XD

  • Snoopy diaz

    Tengo un problema, el asterisco (*) me aparece inactivo en el editor de texto cuando lo escribo, o sea, no parece hacer una función, no cambia de color ni nada de eso. Los atributos que contiene asterisco (*) no cambian de color.

    * {
    margin:0px;
    padding:0px;
    }

    • No tiene porque cambiar de color necesariamente, depende del editor de código que tengas

      • Snoopy diaz

        sí, pero cuando actualizo el .html no me cambia nada en la vista previa del navegador. No será de .css ese atributo, y por qué a ti te funciona en el .html?

        • Si que es de CSS, pero en realidad no importa si cambia el color o no lo que importa es que elimine todos los margenes y paddings de todos los elementos, la magia no ocurre con el editor de código, ocurre con el interprete que es el navegador web.

          • Snoopy diaz

            Ahora le aplique los submenu a mi página, ¿Qué hago para hacer desplegable los menú de mi página ya hecha sin alterar el color y la posición?

          • Tienes que analizar la estructura html del menú de tu pagina y aplicarle estilos CSS, no es algo fácil y se te va a complicar si no entiendes el código css.

      • Snoopy diaz

        Me retracto, tienes razón con lo de no tiene que cambiar de color. Probé
        tu código que tienes en GitHub y me funcionó, alguna otra cosa tengo
        mal, jeje.

        Ahora lo que me gustaría es aplicarle un menú desplegable a mi página web ya hecha, sin alterar el color y la posición de mi menú.

  • fantom dj

    problemas amigo habré la pajina pedida ,dentro de un recuadro este código pero no deriva a ella gracias de todos modo algo funciona se ve en la pejina

  • jose ochoa

    como poner un url alos botones

    • Cambiando el # por la URL

      • Cristian Andres Gonzalez

        hola que pena por mi poca imaginación pero tengo el mismo problema no se como redireccionar los botones podrias ayudarme porfa…. gracias ….. te felicito por todos los tutoriales son lo mejor que se puede encontrar en la web.

        • abraham Sanchez

          Para poner un link a los botones… es en las “” comillas, entre las dos comillas “””” pones el URL (link)

        • David Martínez Casado

          a href=”url con el http de la web que quieres”>Nombre del botónNombre del botón</a

          (con los final okey??)

  • ramon

    la barra no me centra

  • marcos rodrigo

    como puedo poner el menú desplegable en una sola linea por que no quiero que este en dos?? como lo puedo hacer??

    • No entiendo muy bien tu pregunta, a que te refieres?

  • Luis Garcia

    como puedo poner el menu en otro lado de la pagina que no sea arriba?

    • Pones el código que utilizamos en la parte del codigo html que tu quieres que vaya.

    • David Martínez Casado

      Con el:

      position:relative;
      top:;
      bottom:;
      right:;
      left:;

      Y en cada hueco pones los pixeles o % que quieras.

      PD: Cuesta de pillarle el tranquillo al relative xd

  • Victor Julian Laboinet

    Hola Amigo hise todoLo que dijiste acerca de el menu del video: http://www.youtube.com/watch?v=oZa2Ut8u2S0 pero Hubo demasiados comandos que no funcionaban…..
    Pero en fin ya lo arregle pero Podrias hacer un video de como al darle cilck A un

    Nos lleve a otro fondo?

  • Alex Espinoza

    Como agregarías animación a su visibilidad ?
    algún ejemplo (código)

    • Podrias intentarlo asi:


      .nav li:hover > ul {
      display:block;
      -webkit-transition: all 300ms ease;
      -moz-transition: all 300ms ease;
      -ms-transition: all 300ms ease;
      -o-transition: all 300ms ease;
      transition: all 300ms ease;

      }

      • Roxana

        Ante todo, GRACIAS GRACIAS por compartir, enseñar y demostrar esa verdadera vocación solidaria.
        Mi problema es con la animación. He adicionado el código anterior al estilo indicado, y no cambia nada. Estoy probando con Firefox 32 y Chrome 31.
        ¿Qué estaré haciendo mal u omitiendo? ¿Cómo resuelvo el problema?

        • Hola que tal, el error fue mio, el problema es que no podemos agregar animaciones a elementos con display block, es decir que no podemos animar que aparezca o desaparezca, eso se podria hacer con jquery, pero es completamente diferente, si quieres animaciones puedes intentar con este menu:
          http://www.falconmasters.com/tutoriales/menu-desplegable-animaciones-css3/

          • Roxana

            Gracias nuevamente, lo revisaré …

          • Aleejandroo Hernandezz

            Hola Carlos Arturo, me a servido mucho el tutorial,:) muchas gracias, pero tengo una duda , es algo que no agregaste en tu video, como agregarle los link al submenu osea, como ago para que cuando yo le di clik a submenu1 me envie a otra pagina, me podrias dar un ejemplo por favor?, Muchas gracias

          • Eso es con enlaces básicos de HTML, es decir cambiando el # y sustituyéndolo por tu pagina web dentro del href=”#” (incluyendo http://).

            Te dejo un curso básico de HTML: http://www.falconmasters.com/cursos/curso-de-html-basico/curso-html-basico/

  • nayib quessep

    copiar y pegar el codigo HTML y el codigo CSS: https://www.facebook.com/nquessep/posts/829397587092766

  • Vicente Castilo

    ¿Porqué cuando pongo mas de 4 items en el menu, me aparece abajo?
    asi mira

    • Mario Talavera

      El problema es que en header del estilo se encuentra a 500px aumenta el tamaño necesario para que se observe como tu lo quieres

    • Lucas Jappert

      En IE no me funciona =/

  • Gaston

    la barra no me ocupa todo el largo de la pantalla, pude ajustarlo un poco modificando el tamaño de la fuente, pero me sigue faltando un poco, como podria hacer esto ? o sea tengo un banner con fondo y la barra la quiero colocar debajo pero es como que el fondo negro ocupa segun lo que haya escrito

    • Hola, si el menú está ubicado dentro de un div con un ancho especifico entonces coloca width: 100%; a tu menú. Saludos!

  • Sebastian Arias

    como le cambio el color al menu?

    • Humberto Molina López

      .nav li a {
      background-color:#000;
      cambia esto con hex

  • martin

    hola muy bueno el menú pero en ie no funciona me podrías ayudar gracias

  • Bstrt

    Hola y gracias por esta información. He añadido este menu fijo flotante en mi web y el único problema es que la siguiente parte al afectar a todo me descoloca el resto de elementos de la web:
    * {
    margin:0px;
    padding:0px;
    }
    Hay alguna modificación posible en tu código para evitar usar el *, o bien que no afecte al resto de la web si no solo a tu menú? Gracias y saludos!

    • Puedes omitirlo si quieres, o utilizar normalize.css

  • Weena Jimenez

    Excelente, muchas gracias por dedicar este tiempo a hacer tan buena explicación

  • Emanuel Pons

    Muy buenos y re fáciles de entender tus videos Carlos.. una consulta, si quiero que el menu aparezca en todas las paginas ¿tengo que repetir el codigo en todas o hay alguna alternativa?

    • Si, tendrias que repetir el código, hay varias alternativas, desde hacer algo mas complejo con PHP, o hacer archivos por cada elemento e importarlos también con PHP, mediante include();

      Si quieres saber mas dime y hago un articulo.

      • Emanuel Pons

        Tengo conocimientos medios a básicos en php y me interesaría si tenes tiempo para explicar este método sería re útil.. Muchas gracias

  • Miri Suarez

    Hola podrías decirme si puedo agregar este menú a una tabla en dreamweaver?

  • Daniel Gomez

    quisiera saber como hacer que el menu deplegable quede un poco mas centrado, que la posicion que ocupe en la pagina sea centrado. he hecho unas personalizaciones y al hacerla el menus se ve un poco a la izquierda y necesito que este al centro

  • jota

    Estimado muy buen tutorial me encanto pero me e dado cuenta que en mozilla no se desliza me podrias ayudar por favor, gracias.

  • Smerlyn Dävid Gälvän

    Hola! Carlos Arturo, Podrias darme el Enlace o Link de descarga del “Aptana” para 32 bits?
    (Gracias de antemano!)

  • Alonso Gonzalez

    Disculpa, como puedo hacer que el menu me abarque toda la pantalla?

  • Yesenia

    Disculpa ,el .nav es el nombre que le asignemos al ul ?

  • Lucas Jappert

    En IE no me funciona

  • Miguel Ángel Rosales Velasquez

    Excelente!

  • Alee

    disculpa, para poner en otro doc la parte css? osea en el html mandar a llamar css? como lo hago :O

  • maria

    Menu Desplegable

    * {
    margin:0px;
    padding:0px;
    }

    #header {
    margin:auto;
    width:500px;
    font-family:Arial, Helvetica, sans-serif;
    }

    ul, ol {
    list-style:none;
    }

    .nav > li {
    float:left;
    }

    .nav li a {
    background-color:#000;
    color:#fff;
    text-decoration:none;
    padding:10px 12px;
    display:block;
    }

    .nav li a:hover {
    background-color:#434343;
    }

    .nav li ul {
    display:none;
    position:absolute;
    min-width:140px;
    }

    .nav li:hover > ul {
    display:block;
    }

    .nav li ul li {
    position:relative;
    }

    .nav li ul li ul {
    right:-140px;
    top:0px;
    }

    Inicio
    Servicios

    Submenu1
    Submenu2
    Submenu3
    Submenu4

    Submenu1
    Submenu2
    Submenu3
    Submenu4

    Acerca de

    Submenu1
    Submenu2
    Submenu3
    Submenu4

    Contacto

  • handha100 .

    Como puedo hacer que sea un menu desplegable

  • Miroslava Altamirano

    Me encanta el menú pero me queda solo en la parte de arriba de mi blog y quiero sabe como moverlo de lugar. Gracias

  • Ana Gonzalez

    hola una preguntota yo lo quiero de forma vertical
    como le puedo hacer para que se despliegue el submenu de lado y no hacia abajo ?
    es que ya le intente y no puedo :( no me sale

  • Luis

    Hola, quiero hacer un menú desplegable pero necesito que quede en vertical a la izquierda, que tengo que hacer? por cierto excelentes tutoriales,

  • Ale

    Hola Carlos :D Disculpa, la barra no se centra y ya agrege el código que escribiste en el post, me podrias sugerir algo, por favor. Gracias

  • Nicolas Alfonso Hernandez Cald

    cual es el programa que utilizan para programar ?

    • THESONOFGOD

      text sublime o bracket entre otros

  • Angelica Vasquez

    como hacer para que cuando le des al menu salga la pagina que quieres

  • David Fuentes

    Muchísimas gracias, buscaba un tutorial justo como éste. Saludos!

  • Guest

    como podría ponerle un sub-sub menú?, si me puedes sacar de la duda por favor!.

  • miguel

    hola una pregunta me gustaria que mi sub menu tuviera otro submenu pero cuando lo coloco mira que me pasa
    espero y me puedan ayudar

  • pilar

    Hola, disculpe como puedo hacer para que el mismo menu del ejemplo se
    vea hacia abajo y que sus enlaces se habran hacia arriba? Espero su
    respuesta, gracias. Le adjunto la imagen para explicarme mejor.

    • Christian Andres Castro

      Hola, me sirvio el tutorial, lo que no entiendo bien es como ponerlo al lado izquierdo…si me puedes decir como hacerlo te lo agradeceria mucho

  • Emmanuel Sequera

    como hago para que el submenu que sale de configuracion no se corra tanto a la derecha?

    • gabriela

      ponle un center y te quedara en el medio

      • Pug Land

        Como un center? ami me pasa lo mismo… :(

  • Erick

    ¡Hola!

    Excelente tutorial y gran aportación

    Soy principiante en esto

    Solo que tengo dos problemas que son los siguientes:
    1.El menu no se centra completamente a pesar de que le agregue el id header que indicaste
    2.Cuando quiero poner contenido este se pone a la derecha del menú y no abajo

    Para lo del contenido modifique que el menú estuviera dentro de y mi contenido en pero no hubo resultado, también trate un salto de párrafo pero es lo mismo.

    Si me pudieras ayudar te lo agradecería mucho.

  • Rob Amaya

    Hola Carlos Arturo!!
    Tu sitio y tus tutoriales estan geniales!!!
    Felicidades por tus metas alcanzadas!!
    Necesito de tu ayuda con el menu.
    Busco la manera de implementarlo para wordpress, de tal manera que siga siendo multivel, y no he podido lograrlo, te agradecere mucho tu pronta ayuda.

  • mart

    hola, el menu desplegable del video yo lo hice en frontpage y segui paso x paso del tutorial anotando el codigo en frontpage y al terminarlo no me salio como en el video y nose que paso, si segui exactamente los pasos

  • BryJ

    Amigo, disculpa, que funcion tiene “margin: auto”?

  • luis villamil

    una pregunta como puede escribir dentro del menu, osea dentro de contáctenos cuando haga clck me mande a la siguiente pagina donde este la inforacion

    • gabriela

      en el href ponle la direccion a donde quieres que se vaya

  • Junior XD

    disculpa como puedo hacer mas grande la letra del texto del menu sin que se bajen

    • The Daza

      en #header, debajo de “font-family” pones:
      font-size: 150%; (puedes poner el tamaño que quieras)

  • The Turtle World H

    entre submenu y submenu me sale una barra sin cubrir como puedo cambiar eso?

  • Pedro Kamt Jesfen

    hola, como podría hacer esta barra en vertical? … saludos

  • Walter Francisco Verdud

    Hola arturo, sigo tus tutoriales desde youtube!
    Queria preguntarte como hago para poner otros menus a los largo, por que agregue mas y me salen centrados y para abajo, yo quiero que se vayan para la derecha..

    Saludos!!!

  • Gustavo Angel Avila

    Exelente, solo le cambiare el tamaño :D

  • eduardo

    no se desplegar donde pudo ocurrir la falla?

  • FJ

    Como hago para poner en el menu un buscador

    ¡¡¡¡?

    • Rossy
  • Cristhian Stark

    Puse el menú horizontalmente del lado derecho de la pantalla y ahora quiero que al hacer clic aparezca del lado izquierdo sin salirse de la pagina ¿Me puedes decir como hacerle? Por Favor

  • Como se hace para que el menú pueda aparecer en varias páginas

  • Luis BT

    Hola. como puedo darle el tamaño y posición de este menú con como el otro que hiciste con imagenes, quiero este estilo pero de ese tamaño porfavor ayudame

  • Claudio González

    Excelente tutorial. Lo seguí y le realice algunas modificaciones visuales y me quedó bárbaro. Pero tengo un problema: trabajo con directorios, entonces el menú no es más que un enlace al directorio que me interesa, pero luego de que me muestra el html del directorio que seleccione, no se me despliega nuevamente el menú, ya no queda desplegable, me muestra el menú pero no los subitems, ¿qué podría estar ocurriendo?.

  • Lidia Espinosa

    ¡Hola! Llevo siguiendo tus tutoriales sobre html y css desde YouTube, eres en verdad grandioso y estoy enamorada de tu voz <3
    Bueno, a lo que voy: diseñé mi propio menú desplegable con las etiquetas correspondientes y todo va perfecto cuando lo introduzco en la parte correspondiente del blog. Pero al momento de añadirle el css, me queda descuadrado y sin forma. Intenté hacerlo paso por paso, tal como lo explicas en tu video, dándole diseño a cada cosa de a poco, y lo logré, solo que hay un pequeño detalle: los submenús quedan empalmados con el menú principal y no se despliegan en vertical sino en horizontal. ¿Qué es lo que estoy haciendo mal?

    De antemano, gracias si te diste el tiempo de contestar nwn

    • wow muchas gracias, eres la primer persona que me dice que le gusta mi voz.
      Sobre tu problema, estas realizando el menu en blogspot o en que plataforma?
      Si es así es muy probable que el error sea debido a que blogspot tambien agrega código CSS para sus plantillas, ese código css puede estar afectando el menu.

      Sobre el empalmado pueden ser varias cosas también, incluyendo que a lo mejor algunos estilos del blog estén perjudicando alguna propiedad como el display inline block

      Hay algún link en donde pueda ver el menu? asi seria mas fácil revisar el problema.

      • Lidia Espinosa

        ¡Pude hacerlo!

        Realmente, no tengo mucha idea sobre cuál fue el problema xD, si gustas checar el código fuente de lo que hice aquí dejo el link http://idjhamanteur.blogspot.mx/, es un blog en estado de gestación :)

        Muchas gracias por contestarme, en verdad he aprendido bastante con tus tutoriales :D

        • Excelente!
          Me alegra que te guste mi contenido. Saludos

  • Andrez Barrios-Phantomm

    Disculpa deberías De enseñarnos a meterle el contenido a cada factor del menú osea, que tal contenido valla en inicio, el otro en categorías y así y también para los sub menus

  • Luis Mora

    ¿Cómo hago para que el menú abarque todo lo ancho de la pantalla!? (vi que respondiste en comentarios anteriores, pero no hallo el atributo al que debe cambiarse el valor).

    • abraham Sanchez

      Amigo para que abarque la pantalla donde dice (#header) comenzando el codigo HTML. en width:500px; … Hay cambia el 500px por 100%.

      • Jorge Huete Barrera

        pues yo he hecho eso y no me ocupa todo, que mas puede fallar?

  • Azolvo Cejes

    Hola, hace poco vi tus tutoriales y son geniales, estoy practicando la creación de menú para una página que estoy diseñando, he copiado el código practicamente igual pero el submenú aparece encaramado sobre el menú de navegación. ¿Cómo podría arreglarlo? Te adjunto una imagen indicandole el error.
    De antemano muchas gracias

  • Jarley miran

    ohhhhh gracias amigo me ayudo mucho a hacer el menu de mi pagina….. aqui te dejo unas imagenes =D gracias sigue asi hasta le pude agregar un boton en el primer menu

    • abraham Sanchez

      amigo como hiciste para poner el menu vertical?.

  • Juan Alejandro García

    oye disculpa ocupo de tu ayuda, tengo problemas con la barra de menú y el slide show, chocan entre ellos y no se muestra primero la barra de menú

    • Hola, intenta colocar la propiedad z-index:1000; al selector ul li ul para que la capa quede sobre todo lo demás. Luego me cuentas si eso te funciona, Saludos!

      • Luis Ruiz

        muy buena aportación, yo también tenia ese problema y lo arregle con z-index, saludos.

  • Gran Tutorial Carlos Arturo!

  • Bruno Gelp

    Como seria para poner el menu vertical?

    • Jaime de J. Martínez Torres

      Pudiste resolverlo?

  • David Campaña

    Hola para poner el menu en la izquierda y al desplegarlo se despliegue a la derecha, como seria?

  • Jose

    Hola Falcon Master, hay alguna forma de hacer los menus desplegables solo en html

  • Jesus

    Hola Falcon, me encantaría si me dijeras que tengo que saber para hacer un menú despegable, si, si sigo lo del tutorial pero quiero experimentar un poco mas yo solo, la única razón por la que no lo hago es porque aun no entiendo bien como hacer el menú jaja y pues como sabes jaja uno aprende un poquito mas con experiencia misma, pero pues creo que si necesito saber mas o menos algo para poder hacer este menú y sea de mayor facilidad de dominar para mi.

    ;) y en serio muchas gracias contigo aprendí demasiado, desde mis 12 años (creo) miro algunos de tus vídeos, gracias a ti y pues ahora tengo 16 apenas entrando a la prepa y pues de nuevo, gracias a ti decidí tomar programación para aprender un poquito de javascript jaja lo bueno es que ya entrare con un dominio en este tema :)
    Gracias!

  • Diego Andres

    como puedo hacer un menú desplegable y pegajoso o sticky menú desplegable??por favor !!

  • Luis Ruiz

    Yo tengo un problema, bueno el menú aparece bien esta perfecto pero como yo estoy utilizando Macromedia Dreamweaver 8 y estoy utilizando capas para poner la información, el problema es que la capa cubre el menú cuando se despliega y no se como hacer para corregirlo, no se si me podrían ayudar!

  • Yanett Llanos

    como puedo agregar una informacion a cada una de las barritas de menu me explico digamos que tengo una pestaña que dice politica al darle clic sobre ella me sale la informacion sobre la politica pero sin salirme de esa misma pagina

    • jesus

      se necesitaria un enlace local

      simplemente al elemento html que tiene lo de politica le agregas el identificador politica ejemplo:

      contenido de la seccion de politica

      y el enlace lo haces de la siguiente forma:

      ir a la seccion de politica

      el simbolo “#” es el que indica que se debe desplazar la ventana del navegador hasta la posicion del elemento con el identificador (id) politica

  • Daniel Perez

    muy bueno el tutorial, pero hay un problemilla a ver si me ayudas, todo sistema tiene diversos tipos de usuario y no todos pueden ver todos los item del menu, como se hace para bloquear un item en especifico, segun el usuario. Por ejemplo el usuario administrador entra a todas las opciones, pero el usuario invitado, solo puede tener acceso a menu de consulta.

    • jesus

      facil si estas con usuarios que tienen niveles de acceso debes tener una referencia a que nivel de acceso tienen, me imagino que debes estar trabajando en php, guarda en una variable de sesion ($_SESSION) el nivel de acceso, ahora si al menu le vamos a incluir un detalle en php para incluir los submenu que solo a el le interesan ejemplo:

      elemento de todos los usuarios
      elemento de todos los usuarios

      elemento para el administrador

      • Daniel Perez

        tengo un pregunta como hago con los select para que los lea con mvc

        El 9 de julio de 2016, 11:45, Disqus escribió:

  • Fanny Gil

    Como hago para que cuando el menú se desplegué se vea encima de una caja que esta debajo del menú???

    • jesus

      cambiale la propiedad z-index al elemento con identificador header colocale 200, con eso se superpondra a la mayoria de elementos

      • David Martínez Casado

        Yo también tengo ese problema, vamos a ver, pones “z-index:200px;” en cual de los elementos ???

  • Zulma Rodriguez

    hola! disculpa que te moleste. el tutorial esta muy bueno pero no logro que funcionen los submenus.
    hice un slideshow con tu tutorial y anduvo barbaro y ahora le agrego la botonera pero no me funcionan los submenus. quedan todos juntos en 3 lineas. no se que hice mal…. gracias por tu ayuda!!

  • Zulma Rodriguez

    hola!! ya encontre que pasaba, habia cerrado
    pero ahora tengo otro problema no puedo centrar el menu
    hice todo (creo obvio) pero sigue en el margen izquierdo grrrrrrrrrrrrr
    no se que mas hacer …

  • Maricielo Chelito Abarca Cebal

    tengo un problema la barra no me abarca toda la pagina a pesar de que le puse width=100%
    tendria que ver el hecho de que use notepad++?

    • Maricielo Chelito Abarca Cebal

      ayuda porfavor

    • David Martínez Casado

      Nop. Lo que pasa es que el width lo pones en un lugar que no toca. Si lo pruebas en el otro width que hay en el documento css seguro que funciona. Ánimo!!

  • israel valladares

    hola, tus tutoriales son muy buenos pero me encontré con un detalle. estoy usando una pagina con frame y puse el menú en un frame un poco angosto y al desplegar los submenus se ocultan detrás del frame que se encuentra abajo, no se si existe una forma de que los submenus no respeten el limite del frame y se muestren por encima.

    • jesus

      vas a permanecer con ese problema, ya que el iframe es otra pagina, entonces cuando se despliegue el menu se va a desplegar en el espacio que se ha reservado para esa pagina que estas visualizando en el iframe, este menu tienes que hacerlo necesariamente dentro de la pagina principal

  • mcc07

    No me funciona, ya copi’e el codigo igual y ocupa toda la pantalla, no se oculta, pero el demo si

  • Adilene ♡

    Yo hice ese menu pero quisiera saber, como le doy accion, por ejemplo en vez de mandarme a un url me mande a una seccion que este en el mismo archivo ya le intente con div pero aun asi no me manda a nada al contrario

    • jesus

      primero que nada debes colocarle un identificador (id) a la seccion de la pagina a la que deseas ir ejemplo contenido de la seccion tambien se lo puedes agregar a un parrafo, a un encabezado, a cualquier elemento html, luego haces lo siguiente con el enlace

      ir a la seccion de deportes

      el simbolo “#” es el que le dice al enlace que se desplace a un elemento con el identificador que sigue despues de él, en este ejemplo seria el elemento con identificador deportes

  • guiller

    buenas tengo una consulta, porque al crear la de menú me queda el texto a un lado de la misma barra como lo puedo solucionar.
    gracias

  • patricio

    coomo se pone CONTENIDO en alguna categoría ?

  • Santiago Herrera Tafur

    http://www.hotelcapital.com.co/ como se hace el menu del link, el menu de abajo que se despliega al bajar ?

  • cubi

    Como añado otra columna?
    Gracias

  • Eddy Ruben Juarez Castañaza

    Como puedo hacer para que el mismo menú este disponible para todas las paginas, asi que si yo modifico el archivo de menú este se vea reflejado en todas las paginas.

    • Pedro Cuenca Serrat

      Eddy abre un archivo con extension .php y pones todos los codigos del header y luego pon esto dentro del html, acuerdate de poner la pagina web en extension php
      esto lo pones donde va el menu y asi lo tienes en todas las paginas

      • Eddy Ruben Juarez Castañaza

        Muchas gracias ya lo realice funciono perfecto.

  • Octavio Martinez

    Hola Carlos Arturo tengo una pagina web en la que hay archivos pdf pero estos no se pueden visualizar en dispositivos moviles, mucho agredecere me puedas ayudar. gracias
    (el problema solo es en estos dispositivos)

  • roberto fernandez

    pregunta si quiero poner para q el menu despegabre al selecsionar una de las opsione me mande a otra pagina como ago por que pongo lo que medeja cambiar de pajina pero me aparese debajo del menu no tiene chiste como lo ago

  • Matias Guerra

    Saludos falconmasters, desde San juan Argentina. Desde ya muchas gracias por tus aportes , me ha servido muchísimo.
    es esta oportunidad queria consultarte como hacer mi propia tools bar. en la parte inferior de mi web en lo posible en boostrap!!!! :) . Salu2

  • DanielMaximoff23

    como le hago para agregar contenido a un enlace del menu??

  • – L i x i t –

    nop no me sale nada de css en crhome.. solo si pego el cod y lo copio xD, lo hice como el video y solo corrio html..

    • David Martínez Casado

      Asegurate de que el archivo css esté bien escrito.

  • Johan Vasquez

    Hola Falcon Gusto en saludarte , y muchas gracias por tus tutos en Youtube , me han ayudado mucho ,, tengo este problema , me podrias ayudar o aconcejar

  • Turpin

    Hola Falcon, muchísimas gracias por el tutorial, es justo lo que estaba buscando y he conseguido crear el menú sin problemas. Pero no puedo insertarlo en mi web, me falta el código head y no lo encuentro por ningún lado. Disculpa si la pregunta es demasiado obvia, muchas gracias.

  • Luis Terrón

    Hola que tal :D
    Tengo una pagina en desarrollo donde despues de poner el menu desplegable ya no aceptaba un archivo de estilos.css, ayuda :(

    • David Martínez Casado

      Prueba a quitar el link rel=”stylesheet” y todo eso y en el head pon el documento de abajo:

      * {
      margin:0px;
      padding:0px;
      }

      #header {
      margin:auto;
      width:500px;
      font-family:Arial, Helvetica, sans-serif;
      }

      ul, ol {
      list-style:none;
      }

      .nav {
      width:500px; /*Le establecemos un ancho*/
      margin:0 auto; /*Centramos automaticamente*/
      }

      .nav > li {
      float:left;
      }

      .nav li a {
      background-color:#000;
      color:#fff;
      text-decoration:none;
      padding:10px 12px;
      display:block;
      }

      .nav li a:hover {
      background-color:#434343;
      }

      .nav li ul {
      display:none;
      position:absolute;
      min-width:140px;
      }

      .nav li:hover > ul {
      display:block;
      }

      .nav li ul li {
      position:relative;
      }

      .nav li ul li ul {
      right:-140px;
      top:0px;
      }

  • Juan Carlos

    Hola, buenas noches!! felicidades por las aportaciones que haces, te sigo tambien en Udemy, gracias por los cursos que pones a disposición de nosotros.

    Una duda tengo con este menú, y es que en pantallas Touch como tablet´s o dispositivos móviles no funciona muy bien el menú, ¿hay alguna etiqueta que le pueda agregar para que se pueda desplegar en estos dispositivos?

    Gracias nuevamente.

  • Sebastián

    Como hacer ese tipo de menú desplegable en adobe reflow???

  • Alan

    Hola amigo, como podría hacer un menú que al darle clic a una primera opción se despliegue solo esa acción, pero al darle clic a otra opción, la anterior se esconda y así.

  • Ernesto YT

    Muy Buen video


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso