Software

CSS Dock Menu: un plugin para WordPress que permite disponer de un menú tipo Dock

Dock Menu CSS

He visto que muchos foros incorporan este tipo de menú y me parece un diseño excelente, incluso para aquellos que son grandes fans de los Mac. CSS dock menu es un plugin para wordpress que emplea la librería  Jquery y el componente Fisheye.

El plugin es perfecto para añadirlo a un blog y darle elegancia, así que trataré de explicar el modo de implementarlo.

  1. Descargar el plugin código fuente al final de esta entrada.
  2. Instalamos el plugin código siguiendo los pasos detallados más abajo.

Añadimos el siguiente código al fichero footer.php (Nota: el autor del plugin recomienda incrustar dicho código en la cabecera, justo después de la etiqueta <head>, pero si lo añadiéramos en esa zona, lo que hacemos es ralentizar la carga de nuestro blog, así que mejor ubicar el script en el footer.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>

Las dos primeras líneas indican la ruta del javascript necesario para que la interfaz funcione, el párrafo siguiente es el CSS correspondiente al menú. Si no quieres tener el código CSS mezclado con el de tu blog puedes copiar y pegar la siguiente línea dentro de tu fichero style.css del tema que dispongas.

.dock img { behavior: url(iepngfix.htc) }

Para que podamos verlo en funcionamiento, debemos copiar y pegar el siguiente código, dentro de la etiqueta <body>, normalmente y dependiendo del tema que tengas en tu blog, la encontrarás en el fichero header.php

<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>

Ahora solo nos falta añadir los iconos correspondientes a la barra y para ello, sabiendo que tenemos dos barras de menú, la superior y la inferior, debemos añadir el siguiente código según donde queramos añadir los iconos, asimismo recuerdo no modificar la etiqueta <span>.

Iconos en la barra superior.

<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>

Iconos en la barra inferior.

<a class="dock-item2" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>

Si quieres que la barra tenga fondo transparente, debemos editar el fichero style.css que incorpora el plugin (¡ojo! no el de nuestro tema de wordpresss).

Localizamos la línea background : #ffffff url(images/main-bg.gif); y la cambiamos por background-color : transparent;

[dm]89[/dm]

[Vía: ndesign-studio]

8 Comentarios

  • @juancamorillo: tienes razón juancamorillo, ha sido un erro mío que acabo de subsanar, es el código y para implementarlo hay que seguir los pasos detallados.

    Imagino que tendrás conocimientos previos para poder implementarlo porque hay que tocar bastante el código. No olvides de hacer copias de seguridad de tu blog antes de modificar nada.

    Un saludo y suerte.

A %d blogueros les gusta esto: