Demonstration de menu "CSS" pour l'extension dotclear "Simple Website"
Par Olivier Azeau, le 26 mars 2008, 23:28 - Amanèls
- Lien permanent
-
Le principal avantage du plugin 'simpleWebsite' est de, simultanément, définir au niveau d'un blog une hiérarchie de sections et de fournir des éléments de template dotclear pour parcourir et présenter cette hiérarchie sans vraiment de limite sur la forme.
Par ailleurs, les feuilles de style en cascade, plus connues sous le nom de CSS permettent aujourd'hui d'avoir des affichages évolués sans rajout de code (javascript ou autre). Les menus déroulants en sont un exemple, comme on peut le voir sur cette page.
J'ai donc repris le CSS de cette page pour afficher dynamiquement un menu déroulant comprenant l'ensemble des sections définies sur "simpleWebsite". Voici le résultat pour mon blog :
Voilà donc un menu déroulant facile à inclure sur un blog dotclear.
On notera toutefois que l'affichage dépend du navigateur utilisé. Si, comme moi, vous utilisez Mozilla Firefox, pas de problème. De même avec la plupart des navigateurs respectant les standards du W3C. Finalement, le seul problème réside dans l'utilisation d'Internet Explorer (on s'en serait douté). Il faut au moins avoir la version 7 pour pouvoir profiter de ce menu déroulant.
Voici le texte de template à utiliser pour générer le menu :
<style type="text/css" media="screen">
@import url({{tpl:BlogThemeURL}}/menu.css);
</style>
<tpl:swDefineBlock name="MenuEntries">
<li><a href="{{tpl:EntryURL}}">{{tpl:EntryTitle encode_html="1"}}</a>
<ul>
<tpl:swMenuLevelEntries>
{{tpl:swReuseBlock name="MenuEntries"}}
</tpl:swMenuLevelEntries>
</ul>
</li>
</tpl:swDefineBlock>
<div class="skipnav"><a href="#nonav">Aller au contenu</a></div>
<ul id="nav">
<tpl:swMenuLevelEntries parent_id="home">
{{tpl:swReuseBlock name="MenuEntries"}}
</tpl:swMenuLevelEntries>
</ul>
<hr id="nonav">
Le fichier menu.css est celui de l'exemple chez http://denilsonsa.selfip.org/~denilson/.
Certains seront peut-être surpris par la présence du lien invisible <a href="#nonav">. Il sert en fait pour les affichages sans feuilles de style tels les navigateurs en mode texte. Dans un tel contexte, le menu est affiché comme une liste, qui peut être très longue et ce lien sert à aller au contenu de la page à la fin de la liste.
Pour s'en convaincre, il suffit de faire afficher la page actuelle à travers un visualisateur Lynx
Un dernier mot, enfin, pour expliquer la présence du menu en plein milieu de ce billet.
En fait, ce billet dispose d'un fichier template personnalisé (simpleWebsite permet cela sur tous les billets, pas seulement sur ceux représentant une section) où le menu est affiché entre l'extrait du billet et son contenu...


Commentaires
Existe t-il un endroit ou tu
liste les fonctions templates qu'il est possible d'appeler.
J'ai vu que tu avais fait un billet d'exemple sur ton blog mais si par exemple je veux faire un menu particulier avec une classe "sub" pour un premier sous niveau puis une classe sub2 et sub3 pour 2 autres sous niveau puis-je appeler chacun des niveau
dans leur contexte?
Si je suis ton exemple normalement, si je veux appeler mon premier niveau de menu j'insère :
///
<tpl:swDefineBlock name="MenuEntries">
<li><a href="{{tpl:EntryURL}}">{{tpl:EntryTitle encode_html="1"}}</a></li>
</tpl:swDefineBlock>
///
Mais ça ne m'affiche rien...
Je n'ai pas compris la question.
Un tpl:swDefineBlock n'affiche rien. Il faut l'invoquer avec un tpl:swReuseBlock.