En fín: que he probado en otro blog "limpio" de scripts y, aunque me descuadra el fondo lateral, bien vale para la prueba, porque funcionar, funciona muy bien (y los que estén acostumbrados a pasear por este blog, ya han visto esa plantilla millones de veces, como para saber cómo es originariamente, sin la barra de menú)-
Bien: aún no he dicho de qué estoy hablando, pero... echad un vistazo a mi susodicha prueba y pasad el ratón sobre la barra que véis en la cabecera (aunque, probablemente, no haga falta, porque baja rápida como un tiro, je). También podéis ir a la página de este query dock, en la que encontraréis la demo y los scripts e imágenes que habréis de bajaros.
Esta es la estructura:
.- CSS:
<style>
body {
margin:0;
padding:0
}
#slidedown_top {
height: 70px;
background-color:#fff;
}
#slidedown_bottom {
position: absolute;
width: 100%;
height:100%;
background-color:#afafa;
}
#slidedown_content {
position: absolute;
width: 100%;
height: 250px;
top: -205px;
text-align:center;
background:url(http://.../bg.gif) repeat-x 0 bottom;
z-index:999;
}
#slidedown_content .content {
margin:0 auto;
width:830px;
height:205px;
}
/* Styles for content */
#slidedown_content .content .block {
float:left;
width:250px;
padding:0 4px 0 4px;
margin: 0 4px 0 4px;
text-align:left;
font-family:georgia;
font-size:11px;
color:#ccc;
}
#slidedown_content .footer {
height:40px;
}
#slidedown_content .content li {
padding:0;
margin:4px 0
}
.clear {clear:both}
</style>
Aquí cambiad, como siempre, si os apetece o viene mejor, los anchos, altos, colores, fuentes, etc...
.- SCRIPTS:
<script src='http://.../jquery1.3.1.min.js' type='text/javascript'/>
<script src='http://.../jquery.easing.1.3.js' type='text/javascript'/>
<script>
$(document).ready(function() {
var top = '-' + $('#slidedown_content .content').css('height');
var easing = 'easeOutBounce';
$('#slidedown_top').mouseover(function() {
$('#slidedown_content').animate({'top' : 0}, {queue:false, duration:1000, easing: easing});
});
$('#slidedown_bottom').mouseover(function() {
$('#slidedown_content').animate({'top' : top}, {queue:false, duration:500, easing: easing});
});
});
</script>
Aquí podéis cambiar el efecto OutBounce por el que más os guste, además de ajustar, por ejemplo, su duración.
.- HTML: Como la barra va anclada a la parte más alta de vuestro blog, habréis de colocarla inmediatamente detrás del cuerpo de vuestra plantilla, como en mi demo:
<body>
<div id='slidedown_top'/> <!-- slidedown_top -->
<div id='slidedown_content'>
<div class='content'>
<div class='block'>
<img src='http://.../eGO.png'/><br/>
<b:section class='footlinks' id='Yo' preferred='yes'>
<b:widget id='Profile2' locked='false' title='Ego' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == "true"'> <!-- team blog profile -->
<ul>
<b:loop values='data:authors' var='i'>
<li><a expr:href='data:i.userUrl'><data:i.display-name/></a></li>
</b:loop>
</ul>
<b:else/> <!-- normal blog profile -->
<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>
<dl class='profile-datablock'>
<dt class='profile-data'><data:displayname/></dt>
<b:if cond='data:showlocation == "true"'>
<dd class='profile-data'><data:location/></dd>
</b:if>
<b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
</dl>
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='block'>
<img src='http://.../Twitter.png'/><br/><ul id='twitter_update_list'/>
<a href='http://twitter.com/Junio' id='twitter-link' style='display:block;text-align:right;'>entrada aquí:</a>
<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>
<script src='http://twitter.com/statuses/user_timeline/Junio.json?callback=twitterCallback2&count=2' type='text/javascript'/>
<br/>
</div>
<div class='block'>
<img src='http://.../Mas.png'/><br/>
<ul>
<li><a href='http://cafe-junio.blogspot.com/search/label/Ajax'>Ajax</a></li>
<li><a href='http://cafe-junio.blogspot.com/search/label/query'>Query</a></li>
<li><a href='http://cafe-junio.blogspot.com/search/label/Mootools'>Mootools</a></li>
<li><a href='http://cafe-junio.blogspot.com/search/label/CSS'>CSS</a></li>
<li><a href='http://cafe-junio.blogspot.com/search/label/Apophysis'>Apophysis</a></li>
<li>... y más en <a href='http://accesoconetiquetasaepilogo.blogspot.com/'>Entradas * etiqueta</a></li>
</ul>
</div>
<div class='clear'/>
</div> <!-- content -->
<div class='footer'>
</div> <!-- footer -->
</div> <!-- slidedown_content -->
<div id='slidedown_bottom'>
Acordaros de que ahora tenéis que cerrar el div último, que habrá de ir justo antes del cierre del cuerpo de vuestra plantilla, así:
</div>
</body>
¡¡OJO!!: Este HTML es orientativo, para que os deis cuenta de por dónde tiene que ir, pero no es "dogma", entre otras cosas, porque HTML-Blogger se "enfada" si no encerramos todos los widgets en una sección.
Y esto es todo... como siempre, ojo donde colocáis los scripts, porque a veces no funcionan si han de tener preferencia a otros que tengáis en la plantilla: si los colocáis detrás, no funcionarán. Luego es mejor, antes de desechar nada, cambiar el orden de los scripts. Por otra parte, otras veces no funcinan porque entran en conflicto (especialmente query) con otros scripts, del tipo de prototype o Mootools... en este caso no os queda otra que acudir al "query no conflict".
✍ ¿Quieres hacer algún comentario? ✍