Como crear un menu horizontal para una web

  • Añadir Comentarios Da una respuesta
  • Votos Votos útiles (0) inútiles (0)
Wiki: Los usuarios registrados de DesarrolloWeb.com pueden modificar los contenidos y realizar aportaciones en esta sección.
  • Dar una respuesta

Discusión creada por lester288 el 23/06/2010

Categoría wiki: Diseño web

Estoy diseñando una página web en html y necesito diseñar un menù horizontal desplegable con cuatro opciones diferentes: nicio,sobre el sitio,servicios y herramientas.

Si alguien puede orientarme de cómo hacer el menú se lo agradecería.

Últimas respuestas enviadas

midesweb

24/06/2010
Para hacer un menú desplegable aquí en DesarrolloWeb.com tienes varios tutoriales.

En realidad los puedes hacer con algún programa como Sothink http://www.desarrolloweb.com/articulos/839.php

O con la ayuda de algún framework como jQuery o Mootools.

El menú de DesarrolloWeb.com lo hemos hecho con Mootools y estoy diseñando un menú parecido en jQuery, así que en las próximas semanas publicaré como se hace.

Si buscas en el buscador interno de este sitio por las palabras

menu desplegable javascript

Encontrarás decenas de referencias.

dante1931

26/06/2010
Hola, no se puede hacer sin javascript?

Lucho

30/06/2010
en esta dirección los tienes de todos los tipos con CSS

http://www.cssplay.co.uk/menus/

Este enlace vale millones, aprovechalo.

Chechu

30/06/2010
Hay una forma bastante sencilla de hacer y es aplicando estilos CSS a los eleemntos del menú.
Créate el menú en una lista y dentro de cada lista, metes el submenú. Luego le aplicas los estilos que desees utilizando los bordes, rellenos, fondos y colores. Por último utiliza la propiedad display:none y display:block para mostrar el submenú y la subclase :hover para que los elementos del menú principal se comporten a modo de botón cuando pases con el ratón y hagas un click sobre ellos.

josecarlosfilhovelasco

30/06/2010
este codigo te crea un menu desplegable 100% CSS pero no te aseguro que funcione en el navegador internet explorer copia este codigo y tendras un menu desplegable


<style type="text/css">

.contenedor{float: left; margin-left: 2px;}
.elemento_menu{width: 100px;background: #FED8D5;border: solid #E89492 1px;float: left; font-size: 12px;color: white;text-align: center;}
.contiene_submenu{ color: black; width: 100px; display: none; text-align: left;}
.elemento_submenu{border-top: solid #E89492 1px; padding-left: 5px;}


#menu1:hover #submenu1{display: block;}/*muestra sub menu 1*/
#menu2:hover #submenu2{display: block;}/*muestra sub menu 2*/
#menu3:hover #submenu3{display: block;}/*muestra sub menu 3*/



</style>
<div class="contenedor_principal">

<div id="menu1" class="elemento_menu">
Menu 1
<div id="submenu1" class="contiene_submenu">
<div class="elemento_submenu">subMenu1</div>
<div class="elemento_submenu">subMenu2</div>
<div class="elemento_submenu">subMenu3</div>
<div class="elemento_submenu">subMenu4</div>
<div class="elemento_submenu">subMenu5</div>
</div>
</div>
<div id="menu2" class="elemento_menu">
Menu 2
<div id="submenu2" class="contiene_submenu">
<div class="elemento_submenu">subMenu1</div>
<div class="elemento_submenu">subMenu2</div>
<div class="elemento_submenu">subMenu3</div>
<div class="elemento_submenu">subMenu4</div>
<div class="elemento_submenu">subMenu5</div>
</div>
</div>
<div id="menu3" class="elemento_menu">
Menu 3
<div id="submenu3" class="contiene_submenu">
<div class="elemento_submenu">subMenu1</div>
<div class="elemento_submenu">subMenu2</div>
<div class="elemento_submenu">subMenu3</div>
<div class="elemento_submenu">subMenu4</div>
<div class="elemento_submenu">subMenu5</div>
</div>
</div>

</div>