Enlace a sección en front

[ivanalberquilla]

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

[JustinKO]

Iniciado por ivanalberquilla

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?

[MarioAraque]

@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:

var $hash = window.location.hash;
if($hash == 'foo'){
  $('.item-menu').addClass('active'); //jQuery
}
 

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

Saludos.

[ivanalberquilla]

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

[MarioAraque]

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.

[ivanalberquilla]

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....

[MarioAraque]

Quizás puedas hacer que se recoja manualmente, la verdad no uso Bootstrap y ahi ya no puedo ayudarte =(

[JustinKO]

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

[ivanalberquilla]

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

[MarioAraque]

Con jQuery podés hacer esto:

Código Javascript:

$('#nosotros').on('mouseenter', function() {
  console.log('He entrado en el tag con id nosotros');
});
 

[ivanalberquilla]

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

[JustinKO]

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:

$(window).on('scroll', function() {
...
});
 

Luego con

Código Javascript:

$(window).scrollTop;
$('#nosotros').offset();
$(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