Afficher un bloc en dessous du bouton actif d'un menu

Bonjour,

je cherche à afficher un bloc blanc en dessous du bouton actif d'une barre de menu horizontale.
Ce bloc doit donc changer d'emplacement si on clique sur un autre bouton du menu.
Bien entendu il doit adopter la largeur du bouton sur lequel on a cliqué.

Pour afficher mon bloc je ne peux pas agrandir le bouton du menu en hauteur avec du jquery car sinon cela décale la bordure bas de ma barre de menu.Quant au bouton actif du menu qui devient blanc j'ai réussi à le gérer en css.

Il d'agit d'un site wordpress mais je ne sais pas si c'est utile de le préciser. Je précise que je ne suis pas très compétent en javascript d'où ce message...

Une image sera plus parlante :


Merci pour vos réponses
Modifié par bofman (11 Feb 2014 - 11:45)

Bonjour,

C'est un menu déroulant que tu cherche a faire ? Il y a cet article si c'est le cas : http://letrainde13h37.fr/44/menu-deroulant-accessible-css/

Sur ce type de menu, préfère l’événement au survol plutôt qu'au clic.

benj a écrit :
Bonjour,
C'est un menu déroulant que tu cherche a faire ? Il y a cet article si c'est le cas : http://letrainde13h37.fr/44/menu-deroulant-accessible-css/
Sur ce type de menu, préfère l’événement au survol plutôt qu'au clic.

J'avais oublié cet article, merci
Par contre, j'aurai sans doute donné le conseil inverse concernant l'événement à privilégier pour ce type de menu, en règle générale, et en particulier pour pour la navigation en mobilité.
Pourrais-tu expliciter ce conseil, s'il te plait ?

6l20 a écrit :
Pourrais-tu expliciter ce conseil, s'il te plait ?

Intéressant ! J'ai en fait écrit cela sans vraiment y réfléchir. Voici quelques points qui pourrait faire pencher du côté du hover :

- pas besoin de javascript : via un :hover en css
- c'est le comportement des menus principaux (lorsqu’il y a menu déroulant) sur de de nombreux sites
- la règle du moins de clic pour accéder au contenu

Sur mobile, en effet le survol va poser des problèmes.

Hello Benj,

Merci pour ton retour

Nous n'allons pas re-déballer toute la litanie sur la pertinence d'avoir un menu déroulant sur un site, ni nier farouchement que ces derniers s'avèrent nécessaires sous certaines conditions, les débats ont déjà eu lieu, argumentés par des plus beaux des plus forts que moi, en faveur comme en défaveur.

N'en demeure pas moins, à mon très humble avis, que "ce n'est pas parce qu'ils sont nombreux à avoir tort qu'ils ont raison"

Je te renvoie à ces liens qui restent, selon moi, toujours d'actualité :
L'accessibilité des menus de navigation déroulants de l'ami Tony
Pourquoi les menus affichés au survol font plus de mal que de bien aux utilisateurs d'Anthony T. partagé sur pompage.net

Tout cela pour dire, qu'à moi, même en 2014, cela ne me semble toujours pas super intuitif (et que dans bien des cas, cela me dérange de voir apparaitre ces "blocks surgissant", notamment lorsque c'est mal fait et que je n'arrive pas à aller simplement et rapidement où je veux...), que cela reste toujours problématique à bien des égards, et que, s'agissant "d'interactions fonctionnelles" (j'adore les tournures à la con ), cela devrait toujours être fait via JavaScript (avec dégradation CSS qui va bien) et toujours au clic, plutôt qu'au survol.
Même si CSS permet de plus en plus de chose, même si le voisin fait la même chose, même si l'on gagne un clic

Et effectivement, le cas de la mobilité est à prendre très sérieusement en compte (avec la pertinence d'utiliser un menu déroulant, les nombreux problèmes d'accessibilité et d'inter-opérabilité, mais c'est un autre débat )

Bien évidement le débat reste ouvert (et pour longtemps encore), et la vérité est certainement ailleurs (ou juste au milieu va savoir ?)

À bientôt,
Sylvain

Bonjour,

merci à vous c'est très gentil d'étaler le débat vers d'autres horizons

merci benj mais je ne cherche pas à faire un menu déroulant même si je suis allé jeter un coup d'oeil pour voir si je pouvais récupérer une bribe de code...
auriez-vous une solution technique pour ce que je recherche ?
comme je l'ai spécifié, la navbar ayant une border-bottom en css je ne peux pas jouer sur la hauteur.

C'est donc un bloc indépendant qui doit :
- récupérer la largeur du bouton cliqué au-dessus et l'adopter
- devenir visible à tant de pixels de la valeur y du bouton actif et le rester, tant qu'on ne clique pas sur un autre bouton

mais je ne suis pas capable de le faire en javascript

merci
Modifié par bofman (12 Feb 2014 - 16:52)

bofman a écrit :
mais je ne suis pas capable de le faire en javascript

Il n'y a pas besoin de faire le positionnement de tes blocs en javascript. (uniquement du js pour l'événement click).

Voici un exemple à retravailler de ce qu'il est possible de faire : http://jsfiddle.net/d5pfu/2/

@6l20 : Merci pour cette relecture sur le sujet. Il est vrai que j'avais perdu l'habitude de faire des menus déroulants pour ces raisons mentionnés. Mais on me demande de plus en plus de faire des mégas menu du type de labanquepostale.fr par exemple.
A voir ce que cela donne au clic.