Template Creator pour Joomla!Template Creator est l'outil indispensable pour créer vos propres templates Joomla!. Il s'installe sur un site Joomla! 1.6 ou 1.7 et permet de générer des templates en version 1.5 à 1.7. En quelques clics vous pouvez créer une architecture HTML et donner les styles CSS en remplissant simplement les champs et en utilisant les pipettes de couleur. Vous pouvez prévisualiser votre création avant de créer le package du template à installer sur n'importe quel site Joomla!.

Template Creator pour Joomla!

ebook_128Cette documentation de 160 pages vous guidera de A à Z à travers la construction des templates Joomla! 1.5. La première partie vous initiera aux bases HTML et CSS pour mieux comprendre leur fonctionnement. La partie de documentation technique aborde tous les aspects des templates : structure de fichiers, contenu, mais aussi les fonctions avancées, les suffixes CSS, les langues et paramètres d'administration. Enfin le tutoriel vous montrera pas à pas comment créer un template complet que vous pourrez également télécharger.

Accéder à la page du eBook Création de templates Joomla! 1.5

logo_maximenuckLe module Maximenu_CK offre de nombreuses possibilités. C'est un menu déroulant mootools basé sur le script moomenu. Chaque lien peut contenir une description sur une deuxième ligne, les sous-menus peuvent être organisés en multi-colonnes avec titre et largeurs spécifiques. Le menu peut également charger d'autres modules. Le module est orgranisé en thèmes graphiques que l'on peut télécharger.

Accéder à la page du module Maximenu_CK

 

logo_mediabox_CKLe plugin Mediabox_CK permet d'afficher vos images et contenus multimédias dans une fenêtre de type Lightbox. Basé sur la librairie mootools 1.2 le plugin permet d'afficher des titres et descriptions sur chaque image. Vous pouvez également créer des albums pour naviguer entre les éléments. Les médias qui peuvent être chargés sont nombreux : youtube, daylymotion, vimeo, images, mp4, mo3, flv, flash, mov (player intégré), twitter, facebook, flickr, sites web et contenus webs.

Accéder à la page du plugin Mediabox_CK

logo_mooCoverFlow_CKLe module mooCoverFlow_CK permet de créer un menu coverflow comme ceux présents sur les Macs d'Apple. Vous pouvez faire défiler des images avec les titres des liens, la navigation peut se faire à la souris ou au clavier et les liens s'ouvrent lors du double clique sur l'image courante. Vous pouvez aussi transformer ce superbe menu en galerie d'images qui s'ouvrent dans une fenêtre popup de type lightbox.

Accéder à la page du module mooCoverFlow_CK

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.

Articles

Menu à onglets mootools

Écrit par CEd
Imprimer Note utilisateur:  / 3
MauvaisTrès bien 

Démo du menu à onglets mootools

Création du menu

Avant de commencer à jouer avec les effets mootools, il faut créer le menu à onglets dans votre site. Pour cela suivez le tutoriel de création d'un menu à onglets pour Joomla! 1.6, et ensuite vous pourrez passer à l'étape suivante.

Modification des styles CSS

Pour faire fonctionne nos effets on va devoir modifier les CSS. Ce qu'on veut obtenir c'est un mouvement des onglets de 10px vers le haut, il va donc falloir agrandir le conteneur <ul> à 40px, et ajouter quelques détails qui ont leur importance.

Voici le contenu des CSS (contenu du fichier 'menuonglets.css') :

ul#menuonglets {
 height: 40px;
 border-bottom: 1px solid #666;
 margin: 0;
 padding: 10px 0 0 0;
 overflow: hidden;
}

ul#menuonglets li {
 float: left;
 display: block;
 height: 30px;
 padding: 0;
 margin: 0 5px;
 padding-left: 8px;
 overflow: hidden;
 background: url(../images/onglet_gauche.png) left top no-repeat;
}

ul#menuonglets a {
 display: block;
 height: 40px;
 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;
}


En apparence notre menu n'a pas changé, sauf qu'en réalité on va pouvoir faire varier la hauteur des éléments de liste <li>.

Création des effets mootools

Attaquons le gros du sujet, à savoir les effets de variation de hauteur. Pour la base du script je me suis inspiré de celui de David Walsh pour créer un Snook menu.

Tout d'abord j'ai ajouté la propriété de marge supérieur de 10px sur les éléments <li>. Pourquoi le faire en javascript et pas en CSS ? Le style CSS est défini également, c'est juste une précaution pour forcer la valeur si jamais il y a une interférence avec un style du template par exemple.

el.setStyle('margin-top','10px');

Ensuite au lieu de faire varier la position de l'image de fond comme dans le snook menu, je fais varier la marge précédemment définie et la hauteur de l'élément

Au survol :

'margin-top': '0px', 
 'height': '40px'

Lorsque l'on quitte l'élément :

'margin-top': '10px', 
 'height': '30px'

 

Et voilà le travail, ci-dessous le code complet du script mootools :

window.addEvent('domready', function() {

    $$('#menuonglets li').each(function(el) {
        //fx
        var fx = new Fx.Morph(el,{
            duration: 300,
            link: 'cancel'
        });
        el.setStyle('margin-top','10px');
        //css & events
        el.addEvents({
            'mouseenter': function(e) {
                e.stop();
                fx.start({
                    'margin-top': '0px',
                    'height': '40px' 
                });
            },
            'mouseleave': function(e) {
                e.stop();
                fx.start({
                    'margin-top': '10px',
                    'height': '30px' 
                });
            }
        });
    });
    
});

On copie le code dans un fichier 'menuonglets.js' que l'on place dans un dossier 'js' dans le template :

[SITEJOOMLA]/templates/[TEMPLATE]/js/menuonglets.js

 

Intégration du javascript mootools 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 au fichier javascript créée précédemment :

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/menuonglets.js"></script>

 

Télécharger les fichiers du menu à onglets mootools

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 visiteurs1203074

Qui est en ligne

Nous avons 15 invités et aucun membre en ligne