Forums Développement Multimédia

Aller au contenu

- - - - -

Realiser une navigation avec des sous menu qui apparaissent onOver en html/css

CODE html css

9 réponses à ce sujet

#1 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 01 December 2015 - 16:59 PM

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 !

#2 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7002 messages

Posté 01 December 2015 - 17:18 PM

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 ;)

#3 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7002 messages

Posté 01 December 2015 - 20:26 PM

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)

  • Fichier joint  fixed.rar   810 octets   31 téléchargement(s)
  • Fichier joint  normal.rar   785 octets   27 téléchargement(s)
  • Fichier joint  menuimages.rar   44.39 Ko   35 téléchargement(s)


#4 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 02 December 2015 - 23:35 PM

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 :D )

#5 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 03 December 2015 - 20:31 PM

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

#6 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7002 messages

Posté 03 December 2015 - 20:55 PM

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)

  • Fichier joint  test.rar   830 octets   22 téléchargement(s)


#7 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 03 December 2015 - 22:17 PM

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.


#8 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7002 messages

Posté 03 December 2015 - 22:33 PM

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";
}


#9 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7002 messages

Posté 03 December 2015 - 23:06 PM

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

#10 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 03 December 2015 - 23:50 PM

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";
        }
    }

}

 





Répondre à ce sujet



  

1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP