Accès au menu au "survol" Suite à ce post "fonction lire+ sur Blogger"
il m'a été demandé de regarder la possibilité de faire des menus
"déroulants" sur blogger. J'avais alors précisé qu'il y avait plusieurs
méthodes pour créer cet "artifice" et notament en css. Après un peu de
lecture et notament alsacréation et son post sur les menus déroulants en css, je me suis rendu à l'évidence, pas la peine de réinventer la roue, le mieux est d'utiliser la même technique que pour lire+. Suite...
Par rapport au post précédent nous allons donc rajouter une fonction (entre [head] et [/head]):
function changeVisibility3(value) {
document.getElementById('menu') .style.visibility=value;
}
function changeDisplay3(value) {
document.getElementById('menu') .style.display=value;
} Attention
Ma fonction s'appelle changeVisibility3
mais c'est pour rester cohérent avec le message précédent, vous
attribuez le chiffre que vous voulez ou aucun si c'est la seule de
votre page.
Vous remarquerez aussi que j'ai changé l'identifiant, ici id='menu'
onmouseover
L'intérêt du menu déroulant est que les liens ne soient visibles que
lorsque l'utilisateur veut les consulter. On pourrait laisser l'accès à
la fonction par un clic, mais ce n'est pas très intuitif (alors que
pour la fonction lire+, le clic est parfaitement adapté).
Nous allons donc rajouter une commande dans les balises qui appellent
le menu, cette commande est onmouseover. Son activation fait appel à la
fonction changeVisibility lorsque la souris passe au dessus de
l'élément.
De la même façon nous rajouterons une fonction
onmouseout pour "replier" le menu lorsque la souris ne survolera plus
celui ci.
Mise en Application
C'est pas le plus simple !! :-( Mon exemple s'appuie sur un
masquage/affichage du menu archives. Pour des raisons de compatibilitée
entre l'ancienne et la nouvelle version de blogger, je vais aller au
plus simple (et bourrin) on va encadrer tout le block archives d'une
balise span.
allez à:
- connexion (Tableau de bord)
- Modèle
- Modifier le code html
- Trouvez la section où il est question de "Blog archive"
ça y est ?? :-D Bien maintenant nous allons donc encadrer toute la section par:
[span id='menu' style="visibility: hidden;display: none;"]
ICI_La_Section_Blog_Archives...
[/span]
Ce bout de code rend le menu invisible, difficile donc de le survoler pour le faire apparaitre !!
Un peu comme pour lire+ nous allons rajouter un lien, avant la balise
[span] (mettez la texte que vous voulez, mais le résultat pourrait être:
[a href="javascript:changeVisibility3('visible');changeDisplay3('inline')"]Voir le menu archives[/a] Bien nous avons maintenant accès au "menu archives" grâce à un clic sur le lien.
Dans la section [body]...[/body] de votre blog (à la section archives) votre code html est donc:
[a href="javascript:changeVisibility3('visible');changeDisplay3('inline')"]Voir le menu archives[/a]
[span id='menu' style="visibility: hidden;display: none;"]
ICI_La_Section_Blog_Archives...
[/span]
Ajoutons onmouseover
Comme précisé au dessus pour rendre la navigation plus intuitive, nous
allons rajouter la fonction qui fait apparaitre le menu au survol
[a href="javascript:changeVisibility3('visible');changeDisplay3('inline')"
onmouseover="javascript:changeVisibility3('visible');changeDisplay3('inline')"]Voir le menu archives[/a]
Rien de bien compliquer !! Le problème c'est que lorsque la souris ne
survole plus le lien, le menu reste visible et on en revient au point
de départ !!
Nous ne pouvons pas rajouter au lien "voir le menu
archive" la fonction onmouseout qui rendrait le menu invisible quand la
souris ne survole plus le lien, pourquoi ?
Si l'on prenait cette
option, le menu serait innaccessible. On pourrait le voir, mais dès que
la souris quitte le lien, le menu disparait.
Nous allons donc rajouter une action onmouseover à la section [span...]
[span id='menu' style="visibility: hidden;display: none;" onmouseover="javascript:changeVisibility3('visible');changeDisplay3('inline')"]
ICI_La_Section_Blog_Archives...
[/span]
Voilà maintenant le menu accessible mais il est toujours visible quand
la souris quitte la zone. Ni une ni deux rajoutons un onmouseout à la
balise [span...] pour rendre tout cela de nouveau invisible:
[span id='menu' style="visibility: hidden;display: none;" onmouseover="javascript:changeVisibility3('visible');changeDisplay3('inline')"
onmouseout="javascript:changeVisibility3('hidden');changeDisplay3('none')"]
ICI_La_Section_Blog_Archives...
[/span]
Et voilà normalement, votre menu archive sera accessible au survol du
lien, au clic sur le lien et disparaitra quand la souris quitte la zone
"menu".
Résumé: - Dans la section [head]...[/head] rajoutez:
- [script type='text/javascript']function changeVisibility3(value) {
document.getElementById('menu') .style.visibility=value;
}
function changeDisplay3(value) {
document.getElementById('menu') .style.display=value;
}[/script] - Dans la section [body]...[/body] à l'empalcement souhaité, rajoutez:
- [a href="javascript:changeVisibility3('visible');changeDisplay3('inline')"
onmouseover="javascript:changeVisibility3('visible');changeDisplay3('inline')"]Voir le menu archives[/a] - et
- [span id='menu' style="visibility: hidden;display: none;" onmouseover="javascript:changeVisibility3('visible');changeDisplay3('inline')"
onmouseout="javascript:changeVisibility3('hidden');changeDisplay3('none')"]
ICI_La_Section_Blog_Archives_Ou_le_menu_que_vous_souhaitez_dérouler...
[/span]
Vous pouvez voir un exemple sur le
blog de test .
Attention Toutes les recommandations du post précédent s'appliquent à celui ci, il vaut
fonction lire ICI donc avant de s'attaquer à cette modif.
Cette fonctionnalité n'a pas étté testé sur trop de navigateurs, vérifier avant que cela reste compatible ;-)
