Démo du menu à onglets
Création des images
Pour créer notre menu à onglets, il va nous falloir 2 images. L'une pour l'arrondi de gauche, et l'autre pour l'arrondi de droite et toute la partie horizontale. J'ai mis un effet ombré sur les bords, j'enregistre les images en PNG pour conserver la transparence et la beauté de l'effet. Copiez les images suivantes dans le répertoire images de votre template.
Image 1 : onglet_gauche.png
Image 2 : onglet_droite.png
On enregistre les images et on les mets dans le dossier 'images' du template :
[SITEJOOMLA]/templates/[TEMPLATE]/images/onglet_gauche.png
[SITEJOOMLA]/templates/[TEMPLATE]/images/onglet_droite.png
Création et paramétrage du module de menu
On va créer un nouveau module de menu spécifiquement pour notre tutoriel. Allez dans Extensions -> Gestion des modules -> Cliquez sur l'icone 'Nouveau' -> Choisir 'Menu'
Choisissez la position de module dans laquelle vous voulez afficher le menu, passez-le en état 'publié' et assignez-le sur les pages que vous voulez.
Renseignez les paramètres comme suit dans les options avancées à droite du module :
Menu Tag ID : menuonglets
Création des styles CSS
Ouvrez le fichier 'template.css' de votre template (ou celui qui gère les CSS) et insérez les lignes suivantes tout à la fin du fichier.
ul#menuonglets {
height: 30px;
border-bottom: 1px solid #666;
}
ul#menuonglets li {
float: left;
display: block;
height: 30px;
padding: 0;
margin: 0 5px;
padding-left: 8px;
background: url(../images/onglet_gauche.png) left top no-repeat;
}
ul#menuonglets a {
display: block;
height: 30px;
padding: 0;
margin: 0;
padding: 0 18px 0 10px;
background: url(../images/onglet_droite.png) right top no-repeat;
line-height: 30px;
text-decoration: none;
color: #333;
font-size: 12px;
}
ul#menuonglets a:hover {
color: #666;
}
On copie ces lignes dans un fichier que l'on appelle 'menuonglets.css', et on le mets dans le dossier 'css' du template :
[SITEJOOMLA]/templates/[TEMPLATE]/css/menuonglets.css
Intégration des styles dans le template
Il faut éditer le fichier 'index.php' du template et chercher la balise '</head>' (celle qui ferme l'entête du fichier html). Juste avant cette balise on ajoute l'appel à la feuille de style CSS créée précédemment :
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/menuonglets.css" type="text/css" />
$this->template : renvoit le nom du template
$this->baseurl : renvoit l'adresse de base du site