Los menús estilo dock
son característicos de las computadoras Mac y que son altamente
llamativos para el usuario por la forma en que aumentan de tamaño los
íconos al pasar el mouse sobre ellos.
¿No sabes de qué hablo? Mira el menú que está abajo de la cabecera de este blog de pruebas.
Está hecho con JQuery
por lo que la Lista de seguidores no se verá afectada, sólo ten en
cuenta que si tienes varios scripts para formar marquesinas el menú no
funcionará.
Luego vamos a Diseño > Edición de HTML y después de <head> pega esto:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='URL del archivo js' type='text/javascript'/>
Cambia donde se indica en color rojo la URL del archivo que subiste previamente.
Ahora antes de ]]></b:skin> pega lo siguiente:
/* Menu Dock
----------------------------------------------- */
.dock {
text-align: center;
height: 60px;
position: relative;
}
a.dockItem {
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
.dockItem img {
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.dockItem span {
display: none;
positon: absolute;
}
.dockContainter {
height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
Por último, en un elemento HTML/Javascript pega el código del menú:
<div id="dock" class="dock">
<div class="dockContainter">
<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuK4EZrOMubbMwIAnmP-xOPRMMrM1j1DB3I489XIrnjALxxo7Mn6D5p5d_SDXzUMTRgxjmcjl6o8xH5dRn9XsIhrzw6RUepX4C2ss8dPPzCollQZMEXH-h6qP6W5VstvMLaHUZYET-UKg/s1600/Icon_Home.PNG"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCOjMQ1esiVD6MAZ9Bdj4GVe17Uf6y18RCVSPbOYTfKA4DvouO84260-BzWmcvlVIpQo6IA6EfKTkv_SihDKgQvcwvKN7MUqe8l3pmaC_gfZRumRSvtdJg1Ecf8N2JWnb931sFPgEInmA/s1600/Icon_Rss.PNG"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpFc6LCri-aBPhTWDXV0C9eHJjMc5hF6TitZwQAMw96XdRpnGGj35QRL8FK9W9DDa7iL6yZcoCCCHN8vwTJCU2AkTU2Ywt_W_s6N96f5ktilSLRZTK-kH-6om8auh76XnyopuUVKpl7gs/s1600/Icon_Twitter.PNG"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghiBecoZHgprden-V7d0_Dyu0gQ7N1oASv-VxFP-vl23LbzTBQ0Mcr4n5s6v5vo7wIiXNy4UjEXF6Oqq6D72wFepjQagYwXjlzeTLT-tQaPOgniJzuLRTvQ5FN5kkYiYyRNhhbnD3jaZ0/s1600/Icon_Facebook.PNG"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWgW1ToSFpcBSCQSq59PoZUmoklaqwusqNrUfd2p6Axx8_cunGxvDVt1A1hyphenhyphenqEoBqKN3s7B9KRV60N2La0vypcMvHmWD-oaVpcVQYWXqHchRS5CQX00fDcTdMUzS8ivmTr6W43YPc7QDQ/s1600/Icon_Picasa.PNG"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcbClsz9nDbMPB9KhWlUFsmMSWjb6mSlcRAXrVCq7srkx0mB4K7NdI0sCDgYqV1YtjUK226q6alTDFG5WN9CHDEjQ5N2bQV4u4y7Z8abRRxmWmY3QIeX_6RB_VAI9cuaVQWqSmxTpRBAE/s1600/Icon_Mail.png"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5gxYF1KHCVIAyE6lAS7-BddFGbguxwNcltDh0_mHsQ-n15MFb8Rxi9zvwqdbByJ7quYetuvVaj6tpCWWe7l3lby4mx9Mo9WX9pPtDne1f_hdOhOyRbPhEJgjrYZlaL8m8KcvfG5AwIlM/s1600/Icon_Help.png"/><span>Título del enlace</span></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Dock(
{
maxWidth: 90,
items: 'a',
itemsText: 'span',
container: '.dockContainter',
itemWidth: 60,
proximity: 70,
halign : 'center'
}
)
}
);
</script>
Cambia las URL del enlace donde se indica, así como los títulos de cada enlace.
El menú lo hice para 6 íconos pero puedes agregar más si lo deseas, sólo agrega una línea como esta:
<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5gxYF1KHCVIAyE6lAS7-BddFGbguxwNcltDh0_mHsQ-n15MFb8Rxi9zvwqdbByJ7quYetuvVaj6tpCWWe7l3lby4mx9Mo9WX9pPtDne1f_hdOhOyRbPhEJgjrYZlaL8m8KcvfG5AwIlM/s1600/Icon_Help.png"/><span>Título del enlace</span></a>
maxWidth: 90, es el tamaño del ícono cuando el cursor pasa sobre él.
itemWidth: 60, es el tamaño del ícono en estado normal.
Ambos los puedes cambiar por el valor que quieras. Si quieres cambiar los íconos sólo remplaza las URL de las imágenes por las tuyas.
Una vez que hayas colocado el menú en el elemento HTML/Javascript puedes colocarlo debajo de la cabecera para que luzca mejor.
Ver también | Parte 2
No hay comentarios:
Publicar un comentario