Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home CSS

Cómo hacer un menú horizontal con CSS

27 enero, 2011
en CSS
0
Reglas CSS por defecto para los navegadores

Hacer un funcional menú horizontal es más sencillo de lo que parece. Por defecto los elementos de una lista se muestran como bloques (blocks) con lo que cada item del listado ocupará una nueva línea. Simplemente cambiando el modo en que se muestran los items, tendremos una lista horizontal que podrá hacer las veces de menú. CSS:

Resumen del Contenido

  • Primero definimos nuestro menu en la hoja de estilos
  • Creamos una lista en la página
  • Aplicamos estilos a la lista

Primero definimos nuestro menu en la hoja de estilos

Con esto conseguimos que nos muestre todo como una linea, por lo general las listas son verticales y con esto coseguimos que sea horizontal

#menuhorizontal ul li {
 display: inline;
}

Creamos una lista en la página

Después creamos la lista en nuestra página, metemos toda la lista dentro de un div, el div que hemos llamado menuhorizontal

<div id="menuhorizontal">
<ul>
 <li>Botón uno</li>
 <li>Botón dos</li>
 <li>Botón tres</li>
</ul>
</div>

Aplicamos estilos a la lista

Ahora podemos aplicar estilos a la lista como el tipo de fuente, color, margenes, … , todo lo que quieras

#menuhorizontal ul li {
         display: inline;
         padding: 2px 7px; /*Separar el texto*/
         margin:5px; /* Separar los botones */
         background-color:#E4E4E4; /* Color de fondo */
 }
 #menuhorizontal ul li:hover {
         background-color:#CCCCCC; /* Color de fondo sobre el boton */
         cursor: pointer; /* cambiar el aspecto del puntero */
}
#menuhorizontal ul {
         /* Linea para delimitar la botonera */
         border-bottom-width: 1px;
         border-bottom-style: solid;
         border-bottom-color: #E4E4E4;
}
Menu Horizontal CSS
Menu Horizontal CSS
Etiquetas: menu cssmenu horizontal
ANUNCIO
Post anterior

Ajustes de imagen con Photoshop

Próximo Post

Ejemplos Photoshop: Crear un arco iris

Otros Posts

Reglas CSS por defecto para los navegadores

Selectores y propiedades más usadas en CSS3

10 febrero, 2016
1

Los selectores son lo que definen sobre qué elementos se aplican las reglas. Pueden ser una combinación de: Nombre de etiquetas HTML Nombres de clases, precedidos por carácter “.” Identificador de elemento, precedido por carácter...

Novedades con Bootstrap 3

Novedades con Bootstrap 3

28 octubre, 2013
0

Com ya sabemos, Bootstrap es una herramienta con un montón de funciones de HTML y CSS que te permitirán usar muchas de sus novedades, ya que te dará tipografía estilizada, botones, formularios, tablas, navegación, y...

Por favor logueate para comentar

Recomendados

Reglas CSS por defecto para los navegadores

CSS: Efecto cebrado en tablas y listas

20 febrero, 2011
Landing pages, páginas de aterrizaje

Landing pages, páginas de aterrizaje

7 diciembre, 2010
email marketing

Las ventajas del e-mail marketing y cómo utilizarlo de forma correcta

29 septiembre, 2020
Adobe Photoshop Lightroom

Lightroom: Ajustes preestablecidos. Módulo de Revelar

19 febrero, 2012

Tutotial Monstersse

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .