1. #1
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    319
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 319
    Points : 48
    Points
    48

    Par défaut Ajouter un niveau au menu

    Bonjour,

    J'ai un menu auquel je recherche un code pour rajouter un niveau.
    Voici mon 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
    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
    <title>Un menu vertical </title>
     
                                  <style>
                                body{background: #000;}
                                #menu
                                { position: absolute;top: 80px;width:0;
                                }
                                #menu li
                                {position:relative;list-style:none;
                                }
                                #menu > li
                                {margin:0 0 25px 0;height:80px;left:-30px;font-size: 12px;
                                }
                                #menu > li > a 
                                {position:relative;display:inline-block;height:0px;width:0px;background-color:green;left:-35px;top:15px;
                                }
                                #menu > li > a span 
                                {-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-o-transform: rotate(-90deg);transform: rotate(-90deg);writing-mode: lr-tb;display:inline-block;background-color:#171515;text-align:center;color:red;/*police titre*/padding:10px 10px;width:80px;
                                }
                                #menu > li > ul
                                {position:absolute;display:none;top:-17px;left:0px;
                                }
     
                                #menu > li:hover > ul
                                {display:block;clear:both;
                                }
                                #menu > li > ul > li
                                {
                                }
                                #menu > li > ul > li > a
                                {display:inline-block;width:120px;background-color:#000;color:white;/*police hover*/padding:2px 10px;margin:2px 0 0;text-decoration:none;
                                }
                                #menu > li > ul > li:hover > a
                                {background-color:red;/*fond hover*/
                                    color:#ffffff;/*police hover passage curseur*/
                                }
     
    </style>
     
    </head>
    <body>
     
    <main>        
    <div id="menu">
     
        <ul id="menu">
                <li><a href="..."><span>Afrique</span></a>
                    <ul>
                  <li class="sous-menu"><a href="Afrique_du_Sud.html">Afrique du Sud</a></li>
                  <li class="sous-menu"><a href="Algérie.html">Algérie</a></li>
                  <li class="sous-menu"><a href="Angola.html">Angola</a></li>
                  <li class="sous-menu"><a href="Bénin.html">Bénin</a></li>
                  <li class="sous-menu"><a href="Botswana.html">Botswana</a></li>
                  <li class="sous-menu"><a href="Burkina_Faso.html">Burkina Faso </a></li>
                  <li class="sous-menu"><a href="Burundi.html">Burundi </a></li>
                  <li class="sous-menu"><a href="Cameroun.html">Cameroun </a></li>
                  <li class="sous-menu"><a href="Cap-Vert.html"> Cap-Vert</a></li>
                  <li class="sous-menu"><a href="République_centrafricaine.html">République centrafricaine </a></li>
     
     
                    </ul>
                </li>
     
            </ul>
     
      </div> </main>
    Je vous remercie de votre aide

    Cordialement

    Max

  2. #2
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    319
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 319
    Points : 48
    Points
    48

    Par défaut

    Bonjour,

    Dans mon menu j'ai deux niveaux, le 1er "Continent" le second les "Pays"du continent, j'aimerais avoir un troisième niveau en relation avec les pays

    Voila alors j'ai fait ceci qui me parait pas mal.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
           <li><a href="..."><span>Europe</span></a>
                    <ul class="scrollbar"id="style-2" >
     
      <li class="sous-menu"><a href="Albanie.html">Albanie </a>
     
                   <ul class="rang3">
                                <li><a href="#">Hauts de france</a></li>
    							<li><a href="#">Sous-menuxxx 4.1.2</a></li>
    							<li><a href="#">Sous-menuxxx 4.1.3</a></li>
     
                        </ul>  </li>   
     
        </ul></li>

    Le problème est que je n'arrive pas à configurer le Css.

    Je vous remercie de votre aide

    Max

  3. #3
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    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 : 373
    Points : 478
    Points
    478

    Par défaut

    Voici un code qui fonctionne, même pour encore un autre niveau supplémentaire sans rajouter du css.
    Toutefois, c'est le premier niveau vertical qui me pose un problème et comme cela m'intéresse je suis en train de chercher.
    Mais tout de suite voici une solution.
    J'essaye toujours de simplifier en utilisant les balises html5 (<nav> ) et en évitant au maximum l'utilisation de classe.
    Comme tu peux le voir c'est très facile.
    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
    * {
    	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
    }
    body {
    	font-family: "Times New Roman", Times, serif;
    	font-size: 100%;
    }
    nav {
    	margin-top:50px;
    }
    nav > ul {
    	width: 20px;
    }
    nav ul {
    	list-style-type: none;
    	padding: 0;
     
    }
    nav a {
    	width: 120px;
    	line-height: 20px;
    	font-size:12px;
    	display: inline-block;
    	text-align: center;
    	background-color: #000;
    	color: #fff;
    	text-decoration: none;
    }
    nav > ul > li > a {
    /*	-webkit-transform: rotate(-90deg);
    	transform: rotate(-90deg);
    	writing-mode: lr-tb;*/
    	background-color: #171515;
    	color: red;
    	width: 80px;
    	height:20px;
    }
    nav li {
    	position: relative;
    }
    nav li ul {
    	position: absolute;
    	left: 80px;
    	top: -2px;	
    }
    nav li {
    	border-top: 2px solid transparent;
    }
    nav li ul {
    	border-left: 2px solid transparent;
    }
    nav > ul ul {
    	display: none; 					/* on masque */
    }
    nav li:hover > ul {
    	display: block; 				/* on affiche */
    }
    nav a:hover {
    	background-color: red;
    	color: #fff;
    }
    nav > ul > li > a:hover {
    	background-color: #171515; /* pas de changement pour le premier niveau */
    	color: red;
    }

    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
    <main>
      <nav>
        <ul>
          <li><a href="...">Afrique</a>
            <ul>
              <li><a href="#">Afrique du Sud</a></li>
              <li><a href="#">Algérie</a></li>
              <li><a href="#">Angola</a></li>
              <li><a href="#">Bénin</a></li>
              <li><a href="#">Botswana</a></li>
              <li><a href="#">Burkina Faso </a></li>
              <li><a href="#">Burundi </a></li>
              <li><a href="#">Cameroun </a></li>
              <li><a href="#"> Cap-Vert</a></li>
              <li><a href="#">République centrafricaine </a></li>
            </ul>
          </li>
          <!--==========================================-->
          <li><a href="...">Europe</a>
            <ul>
              <li><a href="#">Albanie </a>
                <ul>
                  <li><a href="#">Hauts de france</a></li>
                  <li><a href="#">Sous-menuxxx 4.1.2</a></li>
                  <li><a href="#">Sous-menuxxx 4.1.3</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <!--============================================-->
        </ul>
      </nav>
    </main>

    Pour l'instant je cherche pour le premier niveau vertical. Si tu as la réponse, n'oublie pas de la mettre dans le forum pour que tous en profite.

  4. #4
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    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 : 373
    Points : 478
    Points
    478

    Par défaut

    Bon je pense avoir trouvé, mais il est peut être possible de simplifier le vertical.
    (J'espère que Jreax62 ne dira pas que c'est une usine à gaz ...

    Voir: https://codepen.io/JefReb/pen/eeNJQV

    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
    * {
    	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
    }
    body {
    	font-family: "Times New Roman", Times, serif;
    	font-size: 100%;
    }
    nav {
    	margin-top:50px;
    }
    nav > ul {
    	/*width: 20px;*/
    }
    nav ul {
    	list-style-type: none;
    	padding: 0;
     
    }
    nav li {
    	position: relative;
    }
    nav > ul > li  {
    	margin: 0 0 25px 0;
    	height: 80px;
    }
    nav a {
    	width: 120px;
    	line-height: 20px;
    	font-size:12px;
    	display: inline-block;
    	text-align: center;
    	background-color: #000;
    	color: #fff;
    	text-decoration: none;
    }
    nav > ul > li > a {
    	position: relative;
    	left: -35px;
    	top: 15px;
    	display: inline-block;
    	height: 0px;
    	width: 0px;
    	-webkit-transform: rotate(-90deg);
    	transform: rotate(-90deg);
    	writing-mode: lr-tb;
    	background-color: #171515;
    	color: red;
    	width: 80px;
    	height:20px;
    }
    nav li ul {
    	position: absolute;
    	left: 120px;
    	top: -2px;
    	z-index:999;
    }
    nav > ul > li > ul {
    	left: 18px;	
    }
    nav li {
    	border-top: 2px solid transparent;
    }
    nav li ul {
    	border-left: 2px solid transparent;
    }
    nav > ul ul {
    	display: none; 					/* on masque */
    }
    nav li:hover > ul {
    	display: block; 				/* on affiche */
    }
    nav a:hover {
    	background-color: red;
    	color: #fff;
    }
    nav > ul > li > a:hover {
    	background-color: #171515; /* pas de changement pour le premier niveau */
    	color: red;
    }

  5. #5
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    319
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 319
    Points : 48
    Points
    48

    Par défaut

    Salut JefReb

    Super! je pense que je ferais avec sa.
    Je vais voir avec tous les pays si sa tombe bien et je te tiens courant

    Je te remercie beaucoup et si tu trouve autre chose je suis preneur.

    Merci et bonne journée

    Max

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

    Par défaut

    Bonjour,

    Il faut penser à enlever (ou désactiver) les liens des menus qui ont un sous-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.
    "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

  7. #7
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    319
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 319
    Points : 48
    Points
    48

    Par défaut

    Bonjour jreaux62,

    Ha effectivement, j'avais repris le code d'apf1 sans corriger:
    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
    <main>
      <nav>
        <ul>
          <li><a href="#">Afrique</a>
            <ul>
              <li><a href="#">Afrique du Sud</a></li>
              <li><a href="#">Algérie</a></li>
              <li><a href="#">Angola</a></li>
              <li><a href="#">Bénin</a></li>
              <li><a href="#">Botswana</a></li>
              <li><a href="#">Burkina Faso </a></li>
              <li><a href="#">Burundi </a></li>
              <li><a href="#">Cameroun </a></li>
              <li><a href="#"> Cap-Vert</a></li>
              <li><a href="#">République centrafricaine </a></li>
            </ul>
          </li>
          <!--==========================================-->
          <li><a href="#">Europe</a>
            <ul>
              <li><a href="#">Albanie </a>
                <ul>
                  <li><a href="#">Hauts de france</a></li>
                  <li><a href="#">Sous-menuxxx 4.1.2</a></li>
                  <li><a href="#">Sous-menuxxx 4.1.3</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <!--============================================-->
        </ul>
      </nav>
    </main>

    Mais ce qui me "chagrine", c'est de ne pas arriver à simplifier le premier niveau vertical perpendiculaire.

    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
    nav li {
    	position: relative;
    }
    nav > ul > li  {
    	margin: 0 0 25px 0;
    	height: 80px;
    }
    nav a {
    	width: 120px;
    	line-height: 20px;
    	font-size:12px;
    	display: inline-block;
    	text-align: center;
    	background-color: #000;
    	color: #fff;
    	text-decoration: none;
    }
    nav > ul > li > a {
    	position: relative;
    	left: -35px;
    	top: 15px;
    	display: inline-block;
    	height: 0px;
    	width: 0px;
    	-webkit-transform: rotate(-90deg);
    	transform: rotate(-90deg);
    	writing-mode: lr-tb;
    	background-color: #171515;
    	color: red;
    	width: 80px;
    	height:20px;
    }

    une idée? sinon tant mieux.

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

    Par défaut

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
          <li><a href="#">Afrique</a>
            <ul>
              <li><a href="#">Afrique du Sud</a></li>
    Justement NON : Afrique A un sous-menu -> il faut enlever le lien :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
          <li>Afrique
            <ul>
              <li><a href="#">Afrique du Sud</a></li>
    ou :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
          <li><a href="javascript:void(0);">Afrique</a>
            <ul>
              <li><a href="#">Afrique du Sud</a></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.
    "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. #9
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    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 : 373
    Points : 478
    Points
    478

    Par défaut

    NON
    car dans ce cas, la balise <a> étant manquante, il n'y a plus la mise en forme css et le texte est horizontal.
    donc il faut mettre:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <li><a>Afrique</a>
            <ul>
              <li><a href="#">Afrique du Sud</a></li>

    Donc il y a peut être une différence que je ne vois pas, mais le <a> est important.

  10. #10
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    319
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 319
    Points : 48
    Points
    48

    Par défaut

    Bonjour JefReb,

    Je te remercie encore pour ton code. Je suis en train d'ajouter les noms au menu, après avoir essayer à plusieurs reprises j'ai des soucis pour rentrer les noms "question de largeur" Comment peut-on changer la largeur des sous menu ?

    Je te remercie et te souhaite une bonne journée

    Max

  11. #11
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    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 : 373
    Points : 478
    Points
    478

    Par défaut

    Ce n'est pas trop difficile, mais il faut savoir ce que l'on fait.
    Si tu ne veux agrandir qu'un seul poste, cela ne va pas être très beau.
    Donc tu peux changer la largeur de tous les niveaux par:
    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
     
    nav a {
    	width: 120px;             /* ICI */
    	line-height: 20px;
    	font-size:12px;
    	display: inline-block;
    	text-align: center;
    	background-color: #000;
    	color: #fff;
    	text-decoration: none;	
    }
     
    nav li ul {
    	position: absolute;
    	left: 120px;            /* et ICI ne pas oublier le décallage vers la droite */
    	top: -2px;
    	z-index:999;
    }

    Par contre si tu veux modifier uniquement le 3ème niveau, il faut cibler:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    nav > ul ul ul li > a {
    	width:300px;
    }

    Exemple complet avec 2ème niveau à 150px et 3ème niveau à 300px:
    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
    * {
    	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
    }
    body {
    	font-family: "Times New Roman", Times, serif;
    	font-size: 100%;
    }
    nav {
    	margin-top:50px;
    }
    nav ul {
    	list-style-type: none;
    	margin:0;
    	padding: 0;
     
    }
    nav li {
    	position: relative;
     
    }
    nav > ul > li  {
    	margin: 0 0 25px 0;
    	height: 80px;
    }
    nav a {
    	width: 150px;
    	line-height: 20px;
    	font-size:12px;
    	display: inline-block;
    	text-align: center;
    	background-color: #000;
    	color: #fff;
    	text-decoration: none;	
    }
    nav > ul > li > a {
    	width: 80px;
    	height:20px;	
    	position: relative;
    	left: -35px;
    	top: 15px;
    	background-color: #171515;
    	color: red;
    	-webkit-transform: rotate(-90deg);
    	transform: rotate(-90deg);		
    }
    nav > ul > li {
    	border-top:none;
    }	
    nav li ul {
    	position: absolute;
    	left: 150px;
    	top: -2px;
    	z-index:999;
    }
    nav > ul ul ul li > a {
    	width:300px;
    }
    nav > ul > li > ul {
    	left: 15px;	
    }
    nav li ul {
    	border-left: 2px solid transparent;
    }
    nav > ul ul {
    	display: none; 					/* on masque */
    }
    nav li:hover > ul {
    	display: block; 				/* on affiche */
    }
    nav a:hover {
    	background-color: red;
    	color: #fff;
    }
    nav > ul > li > a:hover {
    	background-color: #171515; /* pas de changement pour le premier niveau */
    	color: red;
    }

  12. #12
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    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 : 373
    Points : 478
    Points
    478

    Par défaut

    J'ai très mal répondu à jreaux62.
    Je ne comprends pas trop la différence entre :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    <ul>
          <li><a>Afrique</a>
    /* ===== ou ===== */
    <ul>
          <li><a href="#">Afrique</a>
    /* ===== et ou ===== */
    <ul>
          <li><a href="javascript:void(0);">Afrique</a>

    On apprend à tout age, mais j'aimerais bien comprendre pourquoi le # est à proscrire ou l'utilisation du javascript.
    Désolé, mais c'est la première fois que je lis l'utilisation du void.

    Merci à Jreaux62 si il veut bien me répondre.

  13. #13
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    319
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 319
    Points : 48
    Points
    48

    Par défaut

    Re,

    Je te remercie et te souhaite une bonne journée

    Max

  14. #14
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    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 : 373
    Points : 478
    Points
    478

    Par défaut

    Désolé, mais il n'y a que les imbéciles qui ne changent pas d'idées.
    La solution que j'ai donné ne me plaisait pas, car il y avait des problèmes de positionnement et de séparations et un peu de simplifications.
    Voici la dernière version que je propose avec un premier sous-niveau de 150px et un deuxième sous-niveau de 300px.

    https://codepen.io/JefReb/pen/RjWPxr

    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
    * {
    	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
    }
    body {
    	font-family: "Times New Roman", Times, serif;
    	font-size: 100%;
    }
    nav {
    	margin-top:50px;
    }
    nav ul {
    	list-style-type: none;
    	margin:0;
    	padding: 0;
     
    }
    nav li {
    	position: relative;
     
    }
    nav > ul > li  {
    	margin: 0 0 25px 0;
    	height: 80px;
    }
    /* définition des liens */
    nav a {
    	width: 150px;
    	line-height: 24px;
    	font-size:12px;
    	display: inline-block;
    	text-align: center;
    	background-color: #000;
    	color: #fff;
    	text-decoration: none;	
    }
    /* Pour le premier niveau uniquement */
    nav > ul > li > a {
    	width: 80px;
    	height:24px;	
    	position: relative;
    	left: -35px;
    	top: 15px;
    	background-color: #171515;
    	color: red;
    	-webkit-transform: rotate(-90deg);
    	transform: rotate(-90deg);		
    }
    /* positionnement des sous-niveaux */
    nav li ul {
    	position: absolute;
    	left: 150px;
    	top: -15px;
    	z-index:999;
    }
    /* décalage du 2ème niveau */
    nav > ul > li > ul {
    	left: 18px;
    }
    /* décalage du 3ème niveau */
    nav > ul > li > ul ul {
    	top: -2px;;
    }
    nav > ul ul ul a {
    	width:300px;					/* largeur du 3ème niveau */
    }
    /* espacement des sous-niveaux */
    nav li ul {
    	border-left: 2px solid transparent;
    }
    nav li ul li {
    	border-top: 2px solid transparent;
    }
    /* Propriétés au survol de la souris */
    nav > ul ul {
    	display: none; 					/* on masque */
    }
    nav li:hover > ul {
    	display: block; 				/* on affiche */
    }
    nav a:hover {
    	background-color: red;
    	color: #fff;
    }
    nav > ul > li > a:hover {
    	background-color: #171515; 		/* pas de changement pour le premier niveau */
    	color: red;
    }

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

    Par défaut

    Bonjour,

    1- pour les sous-niveaux, on n'est pas obligé de ré-écrire la largeur ou la position left en pixel :

    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
    nav li {
    	width:150px; /*largeur des sous-menus*/
    }
    nav a {
    	display: block;
    }
    nav li ul {
    	position: absolute;
    	width: 100%; /* même largeur que son parent */
    	left: 100%; /* à droite de son parent */
    	top: -15px;
    	z-index:999;
    }
    nav > ul ul ul a {
    	/*width:300px;*/	/* INUTILE,  si même largeur que son parent */
    }

    2- Quant aux espacements des sous-niveaux, pas besoin de border :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    nav li {
    	position: relative;
    	margin:2px; /* espacement des sous-niveaux */
    }
    /* espacement des sous-niveaux */
    nav li ul {
    	/*border-left: 2px solid transparent;*/	/* INUTILE */
    }
    nav li ul li {
    	/*border-top: 2px solid transparent;*/	/* INUTILE */
    }
    3- couleur au :hover :
    remplacer
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    nav a:hover {
    	background-color: red;
    	color: #fff;
    }
    nav > ul > li > a:hover {
    	background-color: #171515; 		/* pas de changement pour le premier niveau */
    	color: red;
    }
    par
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    nav > ul li:hover > a {
    	background-color: green;
    	color: white;
    }

    + quelques ajustements ici et là...
    "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

  16. #16
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    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 : 373
    Points : 478
    Points
    478

    Par défaut

    Merci Jreaux62, toujours aussi concis et précis...
    Mais je ne sais toujours pas pourquoi on ne peut pas mettre
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    <li><a href="#">Afrique</a>

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

    Par défaut

    A cause des médias TACTILES.

    Dès qu'on pose le doigt, ça active le lien (# : ici, une ancre vide).


    D'ailleurs, on évite de plus en plus d'utiliser :hover pour cette raison.
    On préfère "au clic".

    D'où mon menu : https://codepen.io/jreaux62/pen/dPxKKQ (qui fonctionne "au clic").
    "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. #18
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    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 : 373
    Points : 478
    Points
    478

    Par défaut

    Arrg! les médias TACTILES! je les oublie toujours ceux la!
    D'accord, il faut que j'y pense plus souvent.

    Par contre sur les modifications du menu j'ai quand même quelques remarques.

    D'accord pour le 1)
    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
    nav li {
    	width:150px; /*largeur des sous-menus*/
    }
    nav a {
    	display: block;
    }
    nav li ul {
    	position: absolute;
    	width: 100%; /* même largeur que son parent */
    	left: 100%; /* à droite de son parent */
    	top: -15px;
    	z-index:999;
    }
    nav > ul ul ul a {
    	/*width:300px;*/	/* INUTILE,  si même largeur que son parent */
    }
    Mais dans ce cas il ne faut pas oublier que le premier niveau est écrit verticalement.
    Il faut donc, quand même, décaler le premier sous-niveau pour qu'il ne soit pas éloigné de 100% sur la droite:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    /* décalage du 2ème niveau  dû à la position vertical du texte*/
    nav > ul > li > ul {     
    	left: 18px;
    }

    Je suis d'accord aussi pour le 2)
    Remplacer le border par un margin:2px; est plus simple

    Mais je ne suis pas d'accord pour le 3)
    Avec ce changement tous les liens sont changés y compris le premier niveau qui ne doit pas l'être.
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    nav > ul li:hover > a {
    	background-color: green;
    	color: white;
    }

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

    Par défaut

    Citation Envoyé par jreaux62 Voir le message
    + quelques ajustements ici et là...
    Je te laisse le soin de faire les ajustements nécessaires
    "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. #20
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    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 : 373
    Points : 478
    Points
    478

    Par défaut

    Yes sir. ... mais je ne suis pas l'auteur de cette question.
    Mais je m'y intéresse ...

Discussions similaires

  1. ajouter une ligne à un menu
    Par Rodrick dans le forum VB 6 et antérieur
    Réponses: 3
    Dernier message: 21/10/2006, 21h40
  2. Ajouter Commande mais pas Menu
    Par Stéphane Olivier BERNARD dans le forum Access
    Réponses: 2
    Dernier message: 04/05/2006, 15h45
  3. Réponses: 15
    Dernier message: 12/08/2005, 16h06
  4. [InnoSetup] Ajouter un raccourci dans menu Démarrer
    Par jlvalentin dans le forum Installation, Déploiement et Sécurité
    Réponses: 3
    Dernier message: 23/02/2005, 17h26
  5. [Plugin] Ajouter une option au menu contextuel ?
    Par relivio dans le forum Eclipse Platform
    Réponses: 2
    Dernier message: 22/03/2004, 17h18

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