Bueno..para el tema del menu tengo esta solución, no se que taaaan efectiva es, pero con lo poco que conozco los pluggins de Jquery creo que es algo...
Bueno.. para que cuando scrolee se me quede el menu una vez que topée con el top del navegador y quede fijo hago lo siguiente...
coloco el plugin de jquery en el HEAD del html:
Código Javascript
:
Ver original<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
coloco las condicionales del pluggin... veran que le digo que cuando pase los 210 pixeles, el plugin me agregue un estilo css a la etiqueta NAV del html donde tengo mis botones, y de no ser asi.. que no tenga ningun stilo CSS mas que el original:
Código Javascript
:
Ver original<!-- SCROLL and ANIMATED HEADER -->
<script type="text/javascript">
$(document).ready(function(){
// hide #back-top first
//$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 210) {
$('nav').addClass('full');
} else {
$('nav').removeClass('full');
}
});
});
});
</script>
Ahora el simple CSS que hace el milagro:
Código CSS:
Ver originalnav{
width:100%;
clear:both;
}
nav.full{
width:100%;
clear:both;
top:0;
position: fixed;
z-index: 999;
}
y aqui el HTML del BODY:
Código HTML:
<nav>
<div id="menu_princ">
<ul id="topnav">
<li><a href="#">Inicio</a></li>
<li><a href="#">El Grupo Editorial</a></li>
<li><a href="#libros">Libros para leer</a></li>
<li><a href="#especial">Escríbenos</a></li>
</ul>
</div>
</nav>
espero que sirva como referencia al menos.. ahora estoy investigando como hacer que haga la animacion cuando vaya a un link X..