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

EDI, CMS, Outils, Scripts et API PHP Discussion :

[Forum] Menu vertical avec ouverture automatique


Sujet :

EDI, CMS, Outils, Scripts et API PHP

  1. #1
    Membre confirmé
    Inscrit en
    Décembre 2004
    Messages
    138
    Détails du profil
    Informations forums :
    Inscription : Décembre 2004
    Messages : 138
    Par défaut [Forum] Menu vertical avec ouverture automatique
    Bonjour,

    J'ai actuellement un menu vertical statique avec des liens du style index.php?id_page=100

    Mes pages sont donc toutes reprises dans une table sql
    J'aimerai que ce menu deviennent dynamique c'est à dire que le menu se développe à l'endroit de la page en cours et qu'il ferme les autres menu.
    mon site se trouve à l'adresse suivante : http://cpdt.wallonie.be
    Les solutions javascript que j'ai essayée permettait au menu de développer plus ou moins les différentes parties, mais il refermait tout dès qu'on chargeait une page étant donné que c'est une structure php...
    Il faudrait qu'il retienne l'id de la page du liens cliqué et qu'il s'ouvre à cet endroit...

    Quelqu'un pourrait-il m'aider... ça doit être un truc avec des get et post m'a-t-on dit mais je n'y comprend rien...
    MErci

    Greg

  2. #2
    Rédacteur
    Avatar de Yoshio
    Homme Profil pro
    Inscrit en
    Septembre 2005
    Messages
    1 732
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2005
    Messages : 1 732
    Par défaut
    N'oublie pas que le PHP est un script coté serveur !

    Par contre tu pourrais faire quelques chose en le couplant a du CSS.

    Genre deux classe :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    .extend {
    }
     
    .normal {
    }
    Tu fait un script pour savoir quel classe tu dois utiliser dans ton menu (comme les tableau qui change de couleur a chaque ligne)

    Si tu dois étendre tu met .extend et tu recup les lien du bloc
    Sinon ben tu met .normal et tu fait plus rien.

    Doit y avoir surement d'autre moyens pour le faire

  3. #3
    Membre confirmé
    Inscrit en
    Décembre 2004
    Messages
    138
    Détails du profil
    Informations forums :
    Inscription : Décembre 2004
    Messages : 138
    Par défaut
    euuuh, tu pourrais pas donner un exemple?
    J'suis assez débutant avec le php...

  4. #4
    Rédacteur
    Avatar de Yoshio
    Homme Profil pro
    Inscrit en
    Septembre 2005
    Messages
    1 732
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2005
    Messages : 1 732
    Par défaut
    j'ai retouvé ce code pour l'alterance des tableau qui devrais t'aider :

    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
    $table_prefix = 'phpbb_'; 
    $sql = "REQUETE SQL"; 
    $result = mysql_query($sql);
    
    // Initialisation des 2 couleur possible (lie aux CSS)
    $couleur_ligne = array('postCouleur1','postCouleur2');
    
    echo '<div class="blockHeader">Les 5 derniers topics</div>';
    	
    while($data = mysql_fetch_array($result)) {
    	$color = $couleur_ligne[$i % 2];
        $postTitle = '<a href='.$phpbb_root_path.'viewtopic.php?t='.$data['topic_id'].'>'.$data['topic_title'].'</a>';
        $date = date('d/m/y', $data['topic_time']);
    	$profile = '<a href="'.$phpbb_root_path.'profile.php?mode=viewprofile&u='.$data['user_id'].'">'.$data['username'].'</a>';
    	$comment ='<a href="'.$phpbb_root_path.'viewtopic.php?t='.$data['topic_id'].'">'.$data['topic_replies'].' commentaire(s)</a>';
    
    	echo '<div class="'.$color.'">';
     	echo '<p class="postTitre">'.$postTitle.'</p>';
     	echo '<p class="postAuteur">Post par '.$profile.' le '.$date.' - '.$comment.'</p>';
    	echo '</div>';
    	
    	if ($i >= 5) {
    		break;
    	}
    	$i++;
    }
    L'exemple servait a récupérer les dernier topic d'un forum phpbb et les afficher sur le site sous forme de tableau avec alternance de couleur


    En passant :
    En 2005, le gouvernement Gouvernement wallon a décidé de compléter cette l'offre existante en confiant
    http://cpdt.wallonie.be/index.php?id_page=4

    Il y a un léger problème dans cette phrase ...

  5. #5
    Membre confirmé
    Inscrit en
    Décembre 2004
    Messages
    138
    Détails du profil
    Informations forums :
    Inscription : Décembre 2004
    Messages : 138
    Par défaut
    merci pour la relecture
    Je vois que tu es un bon citoyen wallon
    Par contre, moi je suis encore un piètre webmaster...
    Je ne m'y retrouve pas avec ton code...
    J'ai l'impression que cela ne résoudra pas le problème lié au fait que étant donné que php est un langage serveur ( ) à chaque chargement, il va fermer le menu

  6. #6
    Rédacteur
    Avatar de Yoshio
    Homme Profil pro
    Inscrit en
    Septembre 2005
    Messages
    1 732
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2005
    Messages : 1 732
    Par défaut
    Normalement ca ne va pas fermer le menu mais le remettre à jour a chaque chargmeent.

    Tu as dit que tes pages étaient stockée dans ta base de données.

    Il suffirait que tu récupère quel page l'utilisateur est en train de visiter et d'appliquer au menu la class adéquate.

    1- tu récupères les info pour le menu (page, lien, ...) via la db
    2- tu récupères l'id de ta page actuelle
    3- tu construit le menu :
    4- en fonction du point 2 on affiche ou non les sous menu

    J'ai trouvé vite fait un lien qui devrais au mieux t'aider car je epnse qu'il fait exactement ce que tu veux faire :
    http://www.gphp.net/articles,12.php


    Mais j'essaye de te donner une solution avec php/css car ca serait plutot du javascript pour ce genre de chose (mais je n'y connais rien a ce language et je ne veux aps l'apprendre lol)

  7. #7
    Membre confirmé
    Inscrit en
    Décembre 2004
    Messages
    138
    Détails du profil
    Informations forums :
    Inscription : Décembre 2004
    Messages : 138
    Par défaut
    Citation Envoyé par omura
    Normalement ca ne va pas fermer le menu mais le remettre à jour a chaque chargmeent.

    Tu as dit que tes pages étaient stockée dans ta base de données.

    Il suffirait que tu récupère quel page l'utilisateur est en train de visiter et d'appliquer au menu la class adéquate.
    et en code, ça donnerait quoi? parce que je n'y arrive pas...

    Je pensais à un menu du style :

    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
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Vertical expanding menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     
    <script type="text/javascript">
    <!--
    window.onload=montre;
    function montre(id) {
    var d = document.getElementById(id);
    	for (var i = 1; i<=10; i++) {
    		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    	}
    if (d) {d.style.display='block';}
    }
    //-->
    </script>
     
     
    <style type="text/css">
    <!-- 
    body {
    margin: 0;
    padding: 0;
    background: white;
    font: 80% verdana, arial, sans-serif;
    }
    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #menu {
    position: absolute;
    top: 0;
    left: 0;
    }
    #menu {
    width: 15em;
    }
    #menu dt {
    cursor: pointer;
    margin: 2px 0;;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
    border: 1px solid gray;
    background: #ccc;
    }
    #menu dd {
    border: 1px solid gray;
    }
    #menu li {
    text-align: center;
    background: #fff;
    }
    #menu li a, #menu dt a {
    color: #000;
    text-decoration: none;
    display: block;
    border: 0 none;
    height: 100%;
    }
     
    #menu li a:hover, #menu dt a:hover {
    background: #eee;
    }
     
    .mentions {
    position: absolute;
    top : 300px;
    left : 10px;
    color: #000;
    background-color: #ddd;
    }
    -->
    </style>
    </head>
     
    <body>
     
    <dl id="menu">
     
    		<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
     
    		<dt onclick="javascript:montre('smenu2');">Menu 2</dt>
    			<dd id="smenu2">
    				<ul>
    					<li><a href="#">Sub Menu 2.1</a></li>
    					<li><a href="#">Sub Menu 2.2</a></li>
     
    					<li><a href="#">Sub Menu 2.3</a></li>
    				</ul>
    			</dd>	
     
    		<dt onclick="javascript:montre('smenu3');">Menu 3</dt>
    			<dd id="smenu3">
    				<ul>
    					<li><a href="#">Sub Menu 3.1</a></li>
    					<li><a href="#">Sub Menu 3.1</a></li>
     
    					<li><a href="#">Sub Menu 3.1</a></li>
    					<li><a href="#">Sub Menu 3.1</a></li>
    					<li><a href="#">Sub Menu 3.1</a></li>
    					<li><a href="#">Sub Menu 3.1</a></li>
    				</ul>
    			</dd>
     
    		<dt onclick="javascript:montre('smenu4');">Menu 4</dt>
    			<dd id="smenu4">
    				<ul>
    					<li><a href="#">Sub Menu 4.1</a></li>
    					<li><a href="#">Sub Menu 4.1</a></li>
    				</ul>
    			</dd>
     
     
    </dl>
     
     
    </body>
    </html>


    mais dans ce type de menu, le tout reste à ce que quand on clique sur le liens, ce menu doit rester ouvert au bon endroit...

  8. #8
    Rédacteur
    Avatar de Yoshio
    Homme Profil pro
    Inscrit en
    Septembre 2005
    Messages
    1 732
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2005
    Messages : 1 732
    Par défaut
    Faire un menu comme ca simplement en php ce n'est pas possible. Tu est obliger de le mettre avec du javascript.

    J'ai vite fait un petit script qui pourra te mettre sur la voie. Personellement je ne touche pas au javascript.

    En php / css ca donnerais ceci :
    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <link href="test.css" media="screen" rel="stylesheet" />
    </head>
    <?php
    // Tableau que tu recup à partir de ta db
    $menuArray = array ('Menu 1' => array(
    						'Acceuil' => 'lien',
    						'Compte' => 'lien',
    						'Inscription' => 'lien'
    					),
    					'Menu 2' => array(
    						'Euh' => 'lien',
    						'Euh 2' => 'lien',
    					),
    );
     
    // Groupe actuel
    $group = 'Menu 1';
    // Page actuel
    $page = 'Compte';
     
    // Début du menu
    $menu = "<ul id=\"menu\">\n";
     
    // On continue le menu
    foreach ($menuArray as $id => $info) {
    	// On affichhe les groupe
    	$menu .= '<li class="normal">'.$id."</li>\n";
     
    	// Si le groupe == du grouep courant (sinon on fait rien)
    	if ($group == $id) {
    		foreach ($info as $label => $link) {
    			if ($page == $label) {
    				$bold = '<span class="currentPage">';
    				$bold .= $label;
    				$bold .= '</span>';
    				$label = $bold;
    			}
    			$menu .= '<li class="extend"><a href="'.$link.'">'.$label."</a></li>\n";
    		}
    	}
    }
     
    $menu .= "</ul>\n";
     
    echo $menu;
    ?>
    <body>
    </body>
    </html>
    avec un peu de 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
    ul#menu {
    	text-decoration: none;
    	list-style-type: none;
    }
     
    .normal {
    	font-weight: bold;
    	font-variant: small-caps;
    }
     
    .extend {
    	list-style: inside square;
    	text-indent: 20px;
     
    }
     
    .currentPage {
    	font-weight: bold;
    	text-decoration: underline;
    }
    Tu devra surement couplé ce script avec du javascript pour que tu obtienne ce que tu veux.

    Arrange le tableau comme tu le veux. Je saurais aps t'en dire plsu car je ne sait aps comment est construit ta db.

  9. #9
    Membre confirmé
    Inscrit en
    Décembre 2004
    Messages
    138
    Détails du profil
    Informations forums :
    Inscription : Décembre 2004
    Messages : 138
    Par défaut
    ma DB est construite selon le tutoriel http://pbnaigeon.developpez.com/tuto...ite-dynamique/

    En fait j'ai une table "pages" avec les colonnes suivantes
    ID, titre, mots-clés, descriptions,contenu, id_parent

    la colonne "contenu" reprenant le lien absolu de la page

  10. #10
    Rédacteur
    Avatar de Yoshio
    Homme Profil pro
    Inscrit en
    Septembre 2005
    Messages
    1 732
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2005
    Messages : 1 732
    Par défaut
    bah tu as toutes les info nécessaire pour alors suffit de chercher un ptit peu pour bien remplir le tableau.

Discussions similaires

  1. [HTML 5] faire un menu vertical avec des liens
    Par Kuchiki Byakuya dans le forum Balisage (X)HTML et validation W3C
    Réponses: 10
    Dernier message: 08/02/2009, 20h21
  2. Menu vertical avec javascript
    Par niceen dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 17/04/2008, 01h07
  3. Réponses: 4
    Dernier message: 24/07/2007, 08h22
  4. Problème d'espace sur IE menu vertical avec image de fond
    Par dom dom from the dom dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 09/03/2007, 11h30
  5. Menu déroulant avec préselection automatique
    Par Invité dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 16/06/2005, 12h11

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