1. #41
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 578
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 578
    Points : 21 181
    Points
    21 181

    Par défaut

    1/ Sous-menu ouvert - Flèche
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /* ------------------- */
    /* FACULTATIF  : Sous-Menu OUVERT au départ */
    #navMain > ul > li.openfirst > ul {
      display:block; 
    } 
     
    #navMain > ul > li.openfirst:after {
        -o-transition: -o-transform 0.5s;
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -moz-transition: -moz-transform 0.5s;
        -webkit-transform: rotate(180deg);
        -webkit-transition: -webkit-transform 0.5s;
        transform: rotate(180deg);
        transition: transform 0.5s;
    }
    + ajouter dans le jQuery :
    Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    	// -------------------
    	// ouverture/fermeture sous-menu (click/touch)
    	$(navMainId+' ul > li').on( 'click', function(event) 
        {
    ...
          $(this).removeClass('openfirst'); /* FACULTATIF  : Sous-Menu OUVERT au départ : on EFFACE la class */

    2/ Scrollbar - modifier :
    Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    // ------------------------------------------------
    // Scrollbar si menu plus grand que la hauteur de fenêtre
    $(window).on( 'load resize', function(){
    	var navMainId = '#navMain';
    	$(navMainId).height( Math.min( $(window).height(), $(navMainId).height() ) ); //  A ADAPTER par rapport à la hauteur effectivement disponible : hors header, footer,....
    	$(navMainId).css( { 'overflow-y':'auto' } );
    });
    // ------------------------------------------------
    // A ADAPTER par rapport à la hauteur effectivement disponible : hors header, footer,....
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  2. #42
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    177
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 177
    Points : 50
    Points
    50

    Par défaut

    Bon, j'ai du merder quelque part, car y'a toujours un ch'tit bug dans la flèche, et pour le code jQuery d'ascenseur, heu... Pareil... On verra plus tard pour lui.

    Par contre, dommage pour la flèche.

    P.s : Any idea pour l'indicateur de page ouverte ?
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  3. #43
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 578
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 578
    Points : 21 181
    Points
    21 181

    Par défaut

    Mea culpa :

    Remplacer
    Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    			$(this).removeClass('openfirst');
    par
    Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    			$(navMainId+' ul > li').removeClass('openfirst');
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  4. #44
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    177
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 177
    Points : 50
    Points
    50

    Par défaut

    C'est... Différent maintenant... Il reste bloqué en Up...
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  5. #45
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 578
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 578
    Points : 21 181
    Points
    21 181

    Par défaut

    Je suis sur ta page http://wda-fr.org/includes/menu-test.php, et ça fonctionne correctement (Firefox).
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  6. #46
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    177
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 177
    Points : 50
    Points
    50

    Par défaut

    Heu... Testé en vidant la cache... Sur Mac ET PC... Chrome...
    Quand on charge, la fleche est bien UP.
    Si on re-clique sur "Association", elle reste UP.
    Testé aussi avec Firefox PC.
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  7. #47
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    177
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 177
    Points : 50
    Points
    50

    Par défaut

    BEWARE (pour tests) : J'ai re-nommé le menu-test.php en menu.php et réciproquement (ancien/nouveau/ancien)...
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  8. #48
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 578
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 578
    Points : 21 181
    Points
    21 181

    Par défaut

    Parfois, il faut savoir dire stop...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  9. #49
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    177
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 177
    Points : 50
    Points
    50

    Par défaut

    No pb bien sur...
    Le 20/10/2017, ce sera les 20 ans du site... Voici ma motivation.
    il me reste 8 jours pour parfaire.

    Si d'ici la vous avez une idée.

    P.s : Le passage du JS en fichier externe n'a pas fonctionné...
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  10. #50
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 578
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 578
    Points : 21 181
    Points
    21 181

    Par défaut

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <script type="text/javascript" src="http://wda-fr.org/includes/menu.js"></script>
    <script type="text/javascript" src="http://wda-fr.org/moteurs/jquery-3.2.1.min.js"></script>
    NON.
    L'initialisation de jQuery en PREMIER :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <script type="text/javascript" src="http://wda-fr.org/moteurs/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="http://wda-fr.org/includes/menu.js"></script>
    Tu ne mets pas ton pantalon avant ton slip, si ?
    Ou alors tu es Superman !

    Nom : 250px-SupermanRoss[1].png
Affichages : 29
Taille : 103,1 Ko
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  11. #51
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    177
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 177
    Points : 50
    Points
    50

    Par défaut

    Hummm... Comme je le disais, je ne suis pas familier avec JS...
    Je ne savais qu'il faisait appel à une routine du JQuery...

    Done, ça marche sur Safari et Chrome sur PC et Mac... Mais ne veut rien savoir sur Firefox...
    Etrange...
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  12. #52
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 578
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 578
    Points : 21 181
    Points
    21 181

    Par défaut

    Je suis sur Firefox... et ça fonctionne.
    Sur Opera aussi.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  13. #53
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    177
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 177
    Points : 50
    Points
    50

    Par défaut

    ?!?

    Je viens de tester sur un autre Mac : Pareil...

    Nom : Capture d'e?cran 2017-10-12 19.39.50.png
Affichages : 29
Taille : 579,4 Ko
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  14. #54
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 578
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 578
    Points : 21 181
    Points
    21 181

    Par défaut

    Bon. Changeaons notre fusil d'épaule...

    1/ On OUBLIE la classe "openfirst".
    -> on supprime dans le CSS et le jQuery ce qu'on avait mis concernant cette class.

    2/ on met une classe "active" à la place :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <li class="active"> <!-- Sous-Menu ouvert par defaut !-->
    et dans le jQuery (j'ai tout mis : à copier-coller) :
    Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    // ------------------------------------------------
    // 	jquery.dropdown.js	(depends on: jquery.hoverIntent.js)
    // ------------------------------------------------
    $.fn.dropdown = function(options) 
    {
    	var defaults = {};
    	var opts = $.extend(defaults, options);
    	// Apply class=hasSub on those items with children
    	this.each(function(){
    		$(this).find('li').each(function() 
    		{
    			if( $(this).find('ul').length > 0) 
    			{
    				$(this).addClass('hasSub');
    			}
    		});
    	});
    	return this;
    };
    // ------------------------------------------------
    // MENU MAIN
    $(function(){
    	var navMainId = '#navMain';
    	// -------------------
    	// Calling the jquery dropdown
    	$(navMainId).dropdown();
    	// -------------------
      //Sous-Menu ouvert par defaut
      $(navMainId+' ul > li.active').addClass('open');
      $(navMainId+' ul > li.active > ul').slideDown('fast');
    	// -------------------
    	// ouverture/fermeture sous-menu (click/touch)
    	$(navMainId+' ul > li').on( 'click', function(event) 
        {
          event.stopPropagation(); /* important */
          $(this).parent().find('li:not(:hover)').removeClass('open');
        $(this).toggleClass('open');
          $(this).parent().find('li:not(:hover) ul').slideUp('fast');
          if( $(this).hasClass('hasSub') )
          {
            $(this).children('ul').slideToggle('fast');
          }
        });
    	// -------------------
    	// on désactive les liens des Menus AVEC Sous-Menus (obligatoire pour Tablettes TACTILES / Smartphones)
    	$(navMainId+' > ul > li.hasSub > a').on( 'click', function(event) 
        {
          event.preventDefault();
    	});
    	// -------------------
    });
     
    // ------------------------------------------------
    // Scrollbar si menu plus grand que la hauteur de fenêtre
    $(window).on( 'load resize', function(){
    	var navMainId = '#navMain';
    	$(navMainId).height( Math.min( $(window).height(), $(navMainId).height() ) ); //  A ADAPTER par rapport à la hauteur effectivement disponible : hors header, footer,....
    	$(navMainId).css( { 'overflow-y':'auto' } );
    });
    // ------------------------------------------------
    Et là... c'est Broadway !
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  15. #55
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    177
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 177
    Points : 50
    Points
    50

    Par défaut

    YES, la ça fonctionne...

    Toujours pas sur Firefox... Je viens encore de tester... Mais Chrome & Safari : Ok.
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  16. #56
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    177
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 177
    Points : 50
    Points
    50

    Par défaut

    BINGO ... Je ne sais pas pkoi, il me chargeait la page en HTTPS (1and1 me gonfle)...
    En http ça fonctionne nickel.

    Par contre, je remarque SUR MOBILE un décalage quand on ouvre le sous-sous-menu Test... Enfin, l'ensemble du container se déplace sur la droite.
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  17. #57
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 578
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 578
    Points : 21 181
    Points
    21 181

    Par défaut

    Supprime la partie du CSS avec
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    #navMain ul ul ul .... { ...}
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  18. #58
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    177
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 177
    Points : 50
    Points
    50

    Par défaut

    Done.

    J'ai donc viré :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    #navMain ul ul ul > li > a {
    	padding-left: 40px;
    }
     
    #navMain ul ul ul > li {
    	background: #555;
    	box-shadow: 0 1px 0 #666 inset, 0 -1px 0 #444 inset;
    }
     
    #navMain ul ul ul ul > li > a {
    	padding-left: 60px;
    }
     
    #navMain ul ul ul ul > li {
    	background: #888;
    	box-shadow: 0 1px 0 #999 inset, 0 -1px 0 #777 inset;
    }
    Maintenant, l'ensemble des blocs du menu sont dans un ascenseur vertical...
    C'est... étrange...
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  19. #59
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 578
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 578
    Points : 21 181
    Points
    21 181

    Par défaut

    Bonjour,

    si je comprends bien, c'est moi qui fait tout !

    J'espère que j'aurrais au moins un bout de gateau d'anniversaire !

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    * {
    	margin: 0; padding: 0; border: 0;
    }
    /* ------------------------------- */
    /* MENU */
    #navMain {
    	max-width: 150px;
    	position: relative;
    	width: 100%;
    	margin: 0 auto;
    	font-family: Verdana, Arial;
    }
    #navMain ul, #navMain li, #navMain a {
    	position: relative;
    	padding: 0;
    	margin: 0;
    	border: 0;
    	text-decoration: none;
    }
    #navMain ul li {
    	display: block;
    }
    #navMain ul li a {
    	display: block;
    	color: #FFFFFF;
    	padding: 10px 10px;
    	position: relative;
    	text-shadow: 2px 1px 1px #000000; /* Ombrage */
    }
    /* --------------- */
    /* MENU : niveau 1 */
    #navMain > ul > li > a {
    	background: #FF8727;
    	box-shadow: 0 1px 0 #FF9D4F inset, 0 -1px 0 #DD6403 inset;
    }
    /* --------------- */
    /* MENU : niveau 1 ACTIF - Sous-Menu ouvert par defaut */
    #navMain > ul > li.active > a { background: #20638f; }
    /* --------------- */
    /* MENU : niveau 2 et suivants */
    #navMain ul ul > li > a {
    	padding-left: 20px; /* Ecarts gauches sous-menus */
    	font-size: 75%;
    }
    #navMain ul ul > li {
    	background: #333;
    	box-shadow: 0 1px 0 #444 inset, 0 -1px 0 #222 inset;
    }
    #navMain ul ul ul > li {
    	background: #444;
    }
    /* --------------- */
    /* hover */
    #navMain > ul > li:hover > a {
    	background: #DD6403;
    }
    #navMain ul li:hover {
    	background: #DD6403;
    	box-shadow: 0 1px 0 #FF9D4F inset, 0 -1px 0 #DD6403 inset;
    }
    /* --------------- */
    /* avec sous-menu */
    #navMain li.hasSub > ul {
      display:none; /* on masque */
    }
    /* ------------------------------- */
    /* fleche, avec rotation */
    #navMain .hasSub:after {
    	position: absolute;
    	content: '\25BC';
    	display: block;
    	font-size: 0.7em;
    	color: #fff;
    	top: 14px;
    	right: 10px;
    	cursor: pointer;
     
    	-o-transition: -o-transform 0.5s;
    	-ms-transform: rotate(0deg);
    	-moz-transform: rotate(0deg);
    	-moz-transition: -moz-transform 0.5s;
    	-webkit-transform: rotate(0deg);
    	-webkit-transition: -webkit-transform 0.5s;
    	transform: rotate(0deg);
    	transition: transform 0.5s;
    }
     
    #navMain .hasSub.open:after {
    	-o-transition: -o-transform 0.5s;
    	-ms-transform: rotate(180deg);
    	-moz-transform: rotate(180deg);
    	-moz-transition: -moz-transform 0.5s;
    	-webkit-transform: rotate(180deg);
    	-webkit-transition: -webkit-transform 0.5s;
    	transform: rotate(180deg);
    	transition: transform 0.5s;
    }
    /* ------------------------------- */
    /* SPECIAL : class active - menu actif */
    #navMain > ul > li.active > a { background: #DD6403; }
    On enlève du jQuery la partie "Scrollbar" (utile surtout pour un menu fixe, ce qui n'est pas ton cas) :
    Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    // Partie incluse par le fichier menu.js
    // ------------------------------------------------
    // 	jquery.dropdown.js	(depends on: jquery.hoverIntent.js)
    // ------------------------------------------------
    $.fn.dropdown = function(options) {
      var defaults = {};
      var opts = $.extend(defaults, options);
      // Apply class=hasSub on those items with children
      this.each(function() {
        $(this)
          .find("li")
          .each(function() {
            if ($(this).find("ul").length > 0) {
              $(this).addClass("hasSub");
            }
          });
      });
      return this;
    };
    // ------------------------------------------------
    // MENU MAIN
    $(function() {
      var navMainId = "#navMain";
      // -------------------
      // Calling the jquery dropdown
      $(navMainId).dropdown();
      // -------------------
      //Sous-Menu ouvert par defaut
      $(navMainId + " ul > li.active").addClass("open");
      $(navMainId + " ul > li.active > ul").slideDown("fast");
      // -------------------
      // ouverture/fermeture sous-menu (click/touch)
      $(navMainId + " ul > li").on("click", function(event) {
        event.stopPropagation(); /* important */
        $(this)
          .parent()
          .find("li:not(:hover)")
          .removeClass("open");
        $(this).toggleClass("open");
        $(this)
          .parent()
          .find("li:not(:hover) ul")
          .slideUp("fast");
        if ($(this).hasClass("hasSub")) {
          $(this)
            .children("ul")
            .slideToggle("fast");
        }
      });
      // -------------------
      // on desactive les liens des Menus AVEC Sous-Menus
      // (obligatoire pour Tablettes TACTILES / Smartphones)
      $(navMainId + " > ul > li.hasSub > a").on("click", function(event) {
        event.preventDefault();
      });
      // -------------------
    });
    // ------------------------------------------------
    // Fin de partie incluse par le fichier menu.js
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  20. #60
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    177
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 177
    Points : 50
    Points
    50

    Par défaut

    Vous avez mis le code complet pour JS et CSS ? Je veux dire, je copie/colle/remplace ?

    Bah, comme il me semble que vous soyez le créateur du dit menu, j'avoue profiter en effet de votre élan créatif. J'en profite pour essayer de comprendre le travail.
    Progressivement, je commenterais le code pour pérenniser l'ensemble.

    Je peux citer vos crédits sur le site.
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

Discussions similaires

  1. menu en html/css
    Par bouchra19 dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 03/07/2012, 12h37
  2. Menu vertical déroulant CSS
    Par Aedonya dans le forum Webdesign & Ergonomie
    Réponses: 5
    Dernier message: 23/01/2011, 22h31
  3. Menu vertical en CSS : dérouler en glissant
    Par Invité dans le forum Mise en page CSS
    Réponses: 0
    Dernier message: 19/06/2010, 13h33
  4. Modification d'un menu vertical HTML
    Par dudule0 dans le forum Mise en page CSS
    Réponses: 43
    Dernier message: 27/03/2008, 16h14
  5. [HTML+CSS] Problème de menu "dynamique"
    Par PierreAd dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 06/04/2005, 13h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo