IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Menu vertical HTML - CSS


Sujet :

CSS

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

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

    Informations forums :
    Inscription : Novembre 2005
    Messages : 312
    Points : 59
    Points
    59
    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.
    https://wda-fr.org - https://mathieu.charreyre.net

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    que veux-tu qu'on puisse tester avec des bouts de code tronqués ?

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

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

    Informations forums :
    Inscription : Novembre 2005
    Messages : 312
    Points : 59
    Points
    59
    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.
    https://wda-fr.org - https://mathieu.charreyre.net

  4. #4
    Membre éclairé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    Juin 2012
    Messages
    519
    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 : 519
    Points : 705
    Points
    705
    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
    312
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Paris (Île de France)

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

    Informations forums :
    Inscription : Novembre 2005
    Messages : 312
    Points : 59
    Points
    59
    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.
    https://wda-fr.org - https://mathieu.charreyre.net

  6. #6
    Membre éclairé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    Juin 2012
    Messages
    519
    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 : 519
    Points : 705
    Points
    705
    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
    312
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Paris (Île de France)

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

    Informations forums :
    Inscription : Novembre 2005
    Messages : 312
    Points : 59
    Points
    59
    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.
    https://wda-fr.org - https://mathieu.charreyre.net

  8. #8
    Invité
    Invité(e)
    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

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

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

    Informations forums :
    Inscription : Novembre 2005
    Messages : 312
    Points : 59
    Points
    59
    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.
    https://wda-fr.org - https://mathieu.charreyre.net

  10. #10
    Invité
    Invité(e)
    Par défaut
    Rien ne t'empêche de le mettre dans un <li>.

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

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

    Informations forums :
    Inscription : Novembre 2005
    Messages : 312
    Points : 59
    Points
    59
    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.
    https://wda-fr.org - https://mathieu.charreyre.net

  12. #12
    Invité
    Invité(e)
    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.

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

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

    Informations forums :
    Inscription : Novembre 2005
    Messages : 312
    Points : 59
    Points
    59
    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.
    https://wda-fr.org - https://mathieu.charreyre.net

  14. #14
    Invité
    Invité(e)
    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....

  15. #15
    Invité
    Invité(e)
    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
    Dernière modification par Invité ; 12/10/2017 à 13h47.

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

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

    Informations forums :
    Inscription : Novembre 2005
    Messages : 312
    Points : 59
    Points
    59
    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.
    https://wda-fr.org - https://mathieu.charreyre.net

  17. #17
    Invité
    Invité(e)
    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...

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

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

    Informations forums :
    Inscription : Novembre 2005
    Messages : 312
    Points : 59
    Points
    59
    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.
    https://wda-fr.org - https://mathieu.charreyre.net

  19. #19
    Invité
    Invité(e)
    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...
    Dernière modification par Invité ; 12/10/2017 à 15h25.

  20. #20
    Invité
    Invité(e)
    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.

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 Invité 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