Hay muchas formas de añadir navegación a tu sitio: Mediante pestañas, barras, menús, menús desplegables… En esta entrada explicaremos cómo crear un menú desplegable utilizando CSS3 y sus propiedades (Al ser CSS3 no será válido por los estándares).
HTML
Su estructura HTML sería así:
<div id="menubar"> <ul id="navmenu"> <li><a href="javascript:void()" target="_self">The site</a> <ul> <li class="start"><a href="#" target="_self">About</a></li> <li class="expand"><a href="#" target="_self">My account</a> <ul> <li class="start"><a href="#" target="_self">Profile</a></li> <li><a href="#" target="_self">Change password</a></li> <li><a href="#" target="_self">Change avatar</a></li> <li><a href="#" target="_self">My submissions</a></li> <li class="end"><a href="#" target="_self">My awards</a></li> </ul> </li> <li><a href="#" target="_self">Lorem</a></li> <li class="end"><a href="#" target="_self">Ipsum</a></li> </ul> </li> <li><a href="javascript:void()" target="_self">Articles</a></li> <li><a href="javascript:void()" target="_self">Interviews</a></li> <li><a href="javascript:void()" target="_self">Partners</a></li> </ul> </div>
El menú hará un float en el top del documento, aunque los usuarios hagan scroll, el menú seguirá visualizándose. (Después mostraremos el ejemplo).
CSS
Ahora vamos a aplicar el código CSS para el primer nivel de expansión del menú. Se aplica la propiedad webkit box shadow para aplicar sombra al menú (Solo válido para Safari aunque probablemente será compatible en las versiones siguientes de los demás navegadores). La propiedad border-radius aplica bordes redondeados al menú, complementándose con la sombra. La última línea del código siguiente hará que el fondo de menubar top sea invisible:
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 250px;
list-style: none;
display: none;
position: absolute;
top: 25px;
left: 0;
-webkit-box-shadow: 10px 10px 10px #CCCCCC;
-webkit-border-radius: 5px;
}
ul#navmenu ul li {
float: none; /*For Gecko*/
display: block !important;
display: inline; /*For IE*/
background-image:none;
}
El estilo para la barra principal del menú sería esta:
ul#navmenu a {
padding: 0 10px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
color:#000000;
line-height:25px;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
text-align:center;
}
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
border-right-color: #CCC;
border-bottom-color: #CCC;
color: #FFFFFF;
background-image:url('images/menubar_hover.jpg');
}
El primer menú que se expande tendrá la flecha colocada a la derecha (es decir, se puede expandir en más enlaces). Tendrá bordes redondeados en la parte de abajo, por lo tanto aplicaremos -moz-border-radius-bottomleft y -webkit-border-bottom-left-radius.
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
line-height:25px;
width:230px;
text-align:left;
color: #000000;
background-image:none;
background-color:#FFF;
border-bottom:none;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
color: #FFF;
background-image:url('images/menu_ex_hover_bg.jpg');
background-repeat:repeat-x;
border-bottom:none;
}
ul#navmenu ul li
{
width:250px;
padding:0px;
background-color:#FFF;
border: 1px solid #999999;
border-top:none;
border-bottom:none;
}
ul#navmenu ul li.start
{
background-color:#FFF;
border: 1px solid #999999;
border-top:none;
border-bottom:none;
padding-top:5px;
}
ul#navmenu ul li.end
{
-moz-border-radius-bottomleft:7px;
-webkit-border-bottom-left-radius:7px;
-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;
padding-bottom:5px;
background-color:#FFF;
border: 1px solid #999999;
border-top:none;
}
El estilo del segundo nivel de expansión del menú cuenta con una nueva imagen de fondo cuando pasamos el ratón por encima. En .start, empezamos aplicando borde redondeado arriba (top) a la derecha, mientras que en .end, aplicamos borde redondeado abajo (bottom), en ambos lados, a la izquierda y a la derecha.
Con esto ya habríamos terminado el diseño del menú, pero…
Un poco de Javascript
Aunque en este blog se considera muy mal hablar de lenguajes que no sea CSS (deseamos tener un tema único del que hablar) a veces no queda más remedio que usarlo para que nos eche una mano, ya que sin javascript no podemos hacer que el menú funcione correctamente en IE:
navHover = function() {
var lis = document.getElementById("navmenu").getElementsByTagName("LI");
for (var i=0; i < lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=" iehover";
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);
Fixes en IE 6
Desafortunadamente, IE 6 no interpreta el float arriba como nosotros quisiéramos, entonces el menú no nos acompaña cuando hacemos scroll. Para solucionar esto hay que aplicar un pequeño parche en javascript:
function move_box()
{
var offset = 0;
var element = document.getElementById('menubar');
element.style.top = (document.documentElement.scrollTop + offset) + 'px';
}
Debes editar el HTML de tu sitio e insertar el código expuesto anteriormente en el body, con sus correspondientes tags <script type=”text/javascript”>el código</script>.
Después debemos aplicar comentarios condicionales para definir el código anterior, además de modificar un poco el CSS, alterando la posición de fixed a absolute (recordamos, esto solo afectará a IE 6):
<!--[if lt IE 7]>
<style type="text/css">
#menubar {
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script type="text/javascript">
window.setInterval(move_box, 1);
</script>
<![endif]-->
¿Y las imágenes?
En la entrada hemos incluido varios elementos gráficos e imágenes. Si deseáis incluirlas por defecto en vuestro menú, podéis hacerlo si descargáis el código fuente del menú al completo (las imágenes se encuentran en la carpeta “images”). Descargar el código fuente del menú en .zip.
Y de postre, un ejemplo
Finalmente os ofrecemos un ejemplo de su funcionamiento (podéis comprobar lo avanzado que es CSS3, sobre todo si usáis Safari, ya que veréis bordes redondeados y sombras sin usar ninguna imagen para dicho proceso): Ver el ejemplo. (Gracias a Freelancermagazine).
¿Válido con los estándares?
XHTML 1.0 transitional válido.
CSS 2.1 inválido (por las propiedades CSS3 no admitidas aún).
¿Qué os parece?
Vía | Freelancermagazine
