Template Creator CK

Créez vos propres templates Joomla! avec Template Creator CK

Templates Joomla!

ebook_128

Téléchargez le livre de création de templates Joomla!

320 pages de Documentation technique, 2 Tutoriels pour créer les templates Joomla!, et 3 templates inclus

Maximenu CK

logo_maximenuck

Créez votre Megamenu Joomla! avec Maximenu CK. Multicolonnes, multirangés, chargement de module, nombreux effets, thèmes responsive.

Note utilisateur: 5 / 5

Etoiles activesEtoiles activesEtoiles activesEtoiles activesEtoiles actives
 

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

tutoriel_menu_onglet_gauche

Image 2 : onglet_droite.png

tutoriel_menu_onglet_droite

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

Paramètres du menu à onglets

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

 

Télécharger les fichiers du menu à onglets

Mentions légales

Site réalisé par Cédric KEIFLIN

Mentions légales

Copyright © 2010 - 2011

http://tutoriels-joomla.joomlack.fr n'est ni affilié à Open Source Matters ou au projet Joomla ni approuvé par eux.
Le nom Joomla!® est utilisé sous license limitée de Open Source Matters, le propriétaire mondial de la marque de commerce.

Compteur de visites

mod_vvisit_counterNombre de visiteurs1566592

Qui est en ligne

Nous avons 38 invités et aucun membre en ligne