SummArg | Cursos y recursos para webmasters

21/07/2011

Menús horizontales dobles estilo magazine

No hay muchos menús de este tipo disponibles en la web y resultan bastante prácticos para un sitio con categorías y sub-categorías. Veamos una compilación de tres trabajos interesantes y al final del artículo les mostramos una pequeña variación de uno de ellos.

A Different Top Navigation

Este tutorial de nettus+ nos ofrece todas las explicaciones del caso, sus archivos fuente y un demo. Las características mas importantes del tutorial son:

  • Aprender a crear bordes redondeados aptos para cualquier navegador utilizando Spiffy
  • Animar la barra secundaria con jQuery
  • Utilizar jQuery para el estilo de la barra secundaria
  • Utilizar jQuery para insertar un botón que pueda cerrar la barra secundaria

 

Descarga | Demo

Horizontal Subnav con CSS y jQuery

En este caso desde sohtanaka nos muestran como crear una barra principal con varios elementos en una lista desordenada. Cuando un elemento con subitems entra en estado hover, se despliega una barra secundaria de manera horizontal con los subitems en cuestión. Utiliza jQuery para cambiar el color de fondo del elemento que activa la subnav y para lograr que el menú funcione en IE6.

Descargar | Demo

 

WordPress magazine style horizontal dropdown menu

Este tutorial de catswhocodes es del 2008, cuando todavía no existía la función wp_nav_menu(), pero sigue funcional. Lista las categorías en la barra principal y despliega las subcategorías en una barra inferior, con otro estilo. Es simple de lograr y requiere de copiar y pegar el código que ofrece el autor. Puede, sin embargo, requerir de ciertas modificaciones al CSS del theme al que se le añada este menú.

Descargar

 

WordPress magazine style horizontal dropdown menu (custom)

Este menú es una adaptación del anterior para un trabajo en particular. Utiliza jQuery para aplicar un efecto FadeIn a los subitems, el resto es CSS.

El HTML del menú, que puede insertarse en header.php debajo del logo, es el siguiente:
<div id="menu">
<ul id="nav2">
<li><a href="<?php echo get_option('home'); ?>/">Home</a></li>
<?php wp_list_categories('orderby=name&title_li=');
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "<ul>";
wp_list_categories('orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "</ul>";
}
?>
<li><a href="#">Un link</a>
<ul>
<li><a href="#">Un sub-link</a></li>
<li><a href="#">Un sub-link</a></li>
<li><a href="#">Un sub-link</a></li>
<li><a href="#">Un sub-link</a></li>
</ul>
</li>
</ul>
</div><!-- menu -->

Este HTML inserta los links generados automáticamente por wp_list_categories() y también deja establecido cómo insertar cada link individualmente para el caso que sea necesario. Se debe insertar el siguiente código CSS en el estilo del theme:
#nav2{
background-color: #000c7a;
display: block;
font-size:12px;
font-weight:bold;
height:24px;
width:100%;
}
#nav2, #nav2 ul {
line-height: 1;
list-style: none;
}
#nav2 li {
float: left;
list-style:none;
position:relative;
color: #fff;
}
#nav2 a,#nav2 a:visited {
color:#fff;
display:block;
font-weight:bold;
padding:6px 17px;
text-decoration:none;
}
#nav2 a:hover, #nav2 a:active {
color:#000c7a;
display:block;
font-weight:bold;
padding:6px 17px;
text-decoration:none;
background: #ececec;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#nav2 li ul {
height: auto;
display:none;
width:900px;
z-index:999;
position:absolute;
left:0;
}
#nav2 li li a,#nav2 li li a:visited {
color:#202020;
font-weight:bold;
font-size:0.9em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#nav2 li li a:hover,#nav2 li li a:active {
background:#fff;
color: #000c7a;
}
#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {
display:block;
}
#menu {
float:left;
display:block;
height:47px;
width:960px;
background-color:#ececec;
}

Antes de la etiqueta de cierre </body>, colocar:
<script type="text/javascript">
$('#nav2 li').hover(function() {
$('#nav2 li ul li').fadeIn('slow');
});
</script>

Para el caso de que necesiten insertar la librería jQuery, pueden hacerlo desde el functions.php:
function my_init_method() {
if (!is_admin()) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
}
add_action('init', 'my_init_method');

Dejar un comentario

  1. daniel

    esta increíble el tutorial pero no lo tendrás para descargarlo? el de
    WordPress magazine style horizontal dropdown menu

Dejar un comentario