{Guide des revendeurs}

Des menus de navigation hautement personnalisables

3 menus différents vous permettent d'organiser votre linking interne

Les menus de navigation proposent une architecture normalisée et complète qui permet un haut niveau de personnalisation.

4 menus différents vous sont proposés :

  1. Le Top Menu qui a plutôt vocation à être placé en haut des pages : {topMenu}
  2. Le Nav Menu qui correspond à priori au menu principal du site : {navMenu}
  3. Le Footer Menu qui se retrouvera souvent en pied de page : {footerMenu}
  4. Le Lang Menu qui retournera la liste des langues du site (avec le lien), actives et avec du contenu sur la Home : {langMenu}

Veuillez noter qu'aucun de ces menus n'est obligatoire et que rien ne vous impose de les positionner à tel ou tel endroit. Notez également que vous pouvez choisir pour chaque page (colonne latérale droite) de la faire apparaître dans tel ou tel menu, ou à l'inverse dans aucun des menus.

Explications :

Le nom des menus est suggestif et invite à les positionner d'une certaine manière. Notez que les 3 menus retournent l'information sous le même format et il n'y aucune différence : seul leur nom et le nom des classes CSS affectées change.

Voici un exemple de retour pour le tag {navMenu} :

<nav role="navigation" class="menu" id="menu_nav"
    <
ol id="level_1" class="ol_nav"
        <
li id="nav_5" class="selectedparent">
            <
a href="http://cmsmedia.fr/template" class="a_nav" id="a_nav_5">Gestion des Templates <span class="sub_menu">Gestion des Templates</span></a>
            <
ol id="level_2">
                <
li id="nav_6">
                    <
a href="http://cmsmedia.fr/templates-personnalises" class="a_nav" id="a_nav_6">
                    
Templates personnalisés</a>
                    <
ol id="level_3">
                        <
li id="nav_7">
                            <
a href="http://cmsmedia.fr/template-personnalise" class="a_nav" id="a_nav_7">
                            
Création d'un template personnalisé</a>
                        </li> 
                    </li> 
                </ol> 
            </li>
        </ol> 
    </li> 
        <li id="nav_9" class="select">
            <a href="http://cmsmedia.fr/navigation" class="a_nav active" id="a_nav_9">Menus de navigation
            <span class="sub_menu">Organisation des menus de navigation</span></a>
        </li> 
        <li id="nav_10">
            <a href="http://cmsmedia.fr/memcache" class="a_nav" id="a_nav_10">Cache Serveur
            <span class="sub_menu">Gestion de la mise en cache</span></a>
        </li> 
    </ol>
</nav> 

Décortiquons quelque peu ce code...

<nav role="navigation" class="menu" id="menu_nav"

On remarque ici l'ouverture du menu avec une balise HTML5 nav. Si le doctype est XHTML strict, la balise nav est remplacée par un div classique.
Vous voyez que l'on affecte à cette balise une class="navigation" et un id="menu_nav". Cela permet de lui appliquer différents effets à l'aide de sélecteurs CSS.

<ol id="level_1" class="ol_nav"

Vous remarquez ensuite que la fonction renvoie une suite normalisée ol li (ol pour permettre la numérotation, qu'il suffit de désactiver via CSS). Cette suite permet l'imbrication de balises pour avoir plusieurs niveaux ou créer des menus déroulants par exemple.
Tout est ensuite affaire de CSS : la balise ol est affectée d'une class="ol_nav" qui permet d'appliquer toutes sortes d'effets de style. Chaque niveau d'imbrication des balises ol est également marqué par un ID unique suivi du numéro qui lui correspond : id="level_1", id="level_2"...

Vous remarquez également que chaque balise li possède également son propre ID unique qui permet de la cibler en particulier.

<a href="http://cmsmedia.fr/templates-personnalises" class="a_nav" id="a_nav_6"

Les liens possèdent aussi une classe commune "a_nav" qui permet d'affecter un même style à l'ensemble des liens. Chaque lien possède également un ID propre numéroté. Remarquez pour le lien id="a_nav_5" la présence d'un sous menu :

<span class="sub_menu">Gestion des Templates</span

Cette option se règle pour chaque page dans la colonne latérale droite et reprend l'intitulé exact de la balise title.


Enfin, et c'est le plus important, la gestion des liens actifs :

<li id="nav_9" class="select">
            <
a href="http://cmsmedia.fr/navigation" class="a_nav active" id="a_nav_9">Menus de navigation
            
<span class="sub_menu">Organisation des menus de navigation</span></a>
        </
li

li se voit affecter une class="select" et le lien a href id="nav_9" une class="active". Cela vous permet de gérer le focus et les liens actifs pour les mettre en surbrillance par exemple.

Pour les menus imbriqués du type li ol li, la balise li parente reçoit une class="selectedparent" qui permet de gérer la surbrillance de ses enfants, lorsque l'un d'entre eux est actif.

Faites un test et regardez le code source, il n'y a pas meilleure explication. Bien entendu, toutes ces classes ne sont pas évidentes à appréhender, à moins d'être un as du CSS et des menus. Nous avons en stock différents modèles à fournir, qu'il suffira d'adapter.


Le principe est exactement le même pour les 3 autres menus, si ce n'est que le nom des classes varie. Vous pouvez donc faire un menu déroulant pour le Top, un menu animé pour le Nav et un menu simple pour le footer, seulement avec CSS et un tag placer dans votre code, sans avoir à taper 1 seule ligne de HTML ou de PHP !

A une chose encore, l'extrait de code présenté pour ce menu est extrait du menu gauche de ce site de documentation. Quand vous voyez le rendu, vous savez que l'on peut tout faire avec ce CMS.

Sachez que ce menu gauche est obtenu sans une seule ligne de javascript, uniquement avec CSS3 !

Et surtout, faites quelques essais, observez le code source, et vous gagnerez très rapidement énormément de temps et tirerez pleinement profit de cet outil.

registry->website); ?>
Page rendered in 0.0099 seconds - © Média Camp