Dotclear

mendoz

Membre

Inscription : 2010-02-04

[Astuce] Un menu horizontal avec la liste des catégories

Bonjour
Je cherchais un moyen facile de faire un menu horizontal. Le Plugin Menu me convenais, mais ça devenais laborieux pour mettre à jour les URL dans le plugin.

J'ai donc modifié ma façon de faire en partant du principe que si mes billets sont bien rangés dans les catégories et sous catégories, il suffisait d'afficher la liste des catégories dans le menu

Après quelques bidouillage et pas mal de renseignements pris sur le forum, je suis arrivé à un truc correct (pour moi) et facilement intégrable
J'en fais donc profiter à mon tour

J'ai pris le thème par default (BlowUp) et j'ai volontairement épuré le CSS pour que ca puisse marché sur plusieurs thèmes

Dans le principe :
1- Dans _top.html du répertoire themes>default>tpl>_top.html

<div id="top">
  <h1><span><a href="{{tpl:BlogURL}}">{{tpl:BlogName encode_html="1"}}</a></span></h1>
  
  <!-- # --BEHAVIOR-- publicTopAfterContent -->
  {{tpl:SysBehavior behavior="publicTopAfterContent"}}

<ul id="menu">
	<tpl:Categories level="1">	
		<tpl:LoopPosition start="1" length="10"> 
			<li class="{{tpl:CategoryIfCurrent}}"><a href="{{tpl:CategoryURL}}">{{tpl:CategoryTitle encode_html="1"}}</a>
				<tpl:CategoryFirstChildren>
					<tpl:CategoriesHeader><ul class="sousMenu"></tpl:CategoriesHeader>
						<li><a href="{{tpl:CategoryURL}}">{{tpl:CategoryTitle encode_html="1"}}</a></li>
           <tpl:CategoriesFooter></ul></tpl:CategoriesFooter>
				</tpl:CategoryFirstChildren>
			</li>
			<tpl:CategoriesFooter>
</ul>
			</tpl:CategoriesFooter>
		</tpl:LoopPosition>
	</tpl:Categories>

</div>

<p id="prelude"><a href="#main">{{tpl:lang To content}}</a> |
<a href="#blognav">{{tpl:lang To menu}}</a> |
<a href="#search">{{tpl:lang To search}}</a></p>

2- Dans style.css du répertoire themes>default rajouter :

#menu {list-style-type: none;margin: 0;	padding: 0;position: absolute;	top: 0;	left: 0;}
#menu li{	float: left; margin: 0;	padding: 4px 8px; border: 0;}
#menu li a:link, #menu li a:visited {display: block;	margin: 0;padding: 4px 8px;text-decoration: none;}
#menu li a:hover { }
#menu li a:active { }
#menu .sousMenu {display: none;	list-style-type: none;	margin: 0;	padding: 0;border: 0;}
#menu .sousMenu li {float: none;}
#menu .sousMenu li a:link, #menu .sousMenu li a:visited {display: block;text-decoration: none;}
#menu .sousMenu li a:hover {}
#menu li:hover > .sousMenu { display: block; }

On a maintenant un menu horizontal avec sous menu.
Le reste c'est de l'habillage avec du CSS

Testé sous plusieurs navigateurs et c'est ok (IE6 n'affichera pas les sous menu !!)
Le code peut ne pas être optimal, si des experts ont des remarques ou suggestions, je suis preneur