Menu de navigation par onglet avec des effets de transition

L’environnement Tabs comprend une fonction jQuery, un modèle html et deux feuilles de styles – l’une standard et l’autre pour Internet Explorer évidemment – pour fonctionner correctement.

La structure html

Le modèle html se découpe en deux parties : les titres des onglets et le contenu des onglets. Une division encadre la structure html, un id, tabs, lui est affecté et servira à appeler la fonction jQuery. Une liste non numérotée est utilisée pour les titres des onglets, la classe anchors lui est appliquée pour gérer précisément cette liste avec les feuille de styles.

<div id="tabs">
<ul class="anchors">
<li><a href="#tabs1">Section 1</a></li>
<li><a href="#tabs2">Section 2</a></li>
<li><a href="#tabs3">Section 3</a></li>
</ul>

Chaque élément de la liste pointe vers la division du contenu d’un onglet, ex : <a href="#tabs2">.
A chaque division du contenu d’un onglet, la classe fragment est ajoutée. L’affichage/masquage de chaque contenu des onglets est géré par le script Tabs.

<div id="tabs1" class="fragment">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div> <div id="tabs2" class="fragment">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div id="tabs3" class="fragment">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>

Le chargement du script et des feuilles de styles

Le fichier _head.html contient les éléments suivants.

<style type="text/css" media="screen">
@import url(tpl:BlogThemeURL/style.css);
</style>
<style type="text/css" media="print"> @import url(tpl:BlogThemeURL/../default/print.css);
</style>

Pour ajouter Tabs dans un thème, le fichier _head.html doit être soit créé en insérant le code ci-après soit modifié en remplaçant le code précédent par le code suivant.

<style type="text/css" media="screen">
@import url(tpl:BlogThemeURL/style.css);
@import url(tpl:BlogThemeURL/tabs.css);
@import url(tpl:BlogThemeURL/tabs-ie.css);
</style>
<style type="text/css" media="print"> @import url(tpl:BlogThemeURL/../default/print.css);
</style>
<script type="text/javascript" src="tpl:BlogThemeURL/../default/js/jquery.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/jquery.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs();
});
</script>

Les feuilles de styles pour Tabs sont importées puis la librairie jQuery et le script Tabs.
L’appel du script Tabs se fait sur la division des onglets ici avec l’id tabs avec le code $('#tabs').tabs();.

Les princiales options du script jQuery Tabs

{fxSlide: true} (effet de transition)
L’onglet précédent monte puis l’onglet activé descend.
{fxFade: true} (effet de transition)
L’onglet précédent s’éclaircit puis l’onglet activé apparaît.

Ces deux efets peuvent être combines entre eux.

{fxSpeed: 'slow'/'normal'/'fast'/’0 à 1000’}
Cette option permet de définir la vitesse des effets, elle peut être définie selon la rapidité ou en millisecondes.

{fxShow: {height: 'show', opacity: 'show'}} et {fxHide: {height: 'hide', opacity: 'hide'}} (effet de transition)
Effet d'animation qui réduit les onglets et éclaircie ou opacifie les onglets.

Choisir l'onglet sélectionné par défaut Par défaut, le premier onglet, ici la Recherche, est sélectionné. Il suffit d'indiquer le numéro d'onglet à sélectionner par défaut. Par exemple, l'onglet tabs3 sera l'onglet par défaut, le code sera $('#tabs').tabs(3);. Le nombre est celui de la position de l'onglet. Le code avec l'application d'effet est $('#tabs').tabs(3,{fxFade: true});

freshyOne, jQuery et template Dotclear 2

L’utilisation et l’installation du script jQuery Tabs sont assez simples. Son imbrication dans un menu sophistiqué comme celui de Freshy percute les comportements erratiques des différents navigateurs. Le principal point noir reste Internet Explorer mais pas que lui…

Au travail ! L’utilisation du script Tabs permet de se passer du menu latéral, les templates de DC2 permettent d’obtenir le code html des principaux widgets à l’exception notable des Liens. C’est un choix radical de navigation. Ainsi, le menu de navigation comprend la recherche, les catégories, les tags, les archives, les langues et les flux de syndication.

Modifier les fichiers template

Le contenu du fichier _head.html reste le même, il faut juste remplacer $('#tabs').tabs({}); par $('#frame').tabs({fxSlide: true});.

Le fichier _top.html comprend :

<div id="top">
<h1><span><a href="tpl:BlogURL">tpl:BlogName encode_html="1"</a></span></h1>
</div>
<div id="header">&nbsp;</div>
tpl:include src="_menu.html"
<p id="prelude"><a href="#main">tpl:lang To content</a> |
<a href="#frame">tpl:lang To menu</a> |
<a href="#search">tpl:lang To search</a></p>

La structure html des onglets se trouve dans un nouveau fichier _menu.html. Tout d’abord, le code pour le titre des onglets sans template DC2 mais avec l’imbrication du menu de navigation de Freshy.

<ul class="menu">
<li class="page_item"><a class="first_menu" href="#search">Recherche</a></li>
<li class="page_item"><a href="#categories">Catégories</a></li>
<li class="page_item"><a href="#tags">Tags</a></li>
<li class="page_item"><a href="#archives">Archives</a></li>
<li class="page_item"><a href="#languages">Langues</a></li>
<li class="last_menu"><a class="last_menu" href="#rss">RSS</a></li>
</ul>

La classe page_current_item gérant l’onglet sélectionné de Freshy a été substituée par celle, classe tabs-selected, du script Tabs. Et a contrario, la classe anchors de Tabs a été remplacée par menu de Freshy.

Le but est de perfectionner l’affichage des onglets en l’internationalisant et en n’affichant que les titres utilisés. Comme exemple, les templates Categories seront utilisés, les autres templates fonctionnent sur le même principe (Tags, Archives, Langues, Syndication).

tpl:lang Categories affiche Catégorie dans la langue par défaut du blog.
<tpl:Categories> est un fonction déclarative pour l’affichage des éléments des catégories. Le code html avec cette fonction template d’affichage est répété pour chaque catégorie.
<tpl:CategoriesHeader>, en-tête, et <tpl:CategoriesFooter>, pied de page, bloque l’effet de boucle de la fonction précédente, leur utilisation est essentielle pour l’affichage d’un titre ou l’insertion de la balise html ul.

<tpl:Categories>
<tpl:CategoriesHeader><li class="page_item">
<a href="#categories">tpl:lang Categories</a></tpl:CategoriesHeader>
<tpl:CategoriesFooter></li></tpl:CategoriesFooter> </tpl:Categories>

Pour les titres des onglets, la boucle ne doit pas fonctionner, il n’y a donc pas de code entre l’en-tête et le pied de page. L’onglet Categorie ne s’affichera que si des billets comportent des catégories.

Catégories, Tags et Langues ne seront affichés que s’ils sont utilisés sur le blog, de même pour le contenu des onglets. La présentation est donc impeccable, cela a aussi le mérite de réduire l’envoi de données. Utile pour avec la limitation des hébergeurs.
De ce fait, la Recherche, Archives et RSS sont toujours présents.

<tpl:Categories>
<tpl:CategoriesHeader><div id="categories" class="fragment"><ul></tpl:CategoriesHeader>
<li><a href="tpl:CategoryURL">tpl:CategoryTitle</a></li> <tpl:CategoriesFooter></ul></div></tpl:CategoriesFooter>
</tpl:Categories>

Les liens vers les catégories font parti de la boucle.

Faire fonctionner le prélude pour la recherche (ajout)

L'appel de la div #search avec un lien ne permet pas de modifier son état de visibilité. C'est le script Tabs qui affiche/masque les différents contenus des onglets. Tabs possède une fonction triggerTabs() pour visualiser un onglet mais le renvoi sur une ancre, ici #search, ne fonctionne pas. Il faut donc faire cela à la main…
Mais jQuery est là ! Dans _head.html, il suffit alors d'ajouter après $('#frame').tabs({fxSlide: true}); :

$('a.presearch').click( function() {
$('.menu li').removeClass('tabs-selected');
$('div.fragment').hide();
$('li.first_menu').addClass('tabs-selected');
$('#search').show(); });

Son action enlève le style sélectionné des titres d'onglets et leur contenu n'est plus visible puis le premier titre, ici Recherche, est sélectionné et son contenu affiché. Ces modifications surviennent lorsqu'un lien avec la classe presearch est cliqué. Dans le fichier _top.html, la classe presearch est ajouté (<a class="presearch" href="#search">tpl:lang To search</a>).

Les options de couleurs et d'image

Le choix de l'image pour le top et de l'éléménet sélectionné pour le menu de navigation vient de mon appétit sans fin de l'orange... Mais, un autre monde est possible.
Le thème Freshy comprend plusieurs images pour le top, j'en ai retenu 9 qui sont dans le dossier img/headers de freshyOne. Les éléments sélectionnées peuvent avoir une couleur anis, cyan, bleu, violet et magenta et sont le dossier img/menu2. Il faut modifier dans la feuille de style style.css, l'élément #header en changeant le nom du fichier header_image7.jpg :

background: transparent url(img/headers/header_image7.jpg) no-repeat top left;

Pour les éléments sélectionnés du menu de navigation, tout d'abord, il faut modifier dans le fichier style.css .menu li.page_item.tabs-selected, .menu li.first_menu.tabs-selected a et .menu li.last_menu.tabs-selected a en changeant le nom du fichier :

background:url(img/menu2/menu_selected_orange.png)

Ensuite, il faut modifier dans le fichier tabs-ie6.css .menu li.tabs-selected a en changeant le nom du fichier

background:url(img/menu2/menu_selected_orange.png)

Les problèmes avec les navigateurs

Internet Explorer 6 et 7 ne possèdent pas les mêmes tares pour la compréhension des standards web. Quand on règle le problème pour IE 6, IE 7 peut mal réagir et vice versa.
Tout d'abord le débordement de IE, il peut apparaître avec de l'italique ou une mauvaise prise en compte des espacements et autres marges. Un overflow: visible; sur les division concernées règle les problèmes sans affecter les autres navigteurs. Ouf !
Entre Freshy et Tabs, le mélange entre l'affichage sur une ligne du titre des onglets, le survol des liens sous IE et l'alignement vertical font bugger IE 6 et 7. Pire, IE 6 a du mal avec les éléments ayant plusieurs classes. Donc, j'ai réglé le problème en modifiant le fonctionnement de menu de navigation de Freshy et en utilisant ça, juste pour les IE hors 7, à ajouter dans _head.html :

<!--[if lte IE 6]>
<style type="text/css" media="screen">
@import url(tpl:BlogThemeURL/tabs-ie6.css);
</style>
<![endif]-->

Les problèmes de débordements de Safari et Opéra entre le titres des onglets et leur contenu ont été réglés en réduisant la taille des éléments et en ajoutant de l'espace supplémentaire.

Le thème freshyOne est compatible avec Firefox 2, IE6, IE 7, Safari 2, Opera 9.1 et Konqueror 3.5.