Publié: Sep12, 2010
Ce tutoriel va vous montrer comment créer horizontale des menus déroulants dans votre site Joomla 1.5 en utilisant l'extension Extended Menu.
Avertissement: Veuillez noter que ce tutoriel n'est q'un exemple. Les étapes peuvent différer selon le modèle Joomla 1.5 que vous utilisez pour votre site web. Afin d'accomplir avec succès la création d'un menu déroulant il peut exiger au moins des connaissances de base de CSS Joomla 1.5 et la possibilité de modifier le code CSS selon les besoins spécifiques de votre site Web.
Les étapes pour la création de menu déroulant sous joomla
Voici les différentes étapes à suivre pour créer votre menu déroulant:
Ètape 1 Vous devez installer le module Extended Menu dans votre application Joomla. Pour plus d'informations sur la façon d'installer des extensions pour Joomla consulter notre tutoriel l'installation des extensions sous joomla. Le module peut être téléchargé sur le site officiel de ses créateurs.
Ètape 2 Aller sur Extensions -> Gestion des modules et cliquez sur le module nouvellement installé Extended Menu.
Ètape 3 Maintenant vous devez configurer le module Extended Menu. Il vous offre la possibilité de définir plusieurs variables qui changent la façon dont vos menus vont fonctionner. Vous pouvez toutefois laisser la plupart des paramètres à leurs valeurs par défaut. Vous pouvez changer ces paramètres comme suit:
- Option Menu Style: Tree List ,
- Active Menu Class: Both,
- Enable Menu Template: No,
- Element Id: Yes
En outre, vous devez sélectionner le menu qui doit être chargé dans la zone Nom du menu déroulant.
Ètape 4 Maintenant, vous devez organiser vos menus correctement afin de rendre leur affichage comme un menu déroulant. Dans ce tutoriel, nous allons créer un sous-menu de "Accueil" comme un menu déroulant. Pour ce faire, allez dans menus -> Top Menu (ou si vous avez changé le nom de ce menu - utiliser celui que vous avez défini) et cliquez sur le bouton Nouveau. Une fois que vous avez régler votre menu pour afficher le contenu souhaité, assurez vous de définir son «Élenebt parent» du menu. Dans notre cas ce sera le menu Accueil.
Pour plus d'informations sur la façon de créer des menus, regarder notre tutoriel sur la création d'articles dans Joomla.
Ètape 5 Enfin, vous devez ajouter à votre fichier CSS quelques lignes qui précisent le comportement du menu déroulant. Vous pouvez simplement ajouter ces lignes à la fin du fichier feuille de style de votre modèle (en général template.css):
ul#menulist_root li ul {
display:none;
}
ul#menulist_root li:hover ul{
display:block;
background:none;
}
ul#menulist_root li ul li{
background:#000000;
opacity:.85;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
clear:both;
}
ul#menulist_root li ul li a{
background:none;
width:66px;
}
ul#menulist_root li ul li a:hover{
color:#AA0000;
background:none;
}
Cette feuille de style affiche un menu déroulant avec un style transperant une fois que vous pointez votre souris sur le menu (c'est à dire sur hover). Vous pouvez utiliser différentes CSS pour donner le look que vous voulez pour vos menus.
Bien fait! Vous venez d'ajouter un élégant menu horizontal déroulant pour votre site Joomla!
Commentaires (2)