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

Menus con CSS y listas

19 abril, 2012
en CSS
0
Reglas CSS por defecto para los navegadores
Share on FacebookShare on Twitter

Hace tiempo que hablamos de los menús con CSS, hoy vamos a retomar el tema para realizar paso  a paso un menú con CSS y listas. Comenzaremos con un menú vertical y terminaremos realizando el mismo menú horizontal con CSS.

Resumen del Contenido

  • 1. Generando el código HTML necesario
  • 2. Generando estilos y colores con las CSS
  • 3. Comprobar el resultado del menú vertical
    • 4. Resumen

1. Generando el código HTML necesario

Supongo que  utilizas Dreamweaver para realizar este ejercicio, abrimos un nuevo fichero html en blanco

[singlepic id=143 w=480 h=360 float=]

Guardamos el fichero con el nombre de menu-css.html. Ahora generamos el código HMTL necesario para crear nuestro menú. Primero crearemos un <div> que llamaremos menu, tendremos el siguiente código:

<div id="menu">en esta parte irá nuestro menú</div>

El segundo paso es crear una lista dentro del div creado anteriormente teniendo fianlmente el siguiente código:

<div id="menu">
<ul>
	<li>Inicio</li>
	<li>Empresa</li>
	<li>Productos</li>
	<li>Servicios</li>
	<li>Contactar</li>
</ul>
</div>

Si comprobamos en el navegador tenemos esta imagen: [singlepic id=144 w=480 h=360 float=] Para completar el código HTML necesario tengo que crear los enlaces en cada elemento li del código anterior. Como resultado tendré:

<div id="menu">
<ul>
	<li><a href="#">Inicio</a></li>
	<li><a href="#">Empresa</a></li>
	<li><a href="#">Productos</a></li>
	<li><a href="#">Servicios</a></li>
	<li><a href="#">Contactar</a></li>
</ul>
</div>

Si comprobamos en el navegador tenemos esta imagen:

[singlepic id=150 w=480 h=360 float=]

Ahora solo nos queda dar estilos con las CSS para completar el menú

2. Generando estilos y colores con las CSS

Vamos a concrear que tipo de estilos queremos para nuestro menú: anchura del menú, colores, fondos, tamaño de fuente, tipo de fuente…

Comenzamos a generar el código necesario, lo primero es crear los estilos para div que hemos llamado menu, busco poner un borde al menú con una anchuro de 150px:


#menu {
   width: 150px; /* Ancho menú */
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 12px;
   border-top-width: 1px; /* Borde */
   border-right-width: 1px; /* Borde */
   border-bottom-width: 0; /* Sin Borde */
   border-left-width: 1px; /* Borde */
   border-top-style: solid; /* Borde sólido */
   border-right-style: solid; /* Borde sólido */
   border-bottom-style: solid; /* Borde sólido */
   border-left-style: solid; /* Borde sólido */
   border-top-color: #ACCFE8; /* Color Borde */
   border-right-color: #ACCFE8; /* Color Borde */
   border-bottom-color: #ACCFE8; /* Color Borde */
   border-left-color: #ACCFE8; /* Color Borde */
}

Si condensamos el código podemos tener: (recordar que visualmente en el navegado es lo mismo que el código de arriba, solamente es más corto)


#menu {
   border: 1px solid #ACCFE8;
   border-width: 1px 1px 0 1px;
   width: 150px;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 12px;
}

Con este código visto desde el navegador hemos conseguido la siguiente imagen:

[singlepic id=145 w=480 h=360 float=]

Vemos un cuadrado de color azul que no está dibujado del borde por la parte de abajo, ya veremos mas adelante cual es el motivo de no dibujar el borde de la parte de abajo.

El siguiente paso es dar estilo a la lista. Lo primero es quitar el puntito de la lista, quitar el circulito negro, esto lo hacemos añadiendo el siguiente código a los estilos:

#menu ul li {
   list-style-type: none;
}

Visualizamos el resultado:

[singlepic id=146 w=480 h=360 float=]

Para que todo quede bien centrado y se vea de igual forma en todos los navegadores pondremos a cero el margin y el padding de la lista añadiendo este código:


#menu ul {
   margin: 0;
   padding: 0;
}

Como resultado tendremos esta imagen:

[singlepic id=147 w=480 h=360 float=]

Pintamos los botones de forma individual. Cada elemento de la lista (cada botón) lo separamos del siguiente con una raya horizontal. Para ello utilizo el borde inferior y lo aplico a cada li de la lista. ¿Recordais que habiamos dejado sin pinta el borde inferior del div? ahora al poner un borde inferior a cada elemente li el último coinciderá con el del div y dará la sensación de estar cerrado. Añadiremos el siguiente código


#menu li {
   border-bottom: 1px solid #ACCFE8;
}

No es necesario en el código añadir el resto de bordes con valor cero, solamente pondré el que quiero modificar y como resultado tendremos esta imagen

[singlepic id=148 w=480 h=360 float=]

Para finalizar nos queda que cambie de color el fondo cuando pasamos el ratón por encima del botón y separar un poco el texto del borde. Esto lo hacemos dando los estilos al enlace, la etiqueta de enlace es la a. Añadimos el siguiente código:


#menu a {
   text-decoration: none;
   color: #3366CC; /* Color texto */
   background: #F0F7FC; /* Color Fondo */
   display: block;
   padding-top: 3px;
   padding-right: 6px;
   padding-bottom: 3px;
   padding-left: 6px;
   width: 138px; /* Ancho del botón */
}

[singlepic id=149 w=480 h=360 float=]

Aquí  recordar que la forma utilizada para que todos los botones tengan el mismo ancho he utilizado el código:

display: block; 

Y finalmente cambiamos el color al pasar con el ratón sobre el botón con el siguiente código:


#menu a:hover {
   background: #DBEBF6;
}

3. Comprobar el resultado del menú vertical

Ver resultado del menú vertical funcionando. Tabmien podemos centrar horizontalmente el menú.

Para ver el menú horizontal, y recuerda que al ver el código fuente tienes los comentarios de como se ha realizado.

4. Resumen

Código HTML dentro de la etiqueta <body></body>

<div id="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Empresa</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contactar</a></li>
</ul>
</div>

Código CSS, dentro de la etiqueta <style></style>

#menu {
width: 150px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ACCFE8;
border-right-color: #ACCFE8;
border-bottom-color: #ACCFE8;
border-left-color: #ACCFE8;
margin-right: auto;
margin-left: auto;
}
#menu ul li {
list-style-type: none;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
border-bottom: 1px solid #ACCFE8;
}
#menu a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
width: 138px;
padding-top: 3px;
padding-right: 6px;
padding-bottom: 3px;
padding-left: 6px;
}
#menu a:hover {
background: #DBEBF6;
}

Etiquetas: listasmenus
ANUNCIO
Post anterior

Formas geométricas con CSS. Primera Parte

Próximo Post

WordPress 3.3.2 (actualización de seguridad)

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...

Recomendados

Como acceder a la administración de WordPress

Chuleta para WordPress

20 febrero, 2011
Tutorial crear efecto metálico en un botón

Herramienta cuentagotas en Photoshop

21 enero, 2011
Manual diseño web: Planificación y configuración de un sitio web

Anatomía de una web «perfecta»

11 enero, 2012
Tienda online con WordPress: WooCommerce

Los mejores plugins para Woocommerce

14 marzo, 2016

Tutotial Monsters

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
  • Store
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 .