9 réponses à ce sujet

[tlecoz]

Bonjour,

je suis en train de réaliser un site en html/css qui contient plusieurs menu de navigation.
Dans les grandes lignes, j'essaye de reproduire ce site

http://www.maison-du...e-marseille.fr/

J'ai réalisé le menu vertical sans trop de problème ainsi que la barre de navigation horizontal (et plein d'autres choses, mais on s'en fout )

Je m'intéresse ici uniquement à la barre de navigation horizontale ; j'aimerais faire apparaitre un "panneau" sous les boutons de la nav lorsque je survole l'un d'eux , comme sur le site des savons de marseille.

Autant je vois très bien comment le faire avec javascript/canvas , autant je suis peu expérimenté en html/css et je me demande comment faire pour créer un panneau calé sur la nav mais AU-DESSUS du reste du contenu (sans décaler tout les blocs situé en dessous)

Je ne sais pas comment s'appelle ce type de menu, et je galère pour trouver les mots clés qui vont bien dans mes recherches google...

Est ce que quelqu'un aurait un tuto à me conseiller, un exemple simple, ou quelques pistes ?
Je suis convaincu que c'est tout simple mais je ne sais pas comment aborder le problème....

Merci d'avance pour votre aide !

[Monsieur Spi]

Hello Tom,

Citation

Autant je vois très bien comment le faire avec javascript/canvas , autant je suis peu expérimenté en html/css et je me demande comment faire pour créer un panneau calé sur la nav mais AU-DESSUS du reste du contenu (sans décaler tout les blocs situé en dessous)

Met ta barre de nav dans un conteneur (une simple div).
Tu crée tout ton menu et tes panneaux (invisibles au départ).
Tu crée tout le JS pour le survol et l'affichage (pas bien difficile, tu fais apparaître les div cachées tant qu'on survole)
Tu passe au CSS, le but c'est de positionner ton menu au dessus des autres éléments pour que lorsque tu survole et que ton contenu s'ouvre il ne décale pas ce qui est dessous, va falloir jouer avec la position des éléments.

Donc, en CSS avec la propriété "position" tu as le choix entre "absolute", "relative" ou "fixed".
Fixed tu colle l'élément ou tu veux et il sort du flux html (plus pris en compte dans la structure)
Relative, il est positionné relativement aux autres éléments
Absolute, il sort du flux jusqu'au prochain conteneur parent positionné en absolute ou relative

Pour que ton menu reste a sa place, tu le colle donc dans une div qui sert de conteneur et tu la positionne en relative (css).
Puis la barre de nav qui est dans cette div tu la positionne en absolute, top 0 pour la coller en haut de ta div.
La barre étant sortie du flux elle ne devrait plus décaler les autres éléments.

Reste à la passer par dessus le reste, tu donne à ton conteneur un z-index plus haut que le reste (par exemple 1000).

En pseudo code :

<div id="menu"><nav>ton menu</nav></div>

Puis en css :

#menu  {
position : relative; // elle reste dans le flux
z-index : 1000; // elle se place au dessus des autres elements
}

#menu nav{
position : absolute; // elle flotte hors du flux mais reste dans #menu
top : 0;
}
 

EDIT : comme ta barre de nav n'est normalement plus prise en compte dans ta structure html, il se peut que ton conteneur ait une hauteur de 0, ça peut poser un problème de calage avec ce qui est dessous, dans ce cas fixe la hauteur du conteneur.


EDIT 2 : la boutique que tu montre en exemple a été faite avec Prestashop, si tu peux jettes-y un oeil, c'est un très bon outil pour ce genre d'exercice, ça s'installe en 3 minutes et tu t'amuserai sans doute plus avec le code

[Monsieur Spi]

Re,

Pour ceux que ça pourrait aider voici trois exemples de ce menu animé en full CSS (pas besoin de JS).

Le premier est l'exemple du menu qui passe par dessus le contenu (absolute).
Le second est un exemple de menu toujours présent en haut de la page (fixed).
Le dernier on ajoute des images dans les sous menus et on les positionnes en absolute.

Fichier(s) joint(s)

•  fixed.rar   810 octets   32 téléchargement(s)
•  normal.rar   785 octets   28 téléchargement(s)
•  menuimages.rar   44.39 Ko   38 téléchargement(s)

[tlecoz]

Merci Mr Spi !
Désolé de répondre si tardivement, j'étais en déplacement...
Je pense avoir compris le coup de conteneur en position absolue dans une conteneur relatif, je vais essayer ça tout de suite !

(je vais peut être aussi en profiter pour regarder les sources ci dessus )

[tlecoz]

Bonjour tout le monde !

J'ai honte de solliciter votre aide à nouveau pour un truc si simple, mais je rencontre un problème inattendu et je n'arrive pas à trouver la bonne logique, j'ai l'impression d'avoir essayé toutes les approches évidentes, en vain.
(j'ai bien en tête des solutions sales qui marcheraient probablement, mais j'aimerais trouver la bonne solution en fait...)

J'ai donc réalisé mon sous menu, qui apparait sous ma barre nav lorsqu'on survole l'un des boutons de celle ci. J'utilise z-index et position absolute pour le caler par dessus le reste du contenu du site - mais je n'utilise pas de balise <ul> ni <li> ; ma barre de nav ainsi que mes sous menu sont basé des flex-box -

Je gère les interactions avec javascript, en jouant sur "visibility = hidden" pour faire apparaitre/disparaitre les sous menu.

Le menu/sous menu en lui même fonctionne très bien, réagit comme je veux, mais le problème survient lorsque je crée une fonction "onmouseout" sur mon sous menu et que je passe sur un bouton situé dans une div avec un z-index à 0 (situé derrière le sous menu donc).
Dans ce cas, le code JS comprend que la souris se trouve au dessus du bouton caché derrière le sous menu, mais plus au dessus de mon sous menu, il déclenche donc le "onmouseout" et mon sous menu disparait...

Je n'ai pas essayé avec la solution de Mr Spi en full-css, j'aimerais comprendre comment surpasser ce problème en javascript, ça me parait tellement basique...J'enrage de ne pas y arriver...

Merci d'avance pour votre aide

[Monsieur Spi]

Hello,

Pas sur de comprendre tout le problème, ça parait simple mais un truc m'échappe et je ne saurais dire quoi, tu as un exemple codé vite fait ?

Sinon, en JS tu peux ajouter/retirer des classes (CSS) à un sélecteur, par exemple :

$(".sousmenu").addClass("actif");

Il suffirait qu'au déploiement du menu tu lui ajoute la classe CSS de ton choix, puis de poser une condition à ton mouseOut, par exemple que l'élément déclencheur ait bien la classe qu'il faut, par exemple :

$( ".sousmenu" ).hasClass( "actif" ).addEventListener("mouseleave", function( event ) {...});

Attention j'utilise Jquery pour ces exemples, mais ça doit pouvoir se coder en JS natif sans problème.
Au passage je ne sais pas si tu as jeté un oeil du côté de mouseLeave : http://www.w3schools...nmouseleave.asp

[edit]

J'ai monté un test vite fait en JS, l'élément qui est dessous (le bouton) n'est pas actif tant qu'il a un élément au dessus.
C'est ça le truc qui m'échappait tout à l'heure en fait c'est le comportement que tu décrit qui ne me semble pas naturel, ou je me trompe. Du coup un bout de code serait bienvenu.

Fichier(s) joint(s)

•  test.rar   830 octets   25 téléchargement(s)

[tlecoz]

Hello Mr Spi,
merci pour ton message !

Bon je viens de voir que j'ai modifié le code juste avant de créer cette réponse et que le code que je t'ai envoyé ne correspondait plus à la description que j'en faisais - je suis fatigué, désolé ... - ;


[...]
15 minutes de test plus tard....
[...]

Rhaaaa, tout ce temps perdu à cause de l'utilisation de onmouseout VS onmouseleave ....


Merci encore Mr Spi !

Modifié par tlecoz, 03 December 2015 - 22:51 PM.

[Monsieur Spi]

Ok je crois que j 'ai compris, comme quoi un petit exemple ...

Ajoute :

sub.onmouseover = function(e){
        this.style.visibility = "visible";
}

Dans ton code tu écoute quand on survole le bouton mais pas quand on survole le sous-menu.
Peu importe que tu aie un bouton ou pas dessous (essaye à un endroit sans bouton), si tu sort du bouton de nav il considère que tu es aussi sorti du sous-menu. Pour éviter ça tu peux lui signifier que tant que tu survole le sous-menu il doit rester visible.

[edit]
Il faut aussi modifier la sortie du bouton pour éviter que le sous-menu reste actif.

btn.onmouseout = function(e){
        this.sub.style.visibility = "hidden";
}

Ha, si ça peut être utile (à toi ou a d'autres), deux outils pratiques pour nettoyer rapidos le code :

Cleaner : http://www.dirtymarkup.com/
Minifier : http://www.cleancss.com/css-minify/


[edit 2]

J'ai fait un test en récupérant ta page et avec ce bout de code, ça marche nickel :

function onBodyLoaded(nbBtn){
   
    var i;
    var btn,sub,oldSub;

    for(i=0;i<nbBtn;i++){
        btn = getItem("headerBtn_"+i);
        sub = getItem("headerSubPanel_"+i);

            btn.sub = sub;
        btn.onmouseover = function(e){
            if(oldSub && oldSub != this.sub) oldSub.style.visibility = "hidden";
            this.sub.style.visibility = "visible";
            oldSub = this.sub;
        }
        btn.onmouseout =     function(e){toggle(this.sub)}
        sub.onmouseover =     function(e){toggle(this)}
        sub.onmouseout =     function(e){toggle(this)}
    }
}

function getItem(s){
    return document.getElementById(s);
}

function toggle(s){
    s.style.visibility=="hidden" ? s.style.visibility="visible" : s.style.visibility="hidden";
}

[Monsieur Spi]

Ha tient j'avais pas vu ton edit de message entre les deux lol
Pas de pb, bon courage

[tlecoz]

Voila mon code.
j'ai utilisé onmouseleave comme tu me l'avais suggéré et ça fonctionne aussi très bien

function headerNavInteraction(nbBtn){
    var i;
    var btn,sub,oldSub;

    for(i=0;i<nbBtn;i++){
        btn = document.getElementById("headerBtn_"+i);
        btn.name = "btn_"+i;

        sub = document.getElementById("headerSubPanel_"+i);
        sub.style.visibility = "hidden";
        sub.name = "sub_"+i;

        btn.sub = sub;
        btn.onmouseover = function(e){

            if(oldSub && oldSub != this.sub){
                delete oldSub.onmouseleave;
                oldSub.style.visibility = "hidden";
            }
            this.sub.style.visibility = "visible";
            oldSub = this.sub;

            this.sub.onmouseleave = function(){
                this.style.visibility = "hidden";
            }
        }

    }

    var hNav = document.getElementsByClassName("headerNavContainer")[0];
    hNav.onmouseleave = function(e){
        if(e.offsetY < this.clientHeight){
            if(oldSub != undefined) oldSub.style.visibility = "hidden";
        }
    }

}