Foros del Web » Creando para Internet » HTML »

Efectos de menu javascript con jQuery

Estas en el tema de Efectos de menu javascript con jQuery en el foro de HTML en Foros del Web. Buenas mis estimados amig@s del Foro mas bueno of the world. Necesito una mano o ayuda para encontrar como hacer unos efectos con ayuda de ...
  #1 (permalink)  
Antiguo 03/10/2012, 15:10
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 16 años, 1 mes
Puntos: 175
Efectos de menu javascript con jQuery

Buenas mis estimados amig@s del Foro mas bueno of the world.

Necesito una mano o ayuda para encontrar como hacer unos efectos con ayuda de Javascript y sus plugins jQuery.

Son 2 efectos pero siempre del menu principal...

A- que el menu siga en la pantalla, aunque se haga scroll.. (ya se que existe CSS con el FIXED, pero no es lo que quiero..)

En el ejemplo, nótese como el menu esta en una posicion X, y luego al desplazar, cambia y luego sigue por toda la pantalla.

B- que cuando dé click en uno de los botones del menu, se desplace hacia otra posicion pero dentro de la misma página con un efecto de animación... les paso un ejemplo en esta página, nótese cuando clickean se desplaza con animación hacia el contenido del sitio.

EJEMPLO 1:
http://demicreative.com/

necesito los mismo efectos.. si podrían ayudarme, orientarme y demás...
__________________
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...
  #2 (permalink)  
Antiguo 04/10/2012, 09:26
 
Fecha de Ingreso: septiembre-2012
Ubicación: Sevilla
Mensajes: 144
Antigüedad: 12 años, 2 meses
Puntos: 0
Respuesta: Efectos de menu javascript con jQuery

La pagina esa mla muchisimo la vdd , no se bien como hacer lo que necesitas aqui te dejo la pagina de jquey http://jquery.com/ y si le das a docummentation ay te aparece un menu cn tds ls eventos funciones y demas y sobre tod con muchos ejemplos de todas las funcionalidades de jquery , voy a seguir tu tema y pr favor dime si haces una pagina parecida el como por que es genial un saludoo
  #3 (permalink)  
Antiguo 04/10/2012, 09:33
 
Fecha de Ingreso: septiembre-2012
Ubicación: Sevilla
Mensajes: 144
Antigüedad: 12 años, 2 meses
Puntos: 0
Respuesta: Efectos de menu javascript con jQuery

por tro lado si te fijas bien en la pagina , lo que tiene es una cabecera fija y el resto es una pagina mu larga per slo una , y va enlazand a lugares dentro de la misma pagina en plan el tipico enlace arriba y abajo de html , si abres el codigo fuente te darás cuenta de que todon son enlaces y se va moviendo dentro de una misma pagina . Espero que esto te haya ayudado seguiré mirando aver si veo algo mas , bueno este es el unico script que veo pero no lo entiendo muy bn ..

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.       var _gaq = _gaq || [];
  3.       _gaq.push(['_setAccount', 'UA-335333-9']);
  4.       _gaq.push(['_trackPageview']);
  5.       (function() {
  6.         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  7.         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  8.         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  9.       })();
  10.     </script>
  #4 (permalink)  
Antiguo 04/10/2012, 11:48
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 16 años, 1 mes
Puntos: 175
Respuesta: Efectos de menu javascript con jQuery

nataliagb1992 Ahora estoy tratando de hacer una especie de Copy Paste del sitio, esa cabecera que me mencionas ahi es del google Analytics... aunque mirando el codigo fuente estan los enlaces del pluggin.. solo que no entiendo bien de jQuery, estoy leyendo un manual para entender su sintaxis... seguire posteando para ver si puedo resolverlo..
__________________
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...
  #5 (permalink)  
Antiguo 04/10/2012, 12:27
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Efectos de menu javascript con jQuery

Tenía algo parecido —o igual— para la paginación de un foro, a ver si lo encuentro, que en alguna recóndita carpeta tiene que andar.
__________________
(:
  #6 (permalink)  
Antiguo 04/10/2012, 12:40
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Efectos de menu javascript con jQuery

Que bien me organizo.

Puse un ejemplo aquí: http://jsfiddle.net/sN85U/

Supongo que está más o menos claro el ejemplo.

No sé si será la mejor forma de hacerlo o no. De hecho no recuerdo ni de dónde salió —lo tenía de una web que hice en 2008 creo— pero ahí está.
__________________
(:
  #7 (permalink)  
Antiguo 08/10/2012, 12:48
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 16 años, 1 mes
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...

Etiquetas: javascript, menu-dinamico, menu-fijo-deslizable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 19:43.