1. #1
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    158
    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 : 158
    Points : 46
    Points
    46

    Par défaut menu vertical HTML - CSS

    Salutations,

    Je butte sur un code pompé à droite à gacuhe qui me gère un menu déroulant en CSS.
    Coté menu, il fonctionne, par contre, des que j'ajoute un tag A (d'ou l'interet en fait d'un menu), jen 'ai que le texte de l'option de menu cliquable, et non le DIV ensntier.

    J'ai bien essayé 36 manips, mais rien de géant.

    Voici un bout du code :

    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
    18
    19
    20
    (...)
    <nav id="main_menu_nav">
    	<div id="link">
    		<h3><a href="#>">Accueil</a></h3>
    	</div>
    	<div id="cat1">
    		<h3>Association</h3>
    		<input type="checkbox" id="Association" />
    		<label for="Association"></label>
    		<ul>
    			<li class="transition_css"><a id="link" href="#>">Qui sommes-nous ?</a></li>
    			<li class="transition_css">Adhésion</li>
    			<li class="transition_css">Nos Actions</li>
    			<li class="transition_css">Références</li>
    			<li class="transition_css">Aidez-nous</li>
    			<li class="transition_css">Liens</li>
    		</ul>
    	</div>
    </nav>
    (...)
    Et CSS correspondant :

    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
    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
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    (...)
    	@charset "UTF-8";
    	/* Stylesheet */
     
    	body, div, a, ul, li, input, h1, h2, h3, h4, h5, h6, label {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	float: none;
    	-webkit-font-smoothing: auto;
    	}
     
    	/* Bloc menu */
    	nav {
    		font-family: Verdana, Arial;
    		font-size: 14px;
    		width: 150px;
    		height: auto;
    		position: fixed; /* Make it stick, even on scroll */
    	}
     
    	h3 {
    		background: #FF8727;
    		padding: 8px;
    		padding-left: 10px; /* Marge gauche */
    		position: relative;
    		color: #FFFFFF;
    		text-shadow: 2px 1px 1px #000000; /* Ombrage */
    		border: 0px;
    	}
     
    	h3:hover {
    		background: #CCCCCC;
    		color: #FF8727;
    	}
     
    	/* Sous-bloc */
    	ul {
    		height: auto;
    		display: none;
    	}
     
    	/* Lignes de sous-bloc */
    	li {
    		color: #FF8727;
    		background: #FFFFFF;
    		padding: 10px;
    		padding-left: 20px;
    		border-bottom: 1px solid #FF8727;
    		list-style: none;
    	}
     
    	li:hover {
    		color: #CCCCCC;
    		background: #FF8727;
    	}
     
    	li:last-child {
    		border-bottom: none;
    	}
     
    	a {
    		text-decoration: none;
    	}
     
    	a:link, a:visited {
    		color: #FFFFFF;
    	}
     
    	/* Lignes de sous-bloc */
    	li a {
    		font-size: 80%;
    	}
     
    	li a:link, a:visited {
    		color: #FF8727;
    	}
     
    	a:hover, li a:hover {
    		color: #CCCCCC;
    		border-radius: 5px;
    	}
     
    	#cat1, #cat2, #cat3, #cat4, #cat5 {
    		position: relative;
    	}
     
    	#cat1 [type="checkbox"]:checked + label + ul, #cat2 [type="checkbox"]:checked + label + ul, #cat3 [type="checkbox"]:checked + label + ul, #cat4 [type="checkbox"]:checked + label + ul, #cat5 [type="checkbox"]:checked + label + ul {
    		display: block;
    	}
     
    	#up {
    		display: block;
    	}
     
    	#link, #link a {
    		display: block;
    	}
     
    	/* Coche */
    	/* Cachons la case à cocher */
    	#main_menu_nav [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    		position: absolute;  
    		left: -9999px;  
    	}
     
    	/* on prépare le label */
    	#main_menu_nav [type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {
    		padding-left: 150px;
    		padding-bottom: 36px;
    		left: 0;
    		top: 0;
    		cursor: pointer;
    		position: absolute;
    	}
     
    	/* Aspect général de la coche */
    	#main_menu_nav [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {
    		content: '\25bc';
    		position: absolute;
    		top: 10px;
    		right: 10px;
    		font-size: 14px;
    		color: #CFCAC5;
    		transition: all .2s; /* Coloration de la coche */
    	}
     
    	#main_menu_nav label:before {
    		opacity: 0;
    	}
     
    	/* Aspect si "pas cochée" */
    	#main_menu_nav [type="checkbox"]:not(:checked) + label:after {
    		opacity: 0; /* coche invisible */
    		transform: scale(0); /* mise à l'échelle à 0 */
    		-webkit-transform: scale(0);
    		-moz-transform: scale(0);
    		-o-transform: scale(0);
    		-ms-transform: scale(0);
    	}
     
    	/* Aspect si "cochée" */  
    	#main_menu_nav [type="checkbox"]:checked + label:after {
    		opacity: 1; /* coche opaque */
    		transform: scale(1); /* mise à l'échelle 1:1 */
    		-webkit-transform: scale(1);
    		-moz-transform: scale(1);
    		-o-transform: scale(1);
    		-ms-transform: scale(1);
    	}
     
    	#main_menu_nav label:hover:before {
    		content: '\25bc';
    		position: absolute;
    		top: 10px;
    		right: 10px;
    		font-size: 14px;
    		color: #FFFFFF;
    		transition: all .2s;
    		opacity: 1; /* coche opaque */
    	}
     
    	/* Coloration des sous-menus */
    	.transition_css {
    		transition: all .4s ease-out;
    		-webkit-transition : all .4s ease-out;
    		-moz-transition: all .4s ease-out;
    		-o-transition: all .4s ease-out;
    		-ms-transition: all .4s ease-out;
    	}
    (...)
    Any idea ?
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 196
    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 196
    Points : 20 283
    Points
    20 283

    Par défaut

    Bonjour,

    que veux-tu qu'on puisse tester avec des bouts de code tronqués ?
    "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.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    158
    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 : 158
    Points : 46
    Points
    46

    Par défaut

    Désolé, je pensais que mon pb était suffisamment détaillé pour que vous trouviez le hic sans test...
    Je voulais pas flooder avec des tonnes de codes garbage.

    J'ai modifié le post du dessus.
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  4. #4
    Membre averti
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    343
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 343
    Points : 431
    Points
    431

    Par défaut

    Je trouve curieux cette manière de faire un menu vertical (assez simple) de cette façon en mixant des <div>, des <h3> alors que tout devrait tenir dans une simple liste à puce unordered.
    Prendre à gauche et à droite des idées est excellent, mais j'ai du mal à comprendre la logique de ce menu.
    Aie aie aie, Jreaux62 va me démolir j'ai encore rien compris! mais j'ai pas fait d'usine à gaz, moi, pour une fois!

    Ouais, mais c'est quoi un tag A et son intérêt??

  5. #5
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    158
    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 : 158
    Points : 46
    Points
    46

    Par défaut

    J'ai longtemps cherché un code simple et que je puisse comprendre pour un menu vertical déroulant... Celui-ci n'est pas parfait, mais je commençais à le comprendre...
    Sauf qu'il me restait à bloquer l'ouverture de plusieurs sous-menus et surtout rendre les éléments cliquables.

    Si maintenant vous avez un conseil ou un autre code à me proposer, je suis preneur.
    Je mettais en avant la légèreté et pas de JS.
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  6. #6
    Membre averti
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    343
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 343
    Points : 431
    Points
    431

    Par défaut

    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
    * {
    	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
    }
    body {
    	font-family: "Times New Roman", Times, serif;
    	font-size: 100%;
    }
    h1	{
    	text-align:center;
    }
    /* =====================================================================================*/
    nav {
     
    }
    nav > ul {
    	width: 306px;
    	margin:0 auto;
    }
    nav ul {
    	list-style-type: none;
    	padding:0; 		
    }
    nav a {	
    	width: 100px;	
    	display: inline-block;
    	line-height: 38px;
    	font-size: 16px;
    	text-align: center;
    	background-color: #F90;
    	color: #000;
    	text-decoration: none;
    }
    /* =====================================================================================*/
    /* ==============            définition du premier niveau          =====================*/
    /* =====================================================================================*/
    nav > ul > li {
    	float:left;						
    	border-right: 2px solid transparent;
    }
    nav li ul li {
    	border-top : 2px solid transparent;		
    }
    nav li 		{
    	position:relative;
    }
    nav li ul {
    	position: absolute;
    	z-index:999;			
    }
    nav li ul ul {
    	margin : -40px 0 0 100px;
    }
    nav li ul ul 	{
    	border-left:2px solid transparent;
    }
    nav li ul,
    nav li:hover ul ul 		{
    	display: none;	
    }
    nav li:hover ul,
    nav ul ul li:hover ul  {
    	display: block;							
    }
    nav a:hover {
    	background: #900;
    	color:#fff;
    	text-decoration: underline;	
    }
    Et une liste à puce sur 3 niveaux ...
    Code html : 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
    <nav>
      <ul>
        <li><a href="#">Item 1</a>
          <ul>
            <li><a href="#">Item 1.1</a>
              <ul>
                <li><a href="#">Item 1.1.1</a></li>
                <li><a href="#">Item 1.1.2</a></li>
                <li><a href="#">Item 1.1.3</a></li>
              </ul>
            </li>
            <li><a href="#">Item 1.2</a>
              <ul>
                <li><a href="#">Item 1.2.1</a></li>
                <li><a href="#">Item 1.2.2</a></li>
                <li><a href="#">Item 1.2.3</a></li>
              </ul>
            </li>
            <li><a href="#">Item 1.3</a>
              <ul>
                <li><a href="#">Item 1.3.1</a></li>
                <li><a href="#">Item 1.3.2</a></li>
                <li><a href="#">Item 1.3.3</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Item 2</a>
          <ul>
            <li><a href="#">Item 2.1</a>
              <ul>
                <li><a href="#">Item 2.1.1</a></li>
                <li><a href="#">Item 2.1.2</a></li>
                <li><a href="#">Item 2.1.3</a></li>
              </ul>
            </li>
            <li><a href="#">Item 2.2</a>
              <ul>
                <li><a href="#">Item 2.2.1</a></li>
                <li><a href="#">Item 2.2.2</a></li>
                <li><a href="#">Item 2.2.3</a></li>
              </ul>
            </li>
            <li><a href="#">Item 2.3</a>
              <ul>
                <li><a href="#">Item 2.3.1</a></li>
                <li><a href="#">Item 2.3.2</a></li>
                <li><a href="#">Item 2.3.3</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Item 3</a>
          <ul>
            <li><a href="#">Item 3.1</a>
              <ul>
                <li><a href="#">Item 3.1.1</a></li>
                <li><a href="#">Item 3.1.2</a></li>
                <li><a href="#">Item 3.1.3</a></li>
              </ul>
            </li>
            <li><a href="#">Item 3.2</a>
              <ul>
                <li><a href="#">Item 3.2.1</a></li>
                <li><a href="#">Item 3.2.2</a></li>
                <li><a href="#">Item 3.2.3</a></li>
              </ul>
            </li>
            <li><a href="#">Item 3.3</a>
              <ul>
                <li><a href="#">Item 3.3.1</a></li>
                <li><a href="#">Item 3.3.2</a></li>
                <li><a href="#">Item 3.3.3</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
    Et cela devrait aussi fonctionner avec 4 ou 5 niveaux si on rajoute le css pour display:none et display:block
    désolé, pas le temps de mettre des commentaires au css ce matin.

    ps: j'ai toujours pas compris ce qu'est un tag A?

  7. #7
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    158
    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 : 158
    Points : 46
    Points
    46

    Par défaut

    Merci, en effet, ç a à l'air plus léger... Je viens de tester, très fluide.

    Par contre, ce n'est pas un vertical. Comment l'adapter ?
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  8. #8
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 196
    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 196
    Points : 20 283
    Points
    20 283

    Par défaut

    Bonjour,

    en reprenant le code HTML de JefReb :
    Code html : 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
    <nav>
      <ul>
        <li><a href="#">Item 1</a>
          <ul>
            <li><a href="#">Item 1.1</a>
              <ul>
                <li><a href="#">Item 1.1.1</a></li>
                <li><a href="#">Item 1.1.2</a></li>
                <li><a href="#">Item 1.1.3</a></li>
              </ul>
            </li>
            <li><a href="#">Item 1.2</a>
              <ul>
                <li><a href="#">Item 1.2.1</a></li>
                <li><a href="#">Item 1.2.2</a></li>
                <li><a href="#">Item 1.2.3</a></li>
              </ul>
            </li>
            <li><a href="#">Item 1.3</a>
              <ul>
                <li><a href="#">Item 1.3.1</a></li>
                <li><a href="#">Item 1.3.2</a></li>
                <li><a href="#">Item 1.3.3</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Item 2</a>
          <ul>
            <li><a href="#">Item 2.1</a>
              <ul>
                <li><a href="#">Item 2.1.1</a></li>
                <li><a href="#">Item 2.1.2</a></li>
                <li><a href="#">Item 2.1.3</a></li>
              </ul>
            </li>
            <li><a href="#">Item 2.2</a>
              <ul>
                <li><a href="#">Item 2.2.1</a></li>
                <li><a href="#">Item 2.2.2</a></li>
                <li><a href="#">Item 2.2.3</a></li>
              </ul>
            </li>
            <li><a href="#">Item 2.3</a>
              <ul>
                <li><a href="#">Item 2.3.1</a></li>
                <li><a href="#">Item 2.3.2</a></li>
                <li><a href="#">Item 2.3.3</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Item 3</a>
          <ul>
            <li><a href="#">Item 3.1</a>
              <ul>
                <li><a href="#">Item 3.1.1</a></li>
                <li><a href="#">Item 3.1.2</a></li>
                <li><a href="#">Item 3.1.3</a></li>
              </ul>
            </li>
            <li><a href="#">Item 3.2</a>
              <ul>
                <li><a href="#">Item 3.2.1</a></li>
                <li><a href="#">Item 3.2.2</a></li>
                <li><a href="#">Item 3.2.3</a></li>
              </ul>
            </li>
            <li><a href="#">Item 3.3</a>
              <ul>
                <li><a href="#">Item 3.3.1</a></li>
                <li><a href="#">Item 3.3.2</a></li>
                <li><a href="#">Item 3.3.3</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

    MENU VERTICAL - sous-menus à droite : https://codepen.io/jreaux62/pen/wrxoxv
    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
    * {
    	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
    }
    /* --------------- */
    nav {
    	z-index:999;			
    }
    nav > ul {
    	max-width:240px; /* à adapter*/
      display:-webkit-flex; display:flex;
      -webkit-flex-direction:column; flex-direction:column; /* MENU VERTICAL */
      -webkit-justify-content:center; justify-content:center; 
    	margin:0 auto;
    }
    nav ul, nav li {
    	position: relative;
    	list-style-type: none;
    	padding:0; 		
    }
    nav a {	
    	display: block;
    	font-size: 1em;
      padding:10px;
    	text-align: center;
    	background-color: #F90;
    	color: #000;
    	text-decoration: none;
      font-family:Arial,sans-serif;
    }
    /* --------------- */
    /* MENU - niveau 1 */
    /* (rien de nécessaire ICI )*/
    /* --------------- */
    /* MENU - niveau 2 et suivants */
    nav > ul ul {
    	position: absolute; /* SOUS-MENU sur le coté */
    	width:100%;
    	top:0;
    	left:100%; /* à droite */
    }
    nav > ul ul 	{
    	display: none; /* on masque */
    }
    nav > ul ul a {	
    	background-color: #Fb0;
    }
    nav > ul ul ul a {	
    	background-color: #Fe0;
    }
    /* --------------- */
    /* hover */
    nav li:hover > ul  {
    	display: block; /* on affiche */			
    }
    nav a:hover {
    	background: #900;
    	color:#fff;
    	text-decoration: underline;	
    }

    MENU HORIZONTAL - sous-menus dessous : https://codepen.io/jreaux62/pen/EwpNpb
    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
    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
    * {
    	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
    }
    /* --------------- */
    nav {
    	z-index:999;	
    }
    nav > ul {
      display:-webkit-flex; display:flex;
      -webkit-flex-direction:row; flex-direction:row; /* MENU HORIZONTAL */
      -webkit-justify-content:center; justify-content:center; 
    	margin:0 auto;
    }
    nav ul, nav li {
    	position: relative;
      min-width:120px; /* a adapter */
    	list-style-type: none;
    	padding:0; 		
    }
    nav a {	
    	display: block;
    	font-size: 1em;
      padding:10px;
    	text-align: center;
    	background-color: #F90;
    	color: #000;
    	text-decoration: none;
      font-family:Arial,sans-serif;
    }
    /* --------------- */
    /* MENU - niveau 1 */
    /* (rien de nécessaire ICI )*/
    /* --------------- */
    /* MENU - niveau 2 */
    nav > ul ul {
    	position: absolute; /* SOUS-MENU sur le coté */
    	width:100%;
    	top:100%; /* SOUS le menu */
    	left:0; /* SOUS le menu */
    }
    /* MENU - niveau 3 et suivants */
    nav > ul ul ul {
    	position: absolute; /* SOUS-MENU sur le coté */
    	width:100%;
    	top:0;
    	left:100%; /* à droite */
    }
     
    nav > ul ul 	{
    	display: none; /* on masque */
    }
    nav > ul ul a {	
    	background-color: #Fb0;
    }
    nav > ul ul ul a {	
    	background-color: #Fe0;
    }
    /* --------------- */
    /* hover */
    nav li:hover > ul  {
    	display: block; /* on affiche */			
    }
    nav a:hover {
    	background: #900;
    	color:#fff;
    	text-decoration: underline;	
    }
    Je pense avoir optimisé / simplifié les codes au maximum.

    Pour un MENU TACTILE (qui fonctionne au clic et pas au hover) : https://codepen.io/jreaux62/pen/dPxKKQ
    "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.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  9. #9
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    158
    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 : 158
    Points : 46
    Points
    46

    Par défaut

    Merci à tous de vos aides.

    Par contre, il me fallait un menu déroulant INTEGRE au menu... que celui-ci se déroule en bougeant verticalement le reste du menu.
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  10. #10
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 196
    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 196
    Points : 20 283
    Points
    20 283

    Par défaut

    Rien ne t'empêche de le mettre dans un <li>.
    "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.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  11. #11
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    158
    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 : 158
    Points : 46
    Points
    46

    Par défaut

    C'est en fait la raison pour laquelle j'avais pompé ces bouts de codes... Je ne sais pas le faire.
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  12. #12
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 196
    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 196
    Points : 20 283
    Points
    20 283

    Par défaut

    Relis les "explications" que tu as données.

    Tu penses vraiment qu'on peut comprendre ce que tu veux faire / obtenir ?


    Montre un dessin, un shéma,...... bref : ce n'est pas clair.
    "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.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  13. #13
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    158
    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 : 158
    Points : 46
    Points
    46

    Par défaut

    Simplement, voici le test actuel :
    -=> http://wda-fr.org/includes/menu.php

    Ne soyez pas agressifs.
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  14. #14
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 196
    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 196
    Points : 20 283
    Points
    20 283

    Par défaut

    Il a l'air très bien ton menu !

    Par contre, il MANQUE juste les liens :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    			<li class="transition_css"><a href="#">Vie des collections</a></li>
    			<li class="transition_css">Bases de données</li>
    ....
    Il suffit de les AJOUTER :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    			<li class="transition_css"><a href="url-de-la-page-vie-des-collections.php">Vie des collections</a></li>
    			<li class="transition_css"><a href="url-de-la-page-bases-de-donnees.php">Bases de données</a></li>
    Du coup, je ne comprends toujours pas quel est le problème....
    "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.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  15. #15
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 196
    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 196
    Points : 20 283
    Points
    20 283

    Par défaut

    Citation Envoyé par jreaux62 Voir le message
    Pour un MENU TACTILE (qui fonctionne au clic et pas au hover) : https://codepen.io/jreaux62/pen/dPxKKQ
    "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.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  16. #16
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    158
    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 : 158
    Points : 46
    Points
    46

    Par défaut

    Oui, non,... Bon... On reprends :

    Oui, il rends bien pour l'instant, si ce n'est :

    1/ Justement, les liens sont juste cliquables SUR le texte et non sur l'ensemble du DIV (Question de base).
    2/ Je cherche a faire en sorte qu'un des sous-menus ( "Association") soit ouvert d'office, quitte a etre refermable par la suite.
    3/ Je cherche enfin a faire en sorte que l'ouverture d'un sous-menu en ferme un autre, voir les autres... Sinon, ca va etre un menu vertical trop long...
    4/ Je cherche le code le plus fluide, pérenne et léger possible.

    Ensuite, le travail suivant sera de le rendre responsive, en effet... C'est même le but de la refonte du site ( http://wda-fr.org ).
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  17. #17
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 196
    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 196
    Points : 20 283
    Points
    20 283

    Par défaut

    Citation Envoyé par Casio Voir le message
    ...et non sur l'ensemble du DIV...
    Tu es bien brave, je sais lire... mais ça ne veut rien dire... : QUEL DIV ???
    Montre-nous ça sur une capture d'écran !


    Et je pense avoir fourni (2 fois !) un lien vers un menu qui répond à toute ta problématique...
    "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.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  18. #18
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    158
    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 : 158
    Points : 46
    Points
    46

    Par défaut

    Désolé, encore une fois, je sens bien qu'a nouveau le ton devient agressif...

    D'un coté, vous me dites que le menu actuel est bon, de l'autre vous me dites que vous m'avez fourni un autre code correspondant mieux... Heu ?

    Sinon, quand je parle du DIV, et c'était la question initiale donc, je parle par exemple de celui du menu principal ""Accueil", puis par la suite des LI des sous-menus.
    Actuellement, seuls les tag A HREF (désolé, j'avais omis de rajouter HREF, je pensais que vous comprendriez ma requête) sont cliquables, et non l 'ENSEMBLE DE LA CASE (si cela peut convenir mieux que DIV ou LI).

    Encore une fois, je suis ici pour demander de l'aide, si c'est pour me faire sermonner, je ne vois pas l'intérêt du forum. D'autant plus que mets clairement les mains dans le cambouis...
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  19. #19
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 196
    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 196
    Points : 20 283
    Points
    20 283

    Par défaut

    1/ Contrairement au tien, le mien répond aux 4 contraintes demandées.

    2/ "tag A".... : C'est justement ce "tag" <a> qui EST le LIEN CLIQUABLE, capable de renvoyer sur une autre page !
    S'il n'y a PAS de "tag A", il n'y a PAS de lien...
    "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.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  20. #20
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 196
    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 196
    Points : 20 283
    Points
    20 283

    Par défaut

    Citation Envoyé par Casio Voir le message
    ...les liens sont juste cliquables SUR le texte et non sur l'ensemble du DIV...
    [EDIT] OK. Vu sur "Accueil"...

    solution 1 :
    il faut changer :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <h3><a href="http://wda-fr.org>">Accueil</a></h3>
    par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <a href="http://wda-fr.org>"><h3>Accueil</h3></a>
    Car tu as un padding sur les <h3> !

    solution 2 :
    1/ garder
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <h3><a href="http://wda-fr.org>">Accueil</a></h3>
    Mais ENLEVER le padding sur les <h3> et le mettre sur les h3 a.
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    h3 {
    		padding: 0;
    	}
    h3 a {
    		padding: 8px;
    	}

    En fait, RIEN à voir avec tout le reste....

    Cela dit, des balises <h3> n'ont rien à faire dans un menu.
    "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.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

Discussions similaires

  1. Réponses: 2
    Dernier message: 19/11/2014, 13h23
  2. Find & replace sur un ensemble de fichiers
    Par totofweb dans le forum Shell et commandes GNU
    Réponses: 14
    Dernier message: 23/12/2005, 14h29
  3. Réponses: 4
    Dernier message: 15/11/2005, 18h53
  4. [JDBC] Opération non valide sur un ensemble
    Par marti dans le forum JDBC
    Réponses: 2
    Dernier message: 13/10/2005, 19h17
  5. faire un effet de transparence sur un bloc div ?
    Par piff62 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 08/03/2005, 00h04

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