Código fuente Ya.

Puede ejecutar la o las páginas para probar el concepto inmediatamente.

 

Concepto:Menú horizontal con CSS

El concepto trata sobre:html,css
Autor:

Retornar

Nombre del archivo:pagina1.html

Comentarios
Importamos el archivo con la definición de estilos:
<link rel="StyleSheet" href="estilos.css" type="text/css">

El bloque de la cabecera definimos la sección para el título:
  <div id="cabecera"> 
    <div id="titulo"> 
      <h1>Cabecera del sitio</h1>
    </div>
y la sección para el menú horizonal (el menú lo representamos mediante una lista no ordenada (ul), cada
list item representa una opción del menú):
    <div> 
      <ul id="barrahorizontal">
        <li><a href="#">Opción 1</a></li>
        <li><a href="#">Opción 2</a></li>
        <li><a href="#">Opción 3</a></li>
        <li><a href="#">Opción 4</a></li>
        <li><a href="#">Opción 5</a></li>
        <li><a href="#">Opción 6</a></li>
      </ul>
    </div>
Nombre del archivo:estilos.css

Comentarios
Desactivamos márgenes y padding para todos los elementos de la página:
* {
  margin:0;
  padding:0;
}

Definimos el color de fondo de la página:
body {
  min-width: 680px;
  background: #999; 
  padding:10px;
}

Definimos el color de fondo de la cabecera:
#cabecera {
  background: #eee;
}

Definimos el alto del título:
#titulo {
  height:70px;
}

Ahora comienza lo relativo al menú:
Definimos que la lista no tendrá los círculos de referencia, su color de fondo, ancho y hacia donde
debe flotar:
ul#barrahorizontal {
  list-style-type: none;
  background: #036;
  float: left;
  width: 100%;
}

Indicamos que cada elemento de la lista se muestre en la misma línea:
ul#barrahorizontal li {
  display: inline;
}

Definimos las propiedades para los enlaces, indicando que se muestren en block para que toda la región 
que ocupa sea posible hacer clic, con el valor 'none' en text-decoration hacemos que no se vea el subrayado
sobre el enlace, definimos un borde a derecha de color blanco sólido para separar las opciones:
ul#barrahorizontal a {
  display: block;
  float: left;
  padding: 4px 18px;
  text-decoration: none;
  color: #fff;
  background: #036;
  border-right: 1px solid #fff;
}

Por último cuando pasamos la flecha del mouse sobre la opción indicamos otro color de texto y fondo:
ul#barrahorizontal a:hover {
  color: #000;
  background: #69C;
}

Retornar



Código Fuente Ya - 2015