Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » Drupal »

Enlace a sección en front

Estas en el tema de Enlace a sección en front en el foro de Drupal en Foros del Web. Hola, Quiero hacer una página con varias secciones en el front, con un scroll para ir pasando entre ellas. Normalmente esto se hace con un ...
  #1 (permalink)  
Antiguo 18/02/2014, 03:41
 
Fecha de Ingreso: mayo-2013
Mensajes: 41
Antigüedad: 7 años, 4 meses
Puntos: 0
Enlace a sección en front

Hola,

Quiero hacer una página con varias secciones en el front, con un scroll para ir pasando entre ellas.

Normalmente esto se hace con un enlace a la seccion en referencia a #seccion

Pero si pongo esto en drupal en el menú lo referencio como #seccion todas estas secciones se me muestran como activas y el menú muestra estos enlaces como activos.

¿Como puedo hacer para que no se muestren como activos? y que para que cuando se pinche se vaya justo a donde empiezan?

Muchas gracias
  #2 (permalink)  
Antiguo 18/02/2014, 12:37
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 8 años, 4 meses
Puntos: 47
Respuesta: Enlace a sección en front

Cita:
Iniciado por ivanalberquilla Ver Mensaje
Pero si pongo esto en drupal en el menú lo referencio como #seccion todas estas secciones se me muestran como activas y el menú muestra estos enlaces como activos.

¿Como puedo hacer para que no se muestren como activos? y que para que cuando se pinche se vaya justo a donde empiezan?

Muchas gracias
La verdad que no sé qué quieres decir, en esas dos últimas frases me pierdo totalmente. ¿A qué te refieres con que se te muestran como activas?
  #3 (permalink)  
Antiguo 18/02/2014, 14:42
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 11 años
Puntos: 265
Respuesta: Enlace a sección en front

@JustinKO, creo que se refiere a que en su menú pone links con anchors, es decir, pone cosas del tipo http://www.misitio.com/#anchor , para navegar en su web.

Entonces, si usa ese tipo de enlaces, cuando esté en http://www.misitio.com/ todos los enlaces de menú van a estar activos, y eso es lo que quiere evitar.

Si estoy en lo correcto con lo de arriba, vas a tener que editar tu theme y borrar todos los estilos por defecto de menús activos. Casi siempre el menú activado tiene un class "active" o "selected".

Luego, con javascript podés obtener el hash de la web, y en base a su valor activar o desactivar el item de menú correspondiente.

Código Javascript:
Ver original
  1. var $hash = window.location.hash;
  2. if($hash == 'foo'){
  3.   $('.item-menu').addClass('active'); //jQuery
  4. }

Lo que te puse es un ejemplo, pero te puede servir.

Saludos.
  #4 (permalink)  
Antiguo 18/02/2014, 15:22
 
Fecha de Ingreso: mayo-2013
Mensajes: 41
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Enlace a sección en front

Si, me explico mal.

Es lo que MarioAraque dice

Si ves la imagen todos se muestran como activos, y en el css con la clase active, lo que me produce varios problemas.

[URL=http://www.casimages.es/i/140218112445447589.png.html][IMG]http://nsae01.casimages.net/img/2014/02/18/mini_140218112445447589.png[/IMG][/URL]


¿Pero el class active se pone en el theme o es una función de drupal?

Por lo que había leido se hacia en la función menu_set_active_item


Muchas gracias por la ayuda
  #5 (permalink)  
Antiguo 18/02/2014, 15:59
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 11 años
Puntos: 265
Respuesta: Enlace a sección en front

Con que elimines las líneas CSS de las clases active desactivás totalmente los cambios.

Te conviene hacer lo que te dije antes de usar la API de Drupal que quizás te de un dolor de cabeza.
Con javascript podés sin problemas añadir un class nuevo al menú activo y con CSS emular el efecto active.

De hecho podés asociar el cambio de clase a un evento click en el menú. Sinceramente es muy sencillo de hacer.

Saludos.
  #6 (permalink)  
Antiguo 18/02/2014, 16:26
 
Fecha de Ingreso: mayo-2013
Mensajes: 41
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Enlace a sección en front

Hola,

Pero tengo un efecto colateral, que no se si será por esto o por el framework.

Uso Bootstrap, y en formato movil tengo menú collapse, y si están como activos, aunque pulse a un enlace me lleva, pero no se recoge el menu....
  #7 (permalink)  
Antiguo 19/02/2014, 00:41
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 11 años
Puntos: 265
Respuesta: Enlace a sección en front

Quizás puedas hacer que se recoja manualmente, la verdad no uso Bootstrap y ahi ya no puedo ayudarte =(
  #8 (permalink)  
Antiguo 19/02/2014, 02:52
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 8 años, 4 meses
Puntos: 47
Respuesta: Enlace a sección en front

Hola,
Estoy con un proyecto ahora terminando que está con bootstrap y la verdad me ha dado muchos quebraderos de cabeza el tema del menú. Bootstrap te facilita mucho el trabajo pero por otro lado te complica como tengas que modificar alguna cosa como ésta.
Hasta donde yo he he visto the puedo decir que dentro de la carpeta de bootstrap tienes un directorio que se llama theme y dentro otro que se llama menu ahí tienes los archivos php que usa bootstrap para los menús.
Yo tuve que modificar el archivo "menu-link.func.php" y ahí puedes desactivar las clases (css) que dices. En este post, aunque mi consuta era sobre otra cosa del menú, explico al final un poco lo que yo tuve que hacer para quitar alguna clase css. Échale un ojo a ver si te sirve de algo
De todos modos, aunque solucioné casi todos mis problemas, por uno que no viene al caso ahora, lo que decidí al final fue directamente hacerme el menú en html, desactivar el otro y crearme un bloque con el menú html que hice yo, y así he podido hacer y deshacer a mi antojo. En mi caso y por las necesidades de esta web, decidí que era la mejor opción.
Piénsalo que lo mismo te merece la pena.

Saludos
  #9 (permalink)  
Antiguo 22/02/2014, 09:55
 
Fecha de Ingreso: mayo-2013
Mensajes: 41
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Enlace a sección en front

OK, gracias, probaré lo que me dices. En principio el menú en normal va bien, lo malo es cuando pasa al modo "acordeón".

Lo de active lo he solucionado con JQuery, eliminando la clase active de los elementos del menú al cargar la página, dejo el código por si le sirve a alguien:

Código:
jQuery(document).ready(function($) {
    var pathname = window.location.pathname;
    if(pathname=='/'){
          $("li").removeClass("active");
    }
});
El problema ahora es añadir esa clase cuando este el scroll justo encima. ¿como hago para saber que estoy pasando encima de un div con nombre #nosotros?

Gracias
  #10 (permalink)  
Antiguo 22/02/2014, 10:04
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 11 años
Puntos: 265
Respuesta: Enlace a sección en front

Con jQuery podés hacer esto:

Código Javascript:
Ver original
  1. $('#nosotros').on('mouseenter', function() {
  2.   console.log('He entrado en el tag con id nosotros');
  3. });
  #11 (permalink)  
Antiguo 22/02/2014, 10:12
 
Fecha de Ingreso: mayo-2013
Mensajes: 41
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Enlace a sección en front

Hola MarioAraqu,

No me vale lo de pasar el mouse por encima, porque según la estructura de la página puedes ir bajando con el mouse en e scroll y no tocar ese div. La idea es saber cuando este div es alcanzado por el scroll para poder poner el active
  #12 (permalink)  
Antiguo 23/02/2014, 04:46
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 8 años, 4 meses
Puntos: 47
Respuesta: Enlace a sección en front

Hola Si lo que quieres es que el navegador detecte que cierto div esté pasando por algún sitio en concreto al moverte por el scroll, puedes usar

Código Javascript:
Ver original
  1. $(window).on('scroll', function() {
  2. ...
  3. });

Luego con
Código Javascript:
Ver original
  1. $(window).scrollTop;
  2. $('#nosotros').offset();
  3. $(window).height();

y con unos pocos cálculos entre ellos puedes ir haciendo de todo.

Y respecto a lo de quitar la clase "active" ¿has trasteado donde te poste "menu-link.func.php"? ahí hay una línea de código que añade esa clase. Con esa clase no he comprobado nada, pero quité otras simplemente comentando líneas como esa. Si se puede hacer ahí, siempre será mejor que hacerlo con javaScript ¿no?


saludos

Etiquetas: enlace, front
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




La zona horaria es GMT -6. Ahora son las 09:04.