Bodieu
Paul VINCENT, un blog full XML au coeur de la Bretagne
Paul VINCENT, un blog full XML au coeur de la Bretagne
samedi 27 novembre 2010
Pluxml est un outil très simple, très facile à habiller. Pour avoir un menu en accordéon, j'ai créé une page statique formaté XML, complété la feuille de style et adapté un template pour la lecture selon SimpleXML.
Voici le résultat
Le code peut facilement être adapté à votre contexte.
La structure est à 3 niveaux indépendants :
Dans le fichier style.css, ajouter les lignes suivantes
/* Accodeon */ #container { width: 600px; margin: 20px auto; } #accordion .item { width: 400px; height: 30px; /* height = total height of A child element */ overflow: hidden; transition: height ease-in-out 500ms; /* css3 transition */ -o-transition: height ease-in-out 500ms; -moz-transition: height ease-in-out 500ms; -webkit-transition: height ease-in-out 500ms; border: 1px solid blue; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-bottom: 2px; } #accordion a { display: block; height: 20px; line-height: 20px; background: #D2D2FF; padding: 5px; color: #1e1e1e; color: blue; text-decoration: none; } #accordion p { height: 150px; padding: 5px; color: blue; } #accordion div:hover { height: 100px; /* height = total height of A and P elements */ } #accordion div:hover a { border-bottom: 1px solid #ccc; font-weight: bold; }Créer le template, static-accordeon.php
<?php include(dirname(__FILE__).'/header.php'); # On insere le header ?> <h2 class="entry-title"><?php $plxShow->staticTitle(); ?></h2><br /> <div class="post clear"> <div class="entry-content"> <?php $dir = 'data/statiques'; # Récupération et affichage de la liste des fichiers sous forme de liste $glob = plxGlob::getInstance($dir); $file1= $plxShow->staticId() ; if ($files = $glob->query('/[a-z0-9-_]+.(php)$/')) { foreach($files as $filename) { $file = $dir.'/'.$filename; $rest = substr($filename, 0, 3); if($file1== $rest) $document = simplexml_load_file($file); } } ?> <div id="container"> <div id="accordion"> <?php foreach($document->organisme as $organisme) { echo '<div class="item"><a href='.$organisme->nom->plus.'>' ,$organisme->nom.'</a>'; if ($organisme->lien=='') { echo '<p>' , $organisme->contenu.'</p> </div>'; } else {echo '<p>' , $organisme->contenu.'<a href='.$organisme->lien.'>lien</a></p> </div>'; } } ?> </div> </div> </div> </div><!-- end .post --> <div class="clear hr" style="width: 620px; height: 10px;"></div> <?php include(dirname(__FILE__).'/sidebar.php'); # On insere la sidebar ?> <?php include(dirname(__FILE__).'/footer.php'); # On insere le footer ?>Créer la page statique avec l'option static-accordeon.php
<?xml version="1.0" encoding="utf-8"?> <document> <organisme> <nom> <plus>http://vincentpaul.info/phpgedview/</plus>Site Généalogique de Paul VINCENT </nom> <contenu>Les familles de Mohon : Bouté, Besnard, Bily, Blandel, Bouédo, Boulineau, Broban, Cadoret, Conan, Danet, Ferrière, Giraud, Jaulme,Guernic, Le Quenderf,Urvoy, Vaguet, Vincent</contenu> </organisme> <organisme> <nom> <plus>http://chnoury.perso.sfr.fr/genealogie.htm</plus>Généalogie de Christine AUGOT </nom> <contenu>Les familles de Mohon : Baron, Bihel, Broban, Gervais, Gruyer, Raoux</contenu> </organisme> <organisme> <nom> <plus>http://yanick.janvier.pagesperso-orange.fr/</plus>Site de Yanick JANVIER </nom> <contenu>Les familles de Mohon : Aubry, Baron, Barre, Bellamy, Boudéo, Broban, Colin, Courtel, Deslandes, Gaudin, Gicquel, Goupil, Grippon, Guillemaud, Guillemot, Hédan, Hivert, Janvier, Le Blanc, Le Floc, Le Gall, Le Moine, Leblanc, Lefloch, Roblot, Rouxel, Trémen, Urvoy, Vaguet</contenu></organisme> <organisme> <nom> <plus>http://www.jouhier.com/</plus>Généalogie des Familles JOUHIER </nom> <contenu>Les familles de Mohon : Baptiste, Hugue, Mallard, Tual, Baron, Joubier, Querbouet, Darret, Jouhier, Texier</contenu> </organisme> </document>