28172 sujets

CSS et mise en forme, CSS3

[Résolu] Sélecteur d’adjacence indirecte pour bloquer scroll d'ancre m

Bonjour,

Je suis en train de refaire tout mon site web actuellement mais je bloque complètement sur un détail que je ne parviens pas à maitriser.
Pour poser d'environnement, je vous mets ci-dessous le design que j'ai récupéré, l'adaptation que j'en ai fait et la technique que je souhaite y appliquer:

Ce que j'ai pris:ICI
ce système est à la base pour la conception d'un site entier comme l'adaptation faite ICI.

Mon adaptation:ICI
mon CSS (à partir de "menu horizontal", c'est assez bordélique mais il est prévu de l'épurer une fois fini) :ICI

Mon problème: Le menu est sous une bannière. Mon problème est que lorsque je clic sur les menu principaux (ORAGES, NATURE...) la page scroll directement sur ce menu, lorsque l'on clic dans un lien du sous-menu la page remonte, puis lorsque l'on change de GROS menu la page redescend au niveau du menu etc... Je trouve cela très gênant même si c'est le principe d'une ancre. J'ai donc lu qu'avec le sélecteur d’adjacence indirecte, je pouvais court-circuiter ce système et empêcher ma page de scroller lorsque je change de menu. Vous trouverez ci-dessous l'article du même site que j'ai tenté de mettre en pratique sans résultat.

La technique que je souhaite y appliquer:ICI

Mon résultat actuel: désespérant

J'ai également un deuxième comportement que je ne parviens pas à réguler, allez par exemple dans A PROPOS et naviguez entre les deux liens A propos du site et A propos de l'auteur. Vous remarquerez que le bandeau menu se recharge systématiquement depuis le premier onglet.

Sans ces deux problèmes ce menu serait parfait mais malheureusement je commence plutôt à aller à reculon et à chercher un plan B basique car je commence à y passer tout mon temps libre et sans résultat Smiley bawling

Je précise que la programmation web est loin d’être mon domaine et je ne fait que de la bidouille.

Je vous remercie pour le temps que vous prendrez pour m'aider et votre soutien (même juste psychologique) dans ce moment difficile!

PS: ne vous inquiétez pas pour les photos, j'ai prévu de faire des vignettes pour alléger considérablement la navigation et le chargement des pages!
Modifié par Pictorage (10 Mar 2015 - 11:14)
A défaut de régler le problème dans mon premier message, j'ai tenté de créer un menu avec un slide(up down) des div comme dans mon message précédent pour un effet similaire et le même résultat final (niveau pratique).
Je n'ai réussi à faire qu'un slideUp slideDown (sur le mot ACCUEIL dans la zone rouge au clic), je ne parviens pas à mettre en place la boucle (je pense) permettant de vérifier quel menu est cliqué, vérifier si un autre div est ouvert et si oui le fermer et ouvrir le nouveau div correspondant au clic.

Ma page test ici (code jquery intégré dans la page):ICI

J'attends votre aide avec impatience c'est le dernier point bloquant pour finaliser mon site!! Smiley bawling
Modifié par Pictorage (11 Mar 2015 - 07:18)
Hello.

Voici ton code JS actuel
$(document).ready	(function() {
	$('#divmenu1,#divmenu2,#divmenu3,#divmenu4' ).hide(); 
	$(document).ready	(function() {
		var smenu1 = $(' .smenu1');
		$(this).click(function() {
			if (smenu1.is(':hidden')) {
				$('#divmenu1').slideDown("slow")
			} else {$('#divmenu1').slideUp("slow");} 
		});
	});
});


Y'a des choses bien, mais également plusieurs soucis :
- 2 tests $(document).ready() -> UN inutile
- Utilisation maladroite de $(this) qui ne pointe pas sur ce que tu crois -> pointe sur ton document (ce qui fait qu'un menu se déroule peu importe où tu cliques)

Beute zèr arr mèni solucheunes for iour problème.

Si tu veux garder ton architecture html actuelle, un code très simple :
$(document).ready	(function() {
	$('#divmenu1, #divmenu2, #divmenu3, #divmenu4' ).hide(0);

	$('#nav li a').click(function(e) {
		e.preventDefault();
		var index=$(this).index('a')+1;
		$('#divmenu1, #divmenu2, #divmenu3, #divmenu4' ).hide(0)
		$('#divmenu'+index).slideToggle();
	});
});

... Qui normalement devrait pas trop mal fonctionner (je te laisse comprendre le script, si tu as des questions...)
Modifié par SolidSnake (11 Mar 2015 - 12:02)
Bonjour SolidSnake,

Je te remercie pour ton aide! en effet ton script fonctionne et je suis parvenu à l’adapter au design final (que j'ai réciproquement adapté au script Smiley lol ).
Tu me sauve la vie car je suis bloqué depuis des jours sur ce menu Smiley biggol !

Concernant l'effet, je connaissais le toggle (pas le script permettant de l'exploiter sur plusieurs onglets par contre!) et je recherchais plutôt le SlideDown sur l'onglet cliqué et SlideUp sur l'onglet ouvert (si un onglet est ouvert) comme mon mini-menu à un onglet.

Ce scripte m'a permis de mieux comprendre la programmation Jquery (les objets), et quelques fonctions. J'y vois un peu plus claire du coup pour le faire évoluer plus tard (tout seul comme un grand Smiley murf ) vers l'effet slide qui semble plus complexe!

As-tu tout de même quelques documentations sur le $(this) car j'ai du mal à comprendre comment il fonctionne (j'ai juste compris comment lui définir sa zone de parcoure avec la 3ème ligne de code).

Je te remercie pour tout et ne manquerais pas de te présenter ici la version final du site avec le scripte en marche! Smiley cligne
Modifié par Pictorage (12 Mar 2015 - 23:07)
Bonjour.

L'opérateur this est difficile à appréhender en javascript, aussi je te conseille la lecture de cette page

NB: très utilisé en jQuery, le $(this) pointe vers l'objet jQuery d'un élément, la plupart du temps dans un écouteur click (ou autre), il renvoie vers l'élément cliqué (ou autre)
Sujet clos
Aller à