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.
- Descargar el plugin código fuente al final de esta entrada.
- 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;
@ricardoquiroz: eso significa que se llama a jquery desde ambos plugins, lo más lógico es dejar cargado un solo jquery, puedes editar el código de uno de los plugins para eliminar la función que carga jquery. Prueba con eliminarlo desde el último plugin que has instalado.
Por otro lado, puedes dejar un comentario al autor de ambos plugins para que te informen si la utilización de ambos crean conflictos.
En alguno entrada antigua he comentado algo al respecto, pero no recuerdo cual fue. Si quieres puedes echar un vistazo aquí.
Hola Como estan
Gracias por este script, te comento que lo instale yo directamente desde n.studio, y todo muy lindo hasta que instale un plugin que se llama pageflip y me deshabilito el dock menu, leyendo en internet al parecer es un problema con el jquery del wordpress, puedes ayudarme con esto?
@Tiriter: Ya está solucionado Tiriter. Gracias por tu colaboración y un saludo.
Gracias =) ojala puedas arreglarlo, este menu parece fantastico y me encantaria usarlo en mi web ^^ saludoos!
@Tiriter: Gracias por el aviso. Trataré de localizar nuevamente el enlace y lo corregiré.
Un saludo
no funciona el enlace de descarga :(
@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.
El archivo de descarga no es un plugin.
Dónde se descarga el plugin citado?
En cualquier caso, cómo se implementa en Wordpress?
Gracias de antemano.