Tuto Menu Déroulant

subma · avril 2013

Bonjour,

J'utilise pluxml depuis 3 ans, et je trouve ce projet excellent en terme de simplicité et de pédagogie.
Je viens de passer à la 5.1.7 avec un thème perso, et uniquement des pages statiques.
Je souhaite ventiler une galerie sur plusieurs pages statiques à partir du menu du header, je me bat avec la création d'un menu déroulant au survol de la souris depuis 2 semaines, sans trouver de solution.

Ne trouvant pas de tutoriel sur le wiki, j'ai suivi pleins de pistes sur le forum...

Je sais que pour la plupart des intervenants actifs du forum sont des pros et beaucoup de solutions sont données, mais elles ne sont pas accessibles à un débutant comme moi.

La solution la plus simple semblait être celle de Danielsan qui semble utiliser la fonction groupe avec les pages statiques. Mais je ne parviens pas à personnaliser ce code pour qu'il s'adapte à mon site.

Où placer le code dans header? Quel élément dois-je modifier ?

Tout ce que j'arrive à faire pour le moment c'est afficher des listes à puces dans mon menu...

Merci à ceux qui pourront m'aider!
(Je pense que d'autres attendent aussi cet éclairage!)

Jerry Wham · avril 2013

Si tu parviens à afficher une liste à puces ce n'est plus qu'une simple histoire de css et/ou de javascript. As tu une adresse de test qui pourrait nous montrer où tu en es vraiment?

subma · avril 2013

Bien sur.
J'en suis là!

http://www.mathias-aubrun.fr/index.php?static2/quelquesrealisations

Il me manque comment lier cette liste avec mon menu pour qu'il soit déroulant.

[== Indéfini ==]
<?php if (!defined('PLX_ROOT')) exit; ?>
<!DOCTYPE html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title><?php $plxShow->pageTitle(); ?></title>
<?php $plxShow->meta('description') ?>
<?php $plxShow->meta('keywords') ?>
<?php $plxShow->meta('author') ?>
<?php $plxShow->templateCss() ?>
<link rel="icon" href="<?php $plxShow->template(); ?>/img/favicon.png" />
<link rel="stylesheet" href="<?php $plxShow->template(); ?>/style.css" media="screen"/>
<link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss') ?> " />
<link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires') ?> " />
<!--[if lt IE 9]>
<script src="<?php $plxShow->template(); ?>/js/html5ie.js"></script>
<script src="<?php $plxShow->template(); ?>/js/respond.min.js"></script>
<![endif]-->
</head>

<body id="top">

	<header role="banner">

		<div class="content">

			<div id="header-title">
				<?php $plxShow->mainTitle('link'); ?>
			</div>
			<p>
				<?php $plxShow->subTitle(); ?>
			</p>

		</div>


<?php // astuce statics classées par groupe !!!
if($plxShow->plxMotor->aStats) { // s'il y a des pages statics
    $menu_groupe = array(); // création du tableau des groupes
    $group_name='';
 
    // étape 1: à partir de la liste des statics, nous allons extraire leur groupe et effectuer un classement par groupe
 
    foreach($plxShow->plxMotor->aStats as $k=>$v) { // on boucle sur la liste des statics
        if(!empty($v['group']) AND $group_name!=$v['group']) { // si elles sont dans un groupe
            array_push($menu_groupe, $v['group']); // on remplie le tableau des groupes avec tous les noms de groupe existants
        } else {}
    }
 
    $menu_groupe = array_unique($menu_groupe); // on dédoublonne le tableau
    $menu_groupe = array_flip($menu_groupe); // on inverse les clefs / valeurs
    foreach($menu_groupe as $k=>$v) {
        $menu_groupe[$k] = array(); // on crée un sous tableau pour chaque groupe
    }
 
    foreach($plxShow->plxMotor->aStats as $k=>$v) { // on boucle sur la liste des statics
        if($v['active'] == 1 AND $v['menu'] == 'non') { // si la page est active et NON-affichée dans le menu ( les statics paramétrées comme affichée dans le menu seront gérées par la fonction staticList de PluXml )
            if($v['group']!="") { // si le groupe existe
                $menu_groupe[$v['group']][$k] = $v; // on rajoute une entrée pour chaque page static dans chaque groupe
            } else {}
        }else{}
    }
 
    // étape 2: affichage du menu
    foreach($menu_groupe as $k=>$v){ // on boucle sur les groupes
            echo "<li class=\"menu_static_groupe static_groupe_".plxUtils::title2url($k)."\">".$k."\n"; // nouvel élément du menu avec le nom du groupe et une class associée
            echo "<ul>\n"; // création d'une liste des statics de ce groupe
            foreach($menu_groupe[$k] as $i=>$j){ // on boucle sur chaque page static du groupe
                $url = $plxShow->plxMotor->urlRewrite('?static'.intval($i).'/'.$menu_groupe[$k][$i]['url']); // formatage de l'url
                 // gestion du status
                if($plxShow->staticId()){ // si nous sommes sur une page static
                    $idStat = $plxShow->staticId(); // on récupère l'identifiant de la static active
                    // on compare cet identifiant avec celui du menu
                    if($idStat==intval($i)){ // s'il est égale à celui du menu, le status est actif
                        $status = "active";
                    } else {
                        $status = "no-active";
                    }
                }else{
                    $status = "no-active";
                }
                echo "<li class=\"".$status."\"><a href=\"".$url."\" title=\"".$menu_groupe[$k][$i]['name']."\">".$menu_groupe[$k][$i]['name']."</a></li>\n"; // création du lien vers la static
            } // fin de la boucle des statics
            echo "</ul>\n"; // on ferme la liste des statics
            echo "</li>\n"; // on ferme l'élément du menu
    } // fin de la boucle des groupes
}else{} // magique ! ^^^
?>




</header>


	<nav role="navigation">


		<div class="content">

			<ul>






				<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li id="#static_id"><a href="#static_url" class="#static_status" title="#static_name">#static_name</a></li>'); ?>

				<?php $plxShow->pageBlog('<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>

<p>

<p/>

<IMG SRC="http://www.mathias-aubrun.fr/data/images/redline.png"
ALIGN="left"


			</ul>


		</div>

	</nav>

merci de ton aide!

subma · avril 2013

En fait ce que je n'arrive pas à comprendre, c'est si le code de danielsan est un "tout en un " qui devrait afficher un menu déroulant (dans ce cas c'est une de mes modifs qui fait que ça ne marche pas), ou si je doit encore ajouter un autre morceau de code pour lier cette liste à mon menu (et dans ce cas plus besoin de m'acharner sur cette partie)?
Plus j'y pense, et que tu abordes un problème de css, plus je me dis que comme je vois pas d'arguments spécifiant une taille ou une couleur ou un truc genre "hoover",
c'est qu'il faut que j'ajoute du .css en plus? dans le header? dans style.css?

danielsan · avril 2013

as-tu une adresse pour qu'on puisse voir ce que ça donne ?
as-tu bien suivi les étapes pour l'astuce ?
dans ton code, la balise IMG n'est pas fermée ...

danielsan · avril 2013

et tes balises de paragraphe + ton image doivent-être en dehors de ta liste

subma · avril 2013

merci de ton intérêt Danielsan, et pour ton code que j'essaie maladroitement d'utiliser.
La modif image et paragraphe est faite, tout à la fin du header, c'est plus propre comme ça!

Ma page est visible ici.

est ce que j'ai bon pour :

Création et édition des pages statiques
Identifiant Groupe Titre Url Active Ordre Menu
accueil Page 004
Page 001
Page 002
Page 003
Page 005 galerie mobilier mobilier oui 5 masquer
Page 006 galerie luminaires luminaires oui 6 masquer
Page 007 galerie galerie oui 7 afficher

Mon but étant d"avoir un bouton "galerie" intégré dans mon menu qui me propose au survol de cliquer sur "mobilier" ou "luminaires" ou toutes les galeries suivantes que j'ajouterai ensuite...
Je ne vois plus ce que je dois faire à ce stade...

danielsan · avril 2013

sur ta page je vois bien une liste galerie avec les entrées mobilier et luminaires ... il faut mettre ce code dans ton menu après staticList

subma · avril 2013

Voilà ce que j'obtiens : ici donc ca fonctionne très bien au niveau de la récolte des groupe et de leurs pages statiques, et je t'en remercie!!!

mais pour avoir un menu déroulant comme sur ton site http://www.samare.net, faut-il que je trouve un script ou css et l'ajouter en plus?
désolé de ne pas réussir à comprendre par moi-même... mais j'ai besoin qu'on m'explique!

danielsan · avril 2013

oui pour une mise en forme à "étage" il te faut une feuille de style CSS.
Tu peux t'inspirer de celle du menu listant les articles classés par catégorie

Tuto Menu Déroulant

Réponses