Défi 5 - Ajouter un menu dynamique puissant
Pour le défi 5, j'ai décidé de vous offrir un très bon système de menus dynamiques qui vous permettra d'avoir un menu déroulant dans la forme que vous voulez. Vous pouvez controller tout l'aspect du menu, et ce, d'une façon simple (avec un peu de patience).
Pour ajouter le menu à votre blogue, vous devez effectuer les étapes suivantes (dans la configuration du modèle de votre blogue) :
1- Configuration des couleurs et du codage .CSS
Ajouter le codage suivant avant la ligne </style> dans la section <head> :
/* Menus
----------------------------------------------- */
.table_bordure {
color: #000000;
background-color: #D1D1E1;
border: 1px solid #0B198C;
}
.table_entete {
background-color: #5C7099;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
.table_entete a:link
{
color: #FFFFFF;
}
.table_entete a:visited
{
color: #FFFFFF;
}
.table_entete a:hover, .table_entete a:active
{
color: #FFFF00;
}
.menu_controle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
background-color: #738FBF;
padding-top: 3px;
padding-right: 6px;
padding-bottom: 3px;
padding-left: 6px;
white-space: nowrap;
}
.menu_controle a:link, .menu_controle a:visited {
color: #FFFFFF;
text-decoration: none;
}
.menu_controle a:hover, .menu_controle a:active {
color: #FFFFFF;
text-decoration: underline;
}
.menu_popup {
background-color: #FFFFFF;
color: #000000;
border: 1px solid #0B198C;
}
.menu_option {
background-color: #BBC7CE;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
font-size: 11px;
}
.menu_option a:link, .menu_option a:visited {
color: #22229C;
text-decoration: none;
}
.menu_option a:hover, .menu_option a:active {
color: #FFFFFF;
text-decoration: none;
}
.menu_hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
background-color: #8A949E;
white-space: nowrap;
cursor: pointer;
}
.menu_hover a:link, .menu_hover a:visited, .menu_hover a:hover, .menu_hover a:active {
color: #FFFFFF;
text-decoration: none;
}
Voici une brève description des différentes composantes du CSS pour que vous puissiez modifier les couleurs, au besoin :
.table_bordure
Bordure de la table servant aux menus.
.table_entete
.table_entete a:link
.table_entete a:visited
.table_entete a:hover .table_entete a:active
Couleur de l'en-tête des tables, avec l'apparence des liens.
Servant aussi aux entrées du menus qui n'ont pas de liens (pour séparer une section d'une autre)
.menu_controle
.menu_controle a:link
.menu_controle a:visited
.menu_controle a:hover .menu_controle a:active
Apparence du menu principal.
Sert aussi aux liens qui n'ont pas de sous-menus.
.menu_popup
Apparence des sous-menus
.menu_option
.menu_option a:link
.menu_option a:visited
.menu_option a:hover
.menu_option a:active
Chaque option dans le sous-menu ayant un lien externe.
(Si aucun liens, alors "table_entete" est utilisé)
.menu_hover
.menu_hover a:link
.menu_hover a:visited
.menu_hover a:hover
.menu_hover a:active
Apparence du sous-menu lorsque le pointeur de la souris est dans une cellule du sous-menu.
2- Configuration du menu, avec le script associé
Choississez un endroit où que vous voulez que le menu apparaisse. Par exemple, pour mon modèle de blogue, j'ai ajouté le code après la section :
<!-- Blog Header -->
<div id="blog-header"><div>
<h1 class="title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<p><$BlogDescription$></p>
</div></div>
Ajoutez le code suivant (définition du menu principal) : --- VOIR EXPLICATION CI-BAS ---
(N'oubliez pas de modifier le contenu des cellules pour répondre à vos besoins)
<!-- barre de menus -->
<script type="text/javascript" language="javascript" src="http://eleves.cmaisonneuve.qc.ca/e9368013/blogue/menu.js"></script>
<div align="center">
<table class="table_bordure" cellpadding="4" cellspacing="0" border="0" width="100%" align="center" style="border-top-width:0px">
<tr align="center">
/* Ajoutez vos menus ici */
</tr>
</table>
</div>
<!-- / barre de menus -->
Explication
Remplacez la ligne /* Ajoutez vos menus ici */ par votre menu, en se basant sur ce qui suit :
- Pour ajouter un lien *SANS* sous-menu :
Ajouter une ligne basée sur le code suivant (dans le tableau) :<td class="menu_controle"><a href="http://www.cmaisonneuve.qc.ca">CÉGEP de Maisonneuve</a></td>
- Pour ajouter un lien *AVEC* un sous-menu :
Ajouter une ligne basée sur le code suivant (dans le tableau) :
IMPORTANT: Le nom dans nouveau_menu doit être le même que le nom du id.<td class="menu_controle" id="menuEXEMPLE"><a href="#menuEXEMPLE">Exemple</a><script type="text/javascript" language="javascript">nouveau_menu("menuEXEMPLE");</script></td>
Pour ajouter une définition de sous-menu
Si vous avez des menus ayant un sous-menu, vous devez les définir d'après l'exemple suivant :
(vous devez faire ceci pour CHAQUE sous-menu)
<!-- menu Exemple -->
<div class="menu_popup" id="menuExemple_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="table_entete"Section 101</td></tr>
<tr><td class="menu_option"><a href="http://www.cmaisonneuve.qc.ca">CÉGEP de Maisonneuve</a></td></tr>
<tr><td class="table_entete">Section 2</td></tr>
<tr><td class="menu_option"><a href="http://www.google.ca">Google</a></td></tr>
</table>
</div>
<!-- / menu Exemple -->
Notes Importante
1) La valeur du ID dans la balise <div> doit correspondre au ID définit dans la barre de menu avec "_menu" à la fin. Par exemple, si le ID du menu dans la berre de menu est "menuExemple", alors celui dans le sous-menu doit être "menuExemple_menu".
2a) Pour une nouvelle section dans le sous-menu (pas de liens cliquable), veuillez utiliser la classe "table_entete".
2b) Pour ajouter un liens vers une autre page, veuillez utiliser la classe "menu_option" et ajouter les informations du liens par la suite.
Pour activer le menu
Vous devez ajouter le code suivant après le code HTML du dernier sous-menu :
<script type="text/javascript" language="javascript">
<!--
menu_init();
//-->
</script>
Par exemple :
<!-- menu Défis -->
<div class="menu_popup" id="menuDefis_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="table_entete">581-801</td></tr>
<tr><td class="menu_option"><a href="http://fhutow.blogspot.com/2007/02/lvolution-partir-de-claude-chappe.html">Travail Pratique 1</a></td></tr>
<tr><td class="table_entete">581-802</td></tr>
<tr><td class="menu_option"><a href="http://fhutow.blogspot.com/2007/03/dfi-5-ajouter-un-menu-dynamique.html">Défi 5</a></td></tr>
<tr><td class="menu_option"><a href="http://fhutow.blogspot.com/2007/02/analyse-dergonomie-de-deux-sites-web.html">Défi 4</a></td></tr>
<tr><td class="menu_option"><a href="http://fhutow.blogspot.com/2007/02/la-bote-outil.html">Défi 3</a></td></tr>
<tr><td class="menu_option"><a href="http://fhutow.blogspot.com/2007/02/production-et-maintenance-dun-site-de.html">Défi 2</a></td></tr>
<tr><td class="menu_option"><a href="http://fhutow.blogspot.com/2007/01/introduction.html">Défi 1</a></td></tr>
</table>
</div>
<!-- / menu Liens -->
<script type="text/javascript" language="javascript">
<!--
menu_init();
//-->
</script>
Notes concernant Blogger
Si vous voulez que vos anciens blogues aient le menu lorsqu'un visiteur clique sur le lien direct vers un article, vous devez sauvegarder chaque article de votre blogue (Modifier Messages -> Sauvergarder). Sinon, le menu ne va pas apparaître.
publié par Frédéric @ 09 h 49
0 commentaires
