Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 17 sur 17
  1. #1
    Invité régulier
    Homme Profil pro amandin weber
    Chargé d'affaire
    Inscrit en
    août 2012
    Messages
    35
    Détails du profil
    Informations personnelles :
    Nom : Homme amandin weber
    Localisation : France

    Informations professionnelles :
    Activité : Chargé d'affaire
    Secteur : Conseil

    Informations forums :
    Inscription : août 2012
    Messages : 35
    Points : 5
    Points
    5

    Par défaut Menu horizontal avec 2 sous-menus (vertical ET horizontal)

    Bonjour,
    Je m'en remets à vous après moultes recherches infructueuses.
    Je désire avoir sur mon site d'information un menu ayant n rubriques et 2 sous-menus(ayant x sous-rubriques):
    1) l'un vertical en display;none qui disparait une fois la rubrique cliquée ou que la souris n'est plus sur cette rubrique,
    2)et l'autre sous-menu qui s'affiche sous le menu principal avec ses sous-rubriques correspondantes et qui reste visible tant que la page est affichée.
    Je crois que des exemples valent mieux que tout ce discours.
    je cite des exemples sans arrière pensée publicitaire: lepoint.fr (sous-menu horizontal) ou lefigaro.fr (sous-menu et sous/sous-menu horizontaux)et latribune.fr ( sous-menus vertical et horizontal, mon modèle favori) .
    voici mes codes à titre d'illustration,( la div sous-menu-horizontal indique l'emplacement du sous-menu horizontal)
    Pourriez-vous m'aider à installer ce sous-menu horizontal et à me guider dans mes recherches ?
    Merci d'avance pour vos éclaircissements.



    Code :
    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
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8" />
    	<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    	<title> ----   </title>
    	<link rel="stylesheet" href="2.css" />
    </head>
    <body >
    	<header>
    	</header>
    	<nav>
    		<ul id="menu">
    			<li><a href="#">Rubrique 1</a>
    				<ul>
    					<li><a href="#1.1">Sous rubrique 1.1</a></li>
    					<li><a href="#1.2">Sous rubrique 1.2</a></li>
    				</ul>
    			</li>
    			<li><a href="#">Rubrique 2</a>
    				<ul>
    					<li><a href="#2.1">Sous rubrique 2.1</a></li>
    					<li><a href="#2.2">Sous rubrique 2.2</a></li>
    					<li><a href="#2.3">Sous rubrique 2.3</a></li>
    				</ul>
    			</li>
    			<li><a href="#">Rubrique 3</a>
    				<ul>
    					<li><a href="#2.1">Sous rubrique 3.1</a></li>
    					<li><a href="#2.2">Sous rubrique 3.2</a></li>
    					<li><a href="#2.3">Sous rubrique 3.3</a></li>
    					<li><a href="#2.4">Sous rubrique 3.4</a></li>
    				</ul>
    			</li>
    		</ul>
    	</nav>
    	<content>
    		<div id="sous-menu-horizontal">
    		</div>
     
    		<section>
    		</section>
    	</content>
     
    	<footer>
    	</footer>
     
    </body>
    </html>
    Code css :
    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
    body
    {
    background-color: silver;
    }
    header, nav, content
    {
    display: block;
    }
    header
    {
    width: 100%;
    height: 100px;
    background-color: #e2edff;
    }
    nav
    {
    width: 100%;
    height: 35px;
    background-color: lime;
    }
    /* content
    {
     
    } */
    #sous-menu-horizontal, section
    {
    display: inline-block;
    }
    #sous-menu-horizontal
    {
     
    width: 100%;
    height: 30px;
    background-color: red;
    }
    section
    {
    width: 100%;
    height: 500px;
    margin-top: -5px;
    background-color: #e2d8bc;
    }
    footer
    {
    width: 100%;
    height: 100px;
    background-color: #bfcce2;
    }
     
    #menu, #menu ul{
    padding:0;
    margin:0;
    list-style:none;
    text-align: left;
    }
    #menu li{
     
    display:inline-block; 
    position:relative;
    }
    #menu ul li{
    display:inherit;
    } 
    #menu ul li:last-child{
    border-radius:0 0 8px 8px;
    }
    #menu ul{
    position:absolute;
    max-height:0;
    width:100%;
    overflow:hidden;
    transition: .6s all .2s;
    }
    #menu li:hover ul{
    max-height:15em;
    }
    #menu li{
    background: #2d30c6;
    }
    #menu li li{
    background: #2d30c6;
    }
    #menu li:hover, #menu li li:hover{
    background: #e2edff;
    }
    #menu a{
    text-decoration:none;
    display:block;
    padding:8px 32px;
    color:#fff;
    font-family:arial;
    }
    #menu ul a{
    padding:8px 6px;
    }
    #menu li:hover li a{
    color:#fff;
    text-transform:inherit;
    }
    #menu li:hover a, #menu li li:hover a{
    color:#000;
    }

  2. #2
    Modérateur
    Avatar de rodolphebrd
    Homme Profil pro Rodolphe brd
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 294
    Détails du profil
    Informations personnelles :
    Nom : Homme Rodolphe brd
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 294
    Points : 5 041
    Points
    5 041

    Par défaut

    bonsoir,

    Après lecture de vos exemples je ne vois pas ce que vous entendez par sous-menu horizontal.

    Un screen peut-être.

    Note : même réponse que sur Alsacréations

  3. #3
    Invité régulier
    Homme Profil pro amandin weber
    Chargé d'affaire
    Inscrit en
    août 2012
    Messages
    35
    Détails du profil
    Informations personnelles :
    Nom : Homme amandin weber
    Localisation : France

    Informations professionnelles :
    Activité : Chargé d'affaire
    Secteur : Conseil

    Informations forums :
    Inscription : août 2012
    Messages : 35
    Points : 5
    Points
    5

    Par défaut

    @rodolphebrd
    mon cher, comprenez mon désarroi pour avoir posté ici et ailleurs, car je bloque vraiement depuis une quinzaine.
    Qu'entendez-vous par screen? Il me semble qu'il suffit de naviguer sur latribune.fr pour comprendre ce que je cherche : un sous-menu horizontal qui reste affichée avec ses sous-rubriques , incitant le visiteur à exlporer davantage le site, et d'une autre maniçre montrer la richesse du contenu du site.

  4. #4
    Modérateur
    Avatar de rodolphebrd
    Homme Profil pro Rodolphe brd
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 294
    Détails du profil
    Informations personnelles :
    Nom : Homme Rodolphe brd
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 294
    Points : 5 041
    Points
    5 041

    Par défaut

    Il n'y a aucun mal à multiplier les posts sur les forums

    Je veux bien vous aider mais avant de chercher (car ça peut prendre du temps) je veux être sûr de bien comprendre.

    Et par screen j'entends une copie d'écran de la zone concernée.

  5. #5
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    février 2013
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : février 2013
    Messages : 25
    Points : 20
    Points
    20

    Par défaut

    Bonsoir,

    Voici un vieux code qui devrait correspondre, par contre je ne saurais plus dire les éventuelles sources.

    Bien à vous !

    le css :

    Code css :
    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
    #menu, #menu ul /* Liste */     
    {
            padding : 0; /* pas de marge intérieure */
            margin : 0; /* ni extérieure */
            list-style : none; /* on supprime le style par défaut de la liste */
            line-height : 21px; /* on définit une hauteur pour chaque élément */
            text-align : center; /* on centre le texte qui se trouve dans la liste */
    }
     
    #menu /* Ensemble du menu */
    {
            font-weight : bold; /* on met le texte en gras */
            font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
            font-size : 12px; /* hauteur du texte : 12 pixels */
    }
     
    #menu a /* Contenu des listes */
    {
            display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
            padding : 0; /* aucune marge intérieure */
            background : red; /* couleur de fond */        
            color : #fff; /* couleur du texte */
            text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
            width : 110px; /* largeur */
    }
     
    #menu li /* Elements des listes */      
    { 
            float : left; 
            /* pour IE qui ne reconnaît pas "transparent" */
            border-right : 1px solid #fff; /* on met une bordure blanche à* droite de chaque élément */
    }
     
    /* IE ne reconnaissant pas le sélecteur ">" */
    html>body #menu li
    {
            border-right: 1px solid transparent ; /* on met une bordure transparente à* droite de chaque élément */
    }
     
    #menu li ul /* Sous-listes */
    { 
            position: absolute; /* Position absolue */
            width: 110px; /* Largeur des sous-listes */
            left: -999em; /* Hop, on envoie loin du champ de vision */
    }
     
     
    #menu li ul li /* à?léments de sous-listes */
    {
            /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
            border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
    }
     
    /* IE ne reconnaissant pas le sélecteur ">" */
    html>body #menu li ul li                
    {
            border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
    }
     
    #menu li ul ul 
    {
            margin    : -22px 0 0 110px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
            /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
            border-left     : 1px solid #fff ; /* Petite bordure à* gauche pour ne pas coller ... */      
    }
     
    /* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
    html>body #menu li ul ul                
    {
            border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
    }
    #menu a:hover /* Lorsque la souris passe sur un des liens */    
    {
            color: red; /* On passe le texte en rouge... */
            background: #fff; /* ... et au contraire, le fond en blanc */
    }
    #menu li { /* tous les items de liste */
    	float: left;
    	width: 8em; /* largeur obligatoire, sinon opera devient fou */
    }
     
    #menu li ul { /* listes de deuxième niveau */
    	position: absolute;
    	background: red	;
    	width: 10em;
    	left: -999em; /* on met left plutàŽt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
    }
     
    #menu li ul ul { /* listes de troisième niveau et plus */
    	margin: -1em 0 0 9em;
    }
     
    #menu li:hover ul ul, #menu li.sfhover ul ul {
    	left: -999em;
    }
     
    #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
    	left: auto;
    }


    le js :

    Code javascript :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    sfHover = function() {
            var sfEls = document.getElementById("menu").getElementsByTagName("LI");
            for (var i=0; i<sfEls.length; i++) {
                    sfEls[i].onmouseover=function() {
                            this.className+=" sfhover";
                    }
                    sfEls[i].onmouseout=function() {
                            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                    }
            }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);


    Html :
    Code :
    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
    <img style='position:absolute;top:1px;left:50%;margin-left:-400px;'src='pic/banderole.png'alt='banderole'/>
        <ul style='position:absolute;top:110px;left:50%;margin-left:-250px;width:510px'id="menu">
            <li>
                    <a href="index.php">Accueil</a>
            </li>        
           <li>
                    <a href="personnel.php">Personnels</a>
                    <ul>
                            <li>
                                    <a href="#">Départements</a>
                                    <ul style='position:absolute;top:10px;'id='menu'>
                                            <li><a href="personnel_radiologie.php">Radiologie</a></li>
                                            <li><a href="personnel_ophtalmologie.php">Ophtalmologie</a></li>
                                            <li><a href="personnel_urologie.php">Urologie</a></li>
                                            <li><a href="personnel_dermatologie.php">Dermatologie</a></li>
                                    </ul>
                            </li>
                            <li>
                                    <a href="personnel_administration.php">Administration</a>
                            </li>
    						<li>
                                    <a href="personnel_interimaire.php">Interimaires</a>
                            </li>
                    </ul>
            </li>       
            <li>
                    <a href="agenda.php">Agenda</a>
                    <ul>
                            <li>
                                    <a href="#">Départements</a>
                                    <ul style='position:absolute;top:10px;'id='menu'>
                                         <li><a href="agenda_radiologie.php">Radiologie</a></li>
                                         <li><a href="agenda_ophtalmologie.php">Ophtalmologie</a></li>
                                         <li><a href="agenda_urologie.php">Urologie</a></li>
                                         <li><a href="agenda_dermatologie.php">Dermatologie</a></li> 
                                    </ul>
                            </li>
                            <li>
                                    <a href="agenda_administration">Administration</a>
                            </li>
                    </ul>
            </li>
            <li>
                    <a href="salle.php">Salle</a>
                    <ul>
                            <li><a href="salle_examen.php">Examen</a></li>
                            <li><a href="salle_chambre.php">Chambres</a></li>
                    </ul>
            </li>        
            <li>
                    <a href="plus.php">plus</a>
                    <ul>
                             <li>
                                    <a href="plus_informer.php">Rester informé</a>
                                    <ul style='position:absolute;top:10px;'id='menu'>
                                            <li><a href="http://google.be">Radiologie</a></li>
                                            <li><a href="http://google.be">Ophtalmologie</a></li>
                                            <li><a href="http://google.be">Urologie</a></li>
                                            <li><a href="http://google.be">Dermatologie</a></li>
                                    </ul>
                            </li>
                            <li><a href="http://google.be">Google</a></li>
                    </ul>
            </li>        
    	</ul>
    EDIT : Avec le bout de code js, il devrait être compatible tous navigateurs.

  6. #6
    Invité régulier
    Homme Profil pro amandin weber
    Chargé d'affaire
    Inscrit en
    août 2012
    Messages
    35
    Détails du profil
    Informations personnelles :
    Nom : Homme amandin weber
    Localisation : France

    Informations professionnelles :
    Activité : Chargé d'affaire
    Secteur : Conseil

    Informations forums :
    Inscription : août 2012
    Messages : 35
    Points : 5
    Points
    5

    Par défaut

    Non ce n'est pas de screen dont il s'agit.
    Malgré les codes très simplistes que j'ai posté, le but est de faire un site web d'information technique qui exige un menu avec 8 à 9 rubriques, chacune ayant 6 à 7 sous-rubriques. Et comme les meilleurs sites d'information( genre lefigaro, lepoint...), le but est que le client ait toujours sous les yeux la diversité et la profondeur du contenu, ce qui l'incitera à explorer davantage le site, contrairement à un sous-menu qui disparait un fois la souris n'est plus sur la rubrique.

  7. #7
    Invité régulier
    Homme Profil pro amandin weber
    Chargé d'affaire
    Inscrit en
    août 2012
    Messages
    35
    Détails du profil
    Informations personnelles :
    Nom : Homme amandin weber
    Localisation : France

    Informations professionnelles :
    Activité : Chargé d'affaire
    Secteur : Conseil

    Informations forums :
    Inscription : août 2012
    Messages : 35
    Points : 5
    Points
    5

    Par défaut

    @UNE.persnne

    merci
    je teste les codes et je vous réponds.

  8. #8
    Modérateur
    Avatar de rodolphebrd
    Homme Profil pro Rodolphe brd
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 294
    Détails du profil
    Informations personnelles :
    Nom : Homme Rodolphe brd
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 294
    Points : 5 041
    Points
    5 041

    Par défaut

    En fait ce n'est pas trop compliqué à mettre en place et presque aussi simple qu'un menu déroulant.

    Inspectez le code et vous en verrez les coulisses.

  9. #9
    Invité régulier
    Homme Profil pro amandin weber
    Chargé d'affaire
    Inscrit en
    août 2012
    Messages
    35
    Détails du profil
    Informations personnelles :
    Nom : Homme amandin weber
    Localisation : France

    Informations professionnelles :
    Activité : Chargé d'affaire
    Secteur : Conseil

    Informations forums :
    Inscription : août 2012
    Messages : 35
    Points : 5
    Points
    5

    Par défaut menu horizontal avec 2 sous-menus ( vertical ET horizontal)

    Je ne fait que ça durant 15 jours.
    Dans les codes inspectés, on n'a que le script de la page la téléchargée (autrement dit, le script de la rubrique cliquée avec ses sous-rubriques) mais pas celui de toutes les autres sous-rubriques).
    C'est pour cela que je pense qu'il faut du php .
    Je sais que c'est difficile à expliquer, mais croyez-moi, j'ai essayé une dizaines de sites et toujours la même galère.

  10. #10
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    février 2013
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : février 2013
    Messages : 25
    Points : 20
    Points
    20

    Par défaut

    Citation Envoyé par amdawb Voir le message
    Je ne fait que ça durant 15 jours.
    Dans les codes inspectés, on n'a que le script de la page la téléchargée (autrement dit, le script de la rubrique cliquée avec ses sous-rubriques) mais pas celui de toutes les autres sous-rubriques).
    Je ne comprends pas ce que tu veux dire pas 'autres sous-rubriques'

  11. #11
    Invité régulier
    Homme Profil pro amandin weber
    Chargé d'affaire
    Inscrit en
    août 2012
    Messages
    35
    Détails du profil
    Informations personnelles :
    Nom : Homme amandin weber
    Localisation : France

    Informations professionnelles :
    Activité : Chargé d'affaire
    Secteur : Conseil

    Informations forums :
    Inscription : août 2012
    Messages : 35
    Points : 5
    Points
    5

    Par défaut [HTML 5] menu horizontal avec 2 sous-menus ( vertical ET horizontal)

    @Une.Personne
    Prenons le code posté en premier message et ouvrons-le dans un navigateur:
    Si je cible la rubrique 1 , une nouvelle page contenant les informations de cette rubrique 1 s'ouvre avec en haut le sous-menu de la rubrique1 disposé horizontalement(sous-rubrique1/sr2/sr3/sr4) dans l'emlpacement rouge de la div "sous-menu-horizontal'.
    Il faut essayer de naviguer sur des sites comme lefigaro.fr ou le point.fr pour voir le but.

  12. #12
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    février 2013
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : février 2013
    Messages : 25
    Points : 20
    Points
    20

    Par défaut

    Ok la pièce est tombée j'ai compris

    Oui du php me paraît indispensable sauf si tu veux t'amuser avec une base de donnée mais ça ne me semble pas l'idéal.

    Personnellement j'aurais envoyé le lien du menu ou tu clique avec un GET pour le faire passer en paramètre, ensuite t'affiche tel ou tel menu suite à ce paramètre à l'aide d'un switch ça me semble plutôt bon.

    donc un truc genre :

    MENU 1 MENU2 MENU3

    selon le paramètre où tu cliques

    switch GET_menu

    case1 menu1
    tu me mets sous_menu1

    case menu2
    tu me mets sous_menu2

    .
    .
    .

    Ouh lala j'espère que j'ai été clair


  13. #13
    Invité régulier
    Homme Profil pro amandin weber
    Chargé d'affaire
    Inscrit en
    août 2012
    Messages
    35
    Détails du profil
    Informations personnelles :
    Nom : Homme amandin weber
    Localisation : France

    Informations professionnelles :
    Activité : Chargé d'affaire
    Secteur : Conseil

    Informations forums :
    Inscription : août 2012
    Messages : 35
    Points : 5
    Points
    5

    Par défaut menu horizontal avec 2 sous-menus ( vertical ET horizontal)

    @Une.Personne
    Oui.
    Je vais remettre mes connaissances en php à jour, et le cas échéant déplacer ce sujet dans le forum correspondant.Mais le sujet reste ouvert pour quelqu'un qui pourrait fournir un script ou un modèle à creuser.
    Thanks.

  14. #14
    Modérateur
    Avatar de rodolphebrd
    Homme Profil pro Rodolphe brd
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 294
    Détails du profil
    Informations personnelles :
    Nom : Homme Rodolphe brd
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 294
    Points : 5 041
    Points
    5 041

    Par défaut

    Citation Envoyé par amdawb
    Je ne fait que ça durant 15 jours.
    Dans les codes inspectés, on n'a que le script de la page la téléchargée (autrement dit, le script de la rubrique cliquée avec ses sous-rubriques) mais pas celui de toutes les autres sous-rubriques).
    C'est pour cela que je pense qu'il faut du php .
    Je sais que c'est difficile à expliquer, mais croyez-moi, j'ai essayé une dizaines de sites et toujours la même galère.
    Lorsque vous désactivez Javascript les menus sont fonctionnels.

    Php ou pas ces menus sont construits sur une base de html et de css.

    Concernant le menu que vous préférez (celui de la tribune) il s'agit de 2 drop-down menu liés et le lien que je vous ai donné remplit son office.

  15. #15
    Modératrice
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    juillet 2006
    Messages
    1 906
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 42
    Localisation : Suisse

    Informations forums :
    Inscription : juillet 2006
    Messages : 1 906
    Points : 2 567
    Points
    2 567

    Par défaut

    Bonjour,

    Ce que tu souhaites obtenir est assez basique. Il s'agit juste d'un menu déroulant standard, avec, en dessous, sur chacune des pages concernées le sous-menu correspondant.

    Je ne comprends pas exactement à quel problème de réalisation tu te heurtes...

    Dans ton code exemple il suffirait d'ajouter, pour chaque page, le sous-menu correspondant à la page en cours dans ton sous-menu-horizontal (et le styler selon tes envies):

    Code html :
    1
    2
    3
    4
    5
    6
    <div id="sous-menu-horizontal">
      <ul>
        <li><a href="#1.1">Sous rubrique 1.1</a></li>
        <li><a href="#1.2">Sous rubrique 1.2</a></li>
      </ul>
    </div>
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et si c'est le cas

  16. #16
    Invité régulier
    Homme Profil pro amandin weber
    Chargé d'affaire
    Inscrit en
    août 2012
    Messages
    35
    Détails du profil
    Informations personnelles :
    Nom : Homme amandin weber
    Localisation : France

    Informations professionnelles :
    Activité : Chargé d'affaire
    Secteur : Conseil

    Informations forums :
    Inscription : août 2012
    Messages : 35
    Points : 5
    Points
    5

    Par défaut [HTML 5] Menu horizontal avec 2 sous-menus (vertical ET horizontal)

    @CandyGirl
    C'est l'explication que je cherchais. Merci

  17. #17
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    février 2013
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : février 2013
    Messages : 25
    Points : 20
    Points
    20

    Par défaut

    Bonjour

    C'est fou, on a les idées plus clairs après une nuit de sommeil.

    Bon alors pour aujourd'hui, je vous propose un petit code qui vient d'être fait à l'instant ^^ (soyez indulgents )

    Commençons par en montrer le résultat sur une petite image



    et le code si besoin

    /ton_répertoire/index.php

    Code :
    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
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Oh mais voici un beau code pour un menu x)</title>
    </head>
    <body>
    <?php
    include 'include/menu.inc';
    ?>
    <table style='position:absolute;width:50%;left:25%;border:solid black;height:10%;top:5%;'>
    <tr>
    <td><a href='index.php?menu=menu1'>menu1</a><td/>
    <td><a href='index.php?menu=menu2'>menu2</a><td/>
    <td><a href='index.php?menu=menu3'>menu3</a><td/>
    <td><a href='index.php?menu=menu4'>menu4</a><td/>
    <td><a href='index.php?menu=menu5'>menu5</a><td/>
    </tr>
    </table>
    <p style='position:absolute;left:20%;font-weight:bold;top:45%'>
    <?php
    switch ($_GET['ss_menu'])
    {
      case 'menu_1_1':
        echo "tu es dans le sous menu1 du menu 1";
        break;
      case 'menu_1_2':
        echo "tu es dans le sous menu1 du menu 2";
        break;
      case 'menu_1_3':
        echo "tu es dans le sous menu1 du menu 3";
        break;
      case 'menu_1_4':
        echo "tu es dans le sous menu1 du menu 4";
        break;
      case 'menu_1_5':
        echo "tu es dans le sous menu1 du menu 5";
        break;
      case 'menu_2_1':
        echo "tu es dans le sous menu 2 du menu 1";
        break;
      case 'menu_2_2':
        echo "tu es dans le sous menu 2 du menu 2";
        break;
      case 'menu_2_3':
        echo "tu es dans le sous menu 2 du menu 3";
        break;
      case 'menu_2_4':
        echo "tu es dans le sous menu 2 du menu 4";
        break;
      case 'menu_2_5':
        echo "tu es dans le sous menu 2 du menu 5";
        break;
      case 'menu_3_1':
        echo "tu es dans le sous menu 3 du menu 1";
        break;
      case 'menu_3_2':
        echo "tu es dans le sous menu 3 du menu 2";
        break;
      case 'menu_3_3':
        echo "tu es dans le sous menu 3 du menu 3";
        break;
      case 'menu_3_4':
        echo "tu es dans le sous menu 3 du menu 4";
        break;
      case 'menu_3_5':
        echo "tu es dans le sous menu 3 du menu 5";
        break;
      case 'menu_4_1':
        echo "tu es dans le sous menu 4 du menu 1";
        break;
      case 'menu_4_2':
        echo "tu es dans le sous menu 4 du menu 2";
        break;
      case 'menu_4_3':
        echo "tu es dans le sous menu 4 du menu 3";
        break;
      case 'menu_4_4':
        echo "tu es dans le sous menu 4 du menu 4";
        break;
      case 'menu_4_5':
        echo "tu es dans le sous menu 4 du menu 5";
        break;
      case 'menu_5_1':
        echo "tu es dans le sous menu 5 du menu 1";
        break;
      case 'menu_5_2':
        echo "tu es dans le sous menu 5 du menu 2";
        break;
      case 'menu_5_3':
        echo "tu es dans le sous menu 5 du menu 3";
        break;
      case 'menu_5_4':
        echo "tu es dans le sous menu 5 du menu 4";
        break;
      case 'menu_5_5':
        echo "tu es dans le sous menu 5 du menu 5e
        ";
        break;
    }
    ?>
    </p>
    </body>
    </html>
    /ton_repertoire/include/menu.inc

    Code :
    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
    <?php
    if($_GET['menu']==menu1)
    {
    ?>
    <table style='position:absolute;width:50%;left:25%;border:solid black;height:8%;top:18%'>
    <tr>
    <td><a href='index.php?menu=menu1&ss_menu=menu_1_1'>premier sous menu1</a><td/>
    <td><a href='index.php?menu=menu1&ss_menu=menu_1_2'>deuxième sous menu1</a><td/>
    <td><a href='index.php?menu=menu1&ss_menu=menu_1_3'>troisième sous menu1</a><td/>
    <td><a href='index.php?menu=menu1&ss_menu=menu_1_4'>quatrième sous menu1</a><td/>
    <td><a href='index.php?menu=menu1&ss_menu=menu_1_5'>cinquième sous menu1</a><td/>
    </tr>
    </table>
    <?php
    }
    if($_GET['menu']==menu2)
    {
    ?>
    <table style='position:absolute;width:50%;left:25%;border:solid black;height:8%;top:18%'>
    <tr>
    <td><a href='index.php?menu=menu2&ss_menu=menu_2_1'>premier sous menu2</a><td/>
    <td><a href='index.php?menu=menu2&ss_menu=menu_2_2'>deuxième sous menu2</a><td/>
    <td><a href='index.php?menu=menu2&ss_menu=menu_2_3'>troisième sous menu2</a><td/>
    <td><a href='index.php?menu=menu2&ss_menu=menu_2_4'>quatrième sous menu2</a><td/>
    <td><a href='index.php?menu=menu2&ss_menu=menu_2_5'>cinquième sous menu2</a><td/>
    </tr>
    </table>
    <?php
    }
    if($_GET['menu']==menu3)
    {
    ?>
    <table style='position:absolute;width:50%;left:25%;border:solid black;height:8%;top:18%'>
    <tr>
    <td><a href='index.php?menu=menu3&ss_menu=menu_3_1'>premier sous menu3</a><td/>
    <td><a href='index.php?menu=menu3&ss_menu=menu_3_2'>deuxième sous menu3</a><td/>
    <td><a href='index.php?menu=menu3&ss_menu=menu_3_3'>troisième sous menu3</a><td/>
    <td><a href='index.php?menu=menu3&ss_menu=menu_3_4'>quatrième sous menu3</a><td/>
    <td><a href='index.php?menu=menu3&ss_menu=menu_3_5'>cinquième sous menu3</a><td/>
    </tr>
    </table>
    <?php
    }
    if($_GET['menu']==menu4)
    {
    ?>
    <table style='position:absolute;width:50%;left:25%;border:solid black;height:8%;top:18%'>
    <tr>
    <td><a href='index.php?menu=menu4&ss_menu=menu_4_1'>premier sous menu4</a><td/>
    <td><a href='index.php?menu=menu4&ss_menu=menu_4_2'>deuxième sous menu4</a><td/>
    <td><a href='index.php?menu=menu4&ss_menu=menu_4_3'>troisième sous menu4</a><td/>
    <td><a href='index.php?menu=menu4&ss_menu=menu_4_4'>quatrième sous menu4</a><td/>
    <td><a href='index.php?menu=menu4&ss_menu=menu_4_5'>cinquième sous menu4</a><td/>
    </tr>
    </table>
    <?php
    }
    if($_GET['menu']==menu5)
    {
    ?>
    <table style='position:absolute;width:50%;left:25%;border:solid black;height:8%;top:18%'>
    <tr>
    <td><a href='index.php?menu=menu5&ss_menu=menu_5_1'>premier sous menu5</a><td/>
    <td><a href='index.php?menu=menu5&ss_menu=menu_5_2'>deuxième sous menu5</a><td/>
    <td><a href='index.php?menu=menu5&ss_menu=menu_5_3'>troisième sous menu5</a><td/>
    <td><a href='index.php?menu=menu5&ss_menu=menu_5_4'>quatrième sous menu5</a><td/>
    <td><a href='index.php?menu=menu5&ss_menu=menu_5_5'>cinquième sous menu5</a><td/>
    </tr>
    </table>
    <?php
    }
    ?>
    Bien à vous

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

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •