Un menu cliquable sous la bannière

Voici donc le menu en question. Il est compatible avec les blogs haut et fort.

<!-- menu cliquable -->
<DIV
style="FONT-WEIGHT: bold; FONT-SIZE: small; BACKGROUND: #decbbd; WIDTH: 100%; COLOR: #39002c; FONT-FAMILY: system,geneva; TEXT-ALIGN: left">

<!-- Bouton 1 -->
<SPAN
onmouseover="this.style.background='#61110a'; this.style.color='white'" title="Accueil" style="BACKGROUND: #decbbd; CURSOR: hand; COLOR: #39002c" onclick="top.location.href='http://blogtuto.hautetfort.com/';" onmouseout="this.style.background='#decbbd'; this.style.color='#39002c'">&nbsp;&nbsp;Accueil&nbsp;&nbsp;
</SPAN>
<!-- Bouton 2 -->
<SPAN
onmouseover="this.style.background='#61110a'; this.style.color='white'" title="Accueil" style="BACKGROUND: #decbbd; CURSOR: hand; COLOR: #39002c" onclick="top.location.href='http://blogtuto.hautetfort.com/';" onmouseout="this.style.background='#decbbd'; this.style.color='#39002c'">&nbsp;&nbsp;Accueil&nbsp;&nbsp;
</SPAN>
<!-- Bouton 3 -->
<SPAN
onmouseover="this.style.background='#61110a'; this.style.color='white'" title="Accueil" style="BACKGROUND: #decbbd; CURSOR: hand; COLOR: #39002c" onclick="top.location.href='http://blogtuto.hautetfort.com/';" onmouseout="this.style.background='#decbbd'; this.style.color='#39002c'">&nbsp;&nbsp;Accueil&nbsp;&nbsp;
</SPAN>

Alors les explications qui vont avec :

 <!-- menu cliquable -->
<DIV
style="FONT-WEIGHT: bold; <---- style de police (là c'est en gras)

FONT-SIZE: small; <---- taille du texte

BACKGROUND: #decbbd; <---- couleur du fond de toute la ligne

WIDTH: 100%;<--- longueur du menu

COLOR: #39002c; <--- heu...

FONT-FAMILY: system,geneva;<-- police de caractère

TEXT-ALIGN: left"> <!---- alignement du texte dans le menu

 <!-- Bouton 1 -->
<SPAN
onmouseover="this.style.background='#61110a';<-- coleur du fond quand la souris est dessus

this.style.color='white'" <--- couleur du texte au passage de la souris

title="Accueil"<-- nom de la cellule

style="BACKGROUND: #decbbd;<-- couleur du fond quand on arrive sur la page avant que la souris passe dessus

CURSOR: hand;

COLOR: #39002c"

onclick="top.location.href='http://blogtuto.hautetfort.com';"<-- adresse vers laquelle pointe la cellule

onmouseout="this.style.background='#decbbd'; <-- couleur du texte une fois que la souris est passée dessus

this.style.color='#39002c'"> <-- couleur du texte APRES que la souris soit passée dessus

&nbsp;&nbsp;texte de votre cellule&nbsp;&nbsp;
</SPAN>

Comments

[Alexandre]

Comment changer la couleur de la police en meme temps que le background quand la souris passe dessus ?

J'ai essayé de répéter le code en changer "color" a la place de "background" (dans this.style.) ça m'a donné un résultat inattendu :

apres le passage, ça reste en blanc, ce que je ne souhaite pas vraiment.

[PersonnelJS]

Pour un menu avec sous-menus, que penses-tu du code proposé sur cette page : http://forum.alsacreations.com/topic-1-37177-1-Menu-deroulant-sous-Firefox-et-deroutant-sous-IE.html
Est-ce que c'est ce genre de combinaison xhtml / css qu'il fait faire ?
J'ai regardé ton code et j'ai cru y retrouver la même logique :



Accueil


A propos



Canalblog


Mode standard


Mode avancé
etc.

Est-ce que ton "nav" est défini dans le CSS ?

Et une fois de plus, est-ce que cela marche avec ma config de base ???

Ce serait super de pouvoir faire cela car j'en profiterai pour ouvrir une rubrique "services" pour encourager des collègues à améliorer leurs blogs et j'en profiterai pour orienter vers ton site qui m'a beaucoup aidé !

[Lavande]

je ne sais pas il faut tester pour voir ce que ça donne... As tu essayé ?

[PersonnelJS]

Bonjour Lavande.
Après mes questions de l'autre fois je me décide enfin à tester ce code et... malheur ! je me rends compte que je n'avais pas lu attentivement.
Je croyais que le code correspondait à tes propres menus déroulants, mais en fait non !
Ce que je cherche c'est un menu déroulant comme toi et mes recherches dans Google ne me mènent nulle part. Comment as-tu fait ? C'est compatible avec la version gratuite de Haut et fort ?
Merci.

[Lavande]

et ça ne te viendrai pas à l'idée de regarder l'index des tutos haut et fort
Le menu montré sur blogtuto est détaillé dans ce tuto http://www.blogtuto.org/article-28315731.html

[PersonnelJS]

Oups j'ai compris où je dois installer le code :

Dans mes configurations avancées, je choisis les modèles des pages sur lesquelles je veux faire apparaître les boutons (ex. la page d'accueil, et/ou la page qui apparaîtra quand le visiteur sera entré par une catégorie). C'est bien ça ?

Si c'est cela, j'annule ma question 3 dans le commentaire précédent !

[PersonnelJS]

C'est super un réactivité pareille, merci !

Ceci dit je ne suis sans doute pas assez experte pour tout comprendre de la réponse... :-(

> Que sont les permaliens ? C'est par exemple la page d'accueil ? Est-ce que l'on peut en créer ?
> A ma connaissance il n'y a aucun formulaire de contact sur Haut et fort
> Si mon abonnement gratuit HF ne me permet pas de mettre de script ou de php, c'est foutu ? (= c'est cela les fonctions avancées ?)
> C'est quoi "atom" ?

Merci !

PS : je dois avoir l'air neuneu avec toutes ces questions !

[Lavande]

- alors le permalien est l'adresse propre à chacune de tes notes exemple sur ton blog :
l'adresse de ton blog est : http://rgppjeunesseetsports.hautetfort.com/
mais si tu cliques en bas de la dernière note postée sur le "lien permanent" l'adresse dans l'url sera
http://rgppjeunesseetsports.hautetfort.com/archive/2008/12/16/dernier-jour-pour-signer-la-petition.html
- pour le formulaire de contact, en effet il n'y en a pas sur H&f, tu peux dans ce cas utiliser un lien rédigé de la façon suivante "mailto:adresse mail"
- pour le script oui en effet il fallait allait dans la configuration avancée, tu sembles avoir compris