<Código-Web>
Elementos HTML
y Reglas CSS

  1. TEXTOS
  2. ENLACES
  3. LISTAS
  4. IMÁGENES
  5. TABLAS
  6. FORMULARIOS
  7. MAQUETACIÓN

LISTAS > Menú

 

Existen muchas formas de crear un menú tanto horizontal como vertical. Una de las más sencillas es utilizar "listas desordenadas" y algunas "reglas CSS".

Vamos a ver como crear estos dos menús:

*

Código HTML: Menú Horizontal

<div class="mH">			<!-- caja: navegación horizontal -->
<ul class="menu">
<li><a class="activo" href="#">Uno</a></li>
<li><a href="#">Dos mediano</a></li>
<li><a href="#">Tres más largo</a></li>
</ul>
</div>
<br class="limpiar" />

Código HTML: Menú Vertical

<div id="lateral">		<!-- caja: lateral -->
<div class="mV"> <!-- caja: navegación vertical -->
<ul class="menu">
<li><a href="#">Uno</a></li>
<li><a class="activo" href="#" href="#">Dos mediano</a></li>
<li><a href="#">Tres más largo</a></li>
</ul>
</div>
</div>

Reglas CSS generales para los dos tipos de Menú:

.menu {
list-style: none; /* Elimina decoración de listas */
float: left;
font-size: 1.1em;
}
.menu li a:link, .menu li a:visited {
text-decoration: none; /* Elimina decoración de links */
display: block; /* Convierte toda la línea en link */
color: #000000; /* Color de letra del ítem */
padding: 2px 10px; /* Relleno de items de menu */
}
.menu li a.activo {
color: #ffffff; /* Color de letra del ítem activo */
background: #93A283; /* Color de fondo del ítem activo */
}
.menu li a:hover {
color: #ffffff; /* Color de letra al pasar el cursor */
background: #75846f; /* Color de fondo al pasar el cursor */
box-shadow: 0px 3px 3px #111111;
}

Reglas CSS específicas para el Menu Vertical:

.mV {						/* Contenedor del menú vertical */
margin: 0 0 0 10px;
}
.mV li {
margin: 4px 0; /* Separa ítems verticalmente */
background: #dee2dd; /* Fondo ítems */
}

Reglas CSS específicas para el Menu Horizontal:

.mH {               			    	/* Contenedor del menú horizontal */
float: right; /* Posición del menú horizontal */
margin: 8px 10px;
}
.mH li {
float: left; /* Crea menú horizontal */
margin: 0 2px; /* Separa ítems horizontalmente*/
background: #dee2dd; /* Fondo ítems */
}

Aquí puedes ver el ejemplo funcionando...

Y este es el código HTML y CSS completo del ejemplo.


Menú de 2º nivel

Y para crear un Menú básico de 2º nivel horizontal con CSS podemos utilizar esta técnica:

Código CSS

#nav ul {
list-style: none;
margin: 0 0 0 10px;
}
#nav a {
color: #000000;
text-decoration: none;
font-size: 1em;
}
#nav li li a {
display: block;
color: #669;
padding: 4px;
}
#nav li li a:hover {
padding: 4px;
background: #a9a9a9;
color: #ffffff;
}
#nav li {
float: left;
position: relative;
width: 8em;
text-align: center;
background: #a9a9a9;
}
#nav li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-size: 0.9em;
}
#nav li>ul {
top: auto;
left: auto;
}
#nav li li {
display: block;
float: none;
background-color: #f1f1f1;
border-bottom: 1px solid #999;
}
#nav li:hover ul{
display: block;
}

Código HTML


<div id="nav">
  <ul>

    <li>
      <div><a href="">PRIMERO</a></div>
        <ul>
          <li><a href="#">Ítem 1.1</a></li>
          <li><a href="#">Ítem 1.2</a></li>
          <li><a href="#">Ítem 1.3</a></li>
          <li><a href="#">Ítem 1.4</a></li>
        </ul>
    </li>

    <li>
      <div><a href="">SEGUNDO</a></div>
        <ul>
          <li><a href="#">Ítem 2.1</a></li>
          <li><a href="#">Ítem 2.2</a></li>
        </ul>
    </li>

    <li>
      <div><a href="#">TERCERO</a></div>
        <ul>
          <li><a href="#">Ítem 3.1</a></li>
          <li><a href="#">Ítem 3.2</a></li>
          <li><a href="#">Ítem 3.3</a></li>
        </ul>
    </li>

  </ul>
</div>

Y vemos esto en el navegador:

*

 

 

 

 

 

 

 


- (cc) 2012, 3con14 -