Hay sitios que se hace dificil escoger un menú acorde con el diseño y otros donde dependiendo del menú le puede dar un aspecto recargado, sin embargo un menú con los enlaces más básicos es en mi opinión imprescindible y no hay que renunciar a tenerlo.
El menú que ofrecen en
Webber 2.0 permanece oculto hasta que pasamos el cursor sobre la zona de la cabecera del blog.
Para que el menú haga la función de subir-bajar es necesario un script que podemos descargar desde
aquí o la
página del autor.
Una vez lo tenemos descargado y alojado en nuestro servidor lo añadimos en la plantilla justo antes de
</head><script src='url-archivo-hide_menu-144c3a4.js' type='text/javascript'/>
Donde
url-archivo-hide_menu-144c3a4.js lo sustituimos por la url de nuestro archivo alojado.
Sin necesidad de expandir la plantilla buscamos
<div id='outer-wrapper'><div id='wrap2'>
justo después añadimos:
<div id='hit_area' onmouseover='toggleDown();'/>
<div id='menu_holder'>
<div id='nav'>
<ul>
<li><a href='url-enlace'>Texto a mostrar</a></li>
<li><a href='url-enlace'>Texto a mostrar</a></li>
<li><a href='url-enlace'>Texto a mostrar</a></li>
<li><a href='url-enlace'>Texto a mostrar</a></li>
<li><a href='url-enlace'>Texto a mostrar</a></li>
</ul>
</div>
</div>
<div id='hit_area2' onmouseover='toggleUp();'>
(La configuración del menú la dejaremos para el final)
Un poco más abajo veremos el bloque que contiene la cabecera del blog más o menos así:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='título blog (cabecera)' type='Header'/>
</b:section>
</div>
</div>
y añadiremos justo después
</div>
Lo que hicimos fue añadir en outer-wrapper los eventos onmouseover para llamar a las funciones de deslizar el menú de arriba o abajo. Y cerramos con el último </div> después de header-wrapper para que el efecto se produzca al pasar el ratón por cualquier zona del bloque de la cabecera.
Por último añadimos los estilos al menú, buscamos
]]></b:skin> y justo antes añadimos:
#menu_holder {
height: 58px;
width: 100%;
display: block;
position: absolute;
top: -58px;
}
#nav {
height: 58px;
width: 542px;
margin: 0px auto;margin-left:190px;
padding: 0px;
background-image: url(url-imagen-right.png);
background-repeat: no-repeat;
background-position: right;
}
#hit_area {
height: 120px;
width: 100%;
margin: 0px;
padding: 0px;
display: block;
background-repeat: no-repeat;
}
#hit_area2 {
width: 100%;
background-repeat: no-repeat;
background-position: center top;
padding: 0px;
display: block;
position: absolute;
margin: 0px;
left: 0px;
top: 120px;
}
#nav ul {
margin: 0px;
padding: 0px 0px 0px 21px;
height: 58px;
list-style-type: none;
background-image: url(url-imagen-left.png);
background-repeat: no-repeat;
}
#nav li{
margin: 0px;
padding: 0px;
float: left;
}
#nav li a:link, #nav li a:active, #nav li a:visited {
background-image: url(url-imagen-middle.png);
background-repeat: repeat-x;
height: 58px;
width: 100px;
display: block;
line-height: 58px;
text-decoration: none;
text-align: center;
font-size: 140%;
font-family: Arial, Helvetica, sans-serif;
text-shadow: #000 0px 1px 2px;
font-variant:normal;
font-weight:bold;
color:#ffffff;
}
#nav li a:focus, #nav li a:hover{
text-decoration : none;
-moz-outline:0;
color:#B0E0F0;
background-image: url(url-imagen-rollOver.png);
background-repeat: repeat;
}
Como podemos ver en rojo están marcadas las imágenes que contiene el menú que son las siguientes:
Imagen
left
Imagen
right
Imagen
middle
Imagen
rollOver
Podemos poner el cursor sobre la imagen y guardarla en nuestro PC, luego la subimos a cualquier servidor ( el álbum de Picasa por ejemplo) y añadimos la url de las imágenes en los estilos cuidando que el nombre de cada imagen coincida con el sitio correspondiente.
Por último configuramos el menú, donde dice url-enlace lo sustituimos por la url del enlace. En Texto a mostrar es el texto que vemos y hace enlace con la página que enlazamos.
Para enlazar una página en concreto o el correo ver
esta entrada.
El
ejemplo del menú funcionando.
No hay comentarios:
Publicar un comentario