Como Hacer Un Menú Con Submenús En HTML Y CSS ~ Historias De Una Net

Programación web, Drupal, WordPress y ¡Mucho más!
Aprende a programar y diseñar una página web gracias a los trucos y tutoriales que ofrecemos en nuestro sitio.
viernes, 12 de octubre de 2012
Confeccionar un menú con subpestañas con html y css es relativamente fácil.
Lo primero que debemos pensar es la distribución de nuestro menú, como irá estructurado tanto el diseño como las urls, una vez dibujado a papel ayuda de wordpress nuestro “mapa”, debemos empezar a pintarlo mediante html y css, para ello creamos un nuevo documento con extensióncss y pegamos lo siguiente:
ul#menu background: #333; width: 940px; float:left; padding: 5px; ul#menu li colour: #fff; float: left; list-model: none; margin: zero% 5%; ul#menu li:hover coloration: #aaa073; cursor:pointer; ul#menu ul display: none; place: absolute; top: 49px; background: #333; coloration: #fff; padding: 5px 0px 5px 5px; margin: zero; ul#menu ul li float: left; color: #fff; width:a hundred%; margin:2% 0%; ul#menu ul li a coloration: #fff; ul#menu ul li a:hover color: #aaa073; cursor:pointer; ul#menu li:hover ul ul,ul#menu li:hover ul ul ul,ul#menu li.iehover ul ul,ul#menu li.iehover ul ul ul display: none; cursor:pointer; ul#menu li:hover ul,ul#menu ul li:hover ul,ul#menu ul ul li:hover ul,ul#menu li.iehover ul,ul#menu ul li.iehover ul,ul#menu ul ul li.iehover ul display: block; cursor:pointer;
Ahora abrimos un archivo con extensiónhtml ophp y copiamos el menú que queremos insertar en nuestra página internet, en mi caso como prueba de este ejercicio realicé el siguiente:
PESTAÑA 1 PESTAÑA 2 PESTAÑA three PESTAÑA 4 SUBMENÚ 1 SUBMENÚ 2 PESTAÑA 5
El aspecto del menú tal y como está ahora mismo sería el siguiente, el diseño lógicamente es totalmente personalizable a gusto del usuario:
Gracias por el ejemplo, muy bueno.
Tengo un problema, y es que cuando lo centro con las modificaciones que le indicaste al usuario jonathan0931, efectivamente se centra, pero los submenus de la pestaña 4 no se pueden seleccionar.
gracias.
Ezequiel
Engloba el menu entre un div, es decir:..
al div xx dale un textual content-align:heart; y al div menú dejalo sin float ni margin zero auto ni nada que afecte a su alineación.
Hola Jose Manuel.
Tranquilo, si eres nuevo en este mundo no te desesperes, nadie nace sabiendo…
Descargate este archivo:
-html-con-submenus/
Es el menú ya hecho. Es un archivo que dentro de el esta echo los elementos del menu y los estilos que lo componen.
Para abrir el archivo te recomiendo que descarges el programa Notepad++.
Cualquier duda comentame
three- cierras el
Ahora cómo organizo lo siguiente..
Net con cabecera, pié, menú a la izquierda y sección de contenido a la derecha.
Lo creo sin problemas con un div contenedor y four divs más dentro.
Mi duda surge cuando al pinchar en una opción del menú voy a otro html que quiero que tenga todo igual menos la sección del contenido.
¿Debo repetir todo en el nuevo html? Sería poco práctico.
Debe haber otras formas. Seguro.
¡ Gracias !
Hola jolugaju.
Si lo que deseas es hacer es eso, entonces es hora de que empieces a estudiar PHP.
margin: 0;
Hay que quitar “high: 49px;” ya que si lo dejas tal cual el submenu se mueve 49px hacia arriba, si se quita el submenu sale donde deberia.
Saludos
Gracias por comentar.
No es que haya un error, simplemente yo he querido ponerle una separación mediante un high, freelance wordpress también se podría realizar mediante margin padding del ul respecto al menú.
ESPERO TU PRONTA RESPUESTA 😀
Hola ricardo.
Con la demo que puedes descargar en esta página si abres el veras etiquetas llamadas “li”, cada una de estas etiquetas es una pestaña y dentro de ellas no tiene que haber ninguna etiqueta “ul”.
Si tienes dudas dímelo que te haría un archivo y te lo mandaría por correo.
Hola Carlos.
¿Podrías explicarme que deseas hacer?. No entiendo a que te refieres con entradas.
Me andubo perfecto, pero tengo un problema.
Quiero que las opciones de menú que contengan un submenu, al clickearlas, el submenu quede fijo y no se vaya, para poder clickear en algunas de las opciones del submenu. Y que al volver a clickear en la pestaña de menu, el sub se esconda nuevamente.
ejemplo
-li- -a href=”” – pestaña 1 -a- -li- y le doy click encima y no me deja pasar a la pagina q pasa?
me toco colocar – por q no me deja colocar lo q realmente va
Comunicarse a uscomunicaciones@

La entrada Como Hacer Un Menú Con Submenús En HTML Y CSS ~ Historias De Una Net se publicó primero en Encargos Wordpress.