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 à 3 niveaux


Sujet :

CSS

  1. #1
    Membre averti
    Homme Profil pro
    Webmaster
    Inscrit en
    Mars 2003
    Messages
    898
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2003
    Messages : 898
    Points : 442
    Points
    442
    Par défaut Menu à 3 niveaux
    Bonjour,

    Pour faire un menu à 3 niveaux j'ai récupéré un code que j'ai un peu adapté.
    Le niveau 1 du menu est présenté en vertical alors que je voudrais qu'il soit horizontal.
    la présentation des niveaux 2 et 3 me convient bien.
    voici le code
    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
     
    <div>
    	<div id="monmenu">
           		<ul class="niveau1">
    	   		<li><a href=""> Accueil</a></li>
               		<li><a href=""> Les Rencontres</a>
    				<ul class="niveau2">
                    			<li class="plus"><a href= "">1988 - 1998 </a>
                        				<ul class="niveau3">
                          					<li><a href= "http://www.rankspirit.com">1988 </a></li>
                            				<li><a href= "http://www.rankspirit.com">1989 </a></li>
                            				<li><a href= "http://www.rankspirit.com">1990 </a></li>
                        				</ul>
                      			</li>
                      			<li><a href= ""> 1999 - 2009 </a>
                        				<ul class="niveau3">
                          					<li><a href= "http://www.rankspirit.com">1999 </a></li>
                            				<li><a href= "http://www.rankspirit.com">2000 </a></li>
                            				<li><a href= "http://www.rankspirit.com">2001 </a></li>
                        				</ul>
                      			</li>
                      			<li><a href= "">2010 - 2018 </a>
                       		 		<ul class="niveau3">
                         			 		<li><a href= "http://www.rankspirit.com">2010 </a></li>
                            		 		<li><a href= "http://www.rankspirit.com">2011 </a></li>
                            		 		<li><a href= "http://www.rankspirit.com">2012 </a></li>
                        				</ul>
                      			</li>
                    		</ul>
    			</li>
    			<li><a href=""> Charte</a></li>
    			<li><a href=""> Contact</a></li>	
            	</ul>
    	</div>
    <div>
    le css attaché
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    #monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold;}
    #monmenu ul ul {display: none; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
    #monmenu ul.niveau2 {left: 0px; top: 22px;}
    #monmenu ul.niveau3 {left: 144px; top: -1px;}
    #monmenu li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}
    #monmenu li:hover, #monmenu li.sfhover {background-color: #FFFF70;}
    #monmenu li a {text-decoration:none;}
    #monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3, #monmenu li.sfhover ul.niveau2, #monmenu li li.sfhover ul.niveau3 {display: block}
    #monmenu li.plus {background-position:right; background-image: url(illustrations/ fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}
    Je ne comprends pas la signification de "li.shover"
    J'ai essayé plusieurs choses mais ça casse tout!!!
    Merci d'avance

  2. #2
    Membre éclairé
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Avril 2017
    Messages
    508
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2017
    Messages : 508
    Points : 770
    Points
    770
    Par défaut
    Bonjour,
    1) Tu utilises un framework ou tu as codé ?
    2) Tu utilises quel navigateur ? Car certains navigateurs sont capricieux.

    Cordialement.

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

    1- ajoute :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    #monmenu ul.niveau1 { display:table; width:100%; }
    #monmenu ul.niveau1 > li { display:table-cell; }

    2- li.sfhover : tu n'as pas de classe "sfhover" dans ton code HTML.
    Donc, c'est en trop dans le CSS.


    3- CONSEIL : NE mets PAS de sous-menu ici (surtout à 2 niveaux....)
    • Fait un menu principal SANS sous-niveau. SIMPLE.
    • Dans la page "Les Rencontres" : affiche par défaut les plus récentes + un menu secondaire, ou une liste déroulante (avec les autres années)

    Ça améliorera grandement l'ergonomie et l'accessibilité.

    Dernière modification par Invité ; 13/08/2018 à 11h18.

  4. #4
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 470
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 470
    Points : 5 831
    Points
    5 831
    Billets dans le blog
    1
    Par défaut
    L'exemple pour améliorer l'ergonomie semble très intéressant vu que, Jérôme, tu m'avais cité le même dans https://www.developpez.net/forums/d1...sibilite-site/.
    Je suis rentré de vacances hier soir, et ne repars que dans environ 2 semaines, donc je vais essayer de m'en inspirer (et de suivre tes autres conseils)

  5. #5
    Membre averti
    Homme Profil pro
    Webmaster
    Inscrit en
    Mars 2003
    Messages
    898
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2003
    Messages : 898
    Points : 442
    Points
    442
    Par défaut
    Merci jreaux62,

    Suite à tes remarques j'ai donc repensé un peux tout ça !!
    Dans le menu je vais placé un lien "Les rencontres" avec un sous-menu où je vais afficher les trois dernières années (2018, 2017, 2016) et un lien pour les années antérieures que je gérerais sur la page "rencontres" comme tu me l'as suggéré.

    Les couleurs c'est pour que je puisse m'y retrouver.
    j'ai encore du temps pour améliorer la présentation, je présente cette maquette en septembre à petit groupe du jumelage.

    En pièces jointes : index.php, menu.php et style.css
    index.php
    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
    80
    81
    82
    83
    84
    85
    <?php  session_start(); 
     
    // -----------------
    // langues disponibles sur le site
    if(empty($_SESSION['langues_array']) )
    {
            $_SESSION['langues_array'] = ['fr','de']; // français (principale) / allemand (si tu veux ajouter des langues, il suffira de l'ajouter ici)
    }
    // -----------------
    // changement de langue
    if(empty($_SESSION['langue']) ) 
    {
            $_SESSION['langue'] = $_SESSION['langues_array'][0]; // langue par défaut
    }
    if(isset($_GET['langue'])) // (reçu via URL) 
    {
            $_SESSION['langue'] = $_GET['langue'];
    } 
    elseif(isset($_POST['langue'])) // (reçu via form) 
    {
            $_SESSION['langue'] = $_POST['langue'];
    }
     
    if( !in_array($_SESSION['langue'],$_SESSION['langues_array']) )
    {
            $_SESSION['langue'] = $_SESSION['langues_array'][0]; // langue par défaut
    }
    // -----------------
    ?>
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Jumelage Troissy Partenheim</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="description" content="Troissy, Partenheim, Champagne"/>
    <meta name="keywords" content="Champagne, Troissy, Bouquigny, Dormans, 51, 51700, Partenhiem, Allemagne  "/>
    <meta name="Robots" content="index, follow, all"/>
    <meta name="Revisit-after" content="5 days"/>
    <link rel="icon" type="image/ico" href="images/10199.ico" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/medias.css" />
    <script type="text/javascript" src="scripts/scripts.js"></script />
    </head>
    <body>
    <div id="global">
    	<div id="bandeau">
    		<div id="b1">
    			<FORM ACTION="" METHOD="post">
    				<input type="hidden" name="langue" value="fr" style="width:10%;"/>
    				<input type="image" alt="fr" src="images/blason-Troissy.jpg" id="imgbandeau" />
    				<input type="image" alt="fr" src="images/french-flag.jpg" id="imgflagF" />
    			</FORM>
    		</div>
    		<div id="b2">
    			<?php
                                    if ($_SESSION['langue'] == 'fr') { echo 'JUMELAGE <br> TROISSY ~ PARTENHEIM </br></div>';
                                    }
                                    else { echo 'JUMELAGE <br> PARTENHEIM ~ TROISSY </br></div>';
                                    }
                            ?>
    		<div id="b3">
    			<FORM ACTION="" METHOD="post">
    				<input type="image" alt="fr" src="images/deutch-flag.jpg" id="imgflagD" />
    				<input type="image" alt="de" src="images/blason-Partenheim.jpg" id="imgbandeau3"  />
    				<input type="hidden" name="langue" value="de" style="width:10%;" />
        			</FORM>
    		</div>
    	</div>
    	<?php
                    //affichage du menu
                    include ($_SESSION['langue'].'/menu.php');
                    //affichage des pages
                    echo '<div id="conteneur">';
                                    if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page'];
                                    switch($page){
                                    //menu général
                                            case 'accueil': include ($_SESSION['langue'].'/accueil.php');break;
                                            case 'historique': include ($_SESSION['langue'].'/historique.php');break;
                                    }
                    echo '</div>';
            ?>
    </div>
    </body>
    </html>
    menu.php
    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
    <div id="menu">
           	<ul>
    	   	<li><a href=""> Accueil</a></li>
    	   	<li><a href=""> Historique</a></li>
               	<li><a href=""> Les Rencontres</a>
    			<ul>
                    		<li><a href= "">2018 </a></li>
                    		<li><a href= "">2017 </a></li>
                    		<li><a href= "">2016 </a></li>
                    		<li><a href= "">1988 à 2015</a></li>
                    	</ul>
    		</li>
      		<li><a href="index.php?page=charte">Charte</a></li>
      		<li><a href="#">contact</a></li>
            </ul>
    </div>
    style.css
    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
    html, body {height:100%; border:0; min-height:100%; padding:0; }
    #global { width:80%; font-family:verdana; margin-left:auto; margin-right:auto; }
     
    /*  LE BANDEAU   */
    #bandeau { overflow:auto; }
    #b1 { width : 20%; float:left; background-color:olive; }
    #imgflagF { width:15%; float:left; cursor: pointer; }
    #imgbandeau { width:30%; margin-left:37%; float:left; cursor: pointer; }
    #b2 { width : 60%; float:left; text-align:center; color:#FFF; background-image:url("../images/vignes.jpg"); font-size:2.4em; }
    #b3 { width : 20%; float:left; background-color:#FFF; }
    #imgflagD { width:15%; margin-left:20%; margin-top:0%; float:left; cursor: pointer; }
    #imgbandeau3 { width:33%; margin-left:0.1%;margin-top:0%; float:left; cursor: pointer; }
     
    /*  LE MENU   */
    #menu ul { margin:0; padding:0; list-style-type:none; text-align:center; font-size:0.9em; }
    #menu li { float:left; margin:auto; padding:0; background-color:black; }
    #menu li a { display:block; width:16.8em; color:white; text-decoration:none; padding:0.3em; }
    #menu li a:hover { color:#FFD700; }
    #menu ul li ul { display:none; }
    #menu ul li:hover ul { display:block; }
    #menu li:hover ul li { float:none; }
    #menu li ul { position:absolute; }
     
     
    /* MAIN PAGE  CONTENEUR  */
    #conteneur { margin-top:1.6em; min-height:80em; background-color:yellow; }
    #accueil_annonce {  }
    Tout fonctionne correctement. Mon seul souci c'est que j'ai un espace trop grand entre le bandeau et le menu !!!

    Est il possible de faire du nettoyage?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Menu 3 niveaux avec Collapsor
    Par BeAware dans le forum jQuery
    Réponses: 1
    Dernier message: 17/07/2009, 12h49
  2. Menu multi niveaux en CSS
    Par mbar dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 29/06/2009, 02h58
  3. Compatibilité menu 3 niveaux
    Par boosted dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 20/11/2008, 16h02
  4. [Ergonomie] Menu à deux niveaux
    Par eXiaNazaire dans le forum Webdesign & Ergonomie
    Réponses: 2
    Dernier message: 03/10/2008, 18h37
  5. Faire un menu à deux niveaux en mode texte
    Par julien.63 dans le forum Langage
    Réponses: 3
    Dernier message: 25/01/2008, 15h14

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