Ver Mensaje Individual
  #7 (permalink)  
Antiguo 08/10/2012, 12:48
Avatar de loncho_rojas
loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 16 años, 2 meses
Puntos: 175
Respuesta: Efectos de menu javascript con jQuery

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
  1. <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
  1. <!-- SCROLL and ANIMATED HEADER -->
  2. <script type="text/javascript">
  3.  
  4.  
  5.     $(document).ready(function(){
  6.    
  7.         // hide #back-top first
  8.         //$("#back-top").hide();
  9.        
  10.         // fade in #back-top
  11.         $(function () {
  12.             $(window).scroll(function () {
  13.                 if ($(this).scrollTop() > 210) {
  14.                     $('nav').addClass('full');
  15.                 } else {
  16.                     $('nav').removeClass('full');
  17.                 }
  18.             });
  19.    
  20.         });
  21.    
  22.     });
  23. </script>


Ahora el simple CSS que hace el milagro:
Código CSS:
Ver original
  1. nav{
  2.     width:100%;
  3.     clear:both;
  4. }
  5.  
  6. nav.full{
  7.     width:100%;
  8.     clear:both;
  9.     top:0;
  10.     position: fixed;
  11.     z-index: 999;
  12.  
  13. }


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&iacute;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..
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...