Un menu cliquable sous la bannière

Mardi 26 août 2008 2 26 /08 /2008 20:39

Un menu cliquable sous la bannière

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


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


<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'">  Accueil  
</SPAN>

<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'">  Accueil  
</SPAN>

<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'">  Accueil  
</SPAN>

Alors les explications qui vont avec :


<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


<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

  texte de votre cellule  
</SPAN>

Par blogtuto - Publié dans : Haut et fort - Ecrire un commentaire - Voir les 6 commentaires

Précédent : Insérer un favicon Retour à l'accueil Suivant : Un menu sous la bannière

Commentaires

bonjour lavande comment vas-tu? moi je suis de retour et le blog va repartir. mais il va falloir que tu m'aides lol!peut-tu m'expliquer comment créer un menu cliquable sur la colonne comme dans le blog de ligne papille stp. parce que je veux que quand on clique sur lien d'amis par exemple les blogs s'affichent au lieu d'être visible sur la colonne en permanence merci d'avance Mansour facefood

Commentaire n°1 posté par facefood le 10/09/2008 à 14h56

tu trouveras ce tuto dans les tutos pour toutes les plateformes.

Réponse de Lavande le 11/09/2008 à 07h04

Bonjour et merci pour les conseils. Je suis intéressée par ce tuto mais je me demande : - dans quel template on ajoute le code ? - à quelles pages renvoient les boutons puisuqe justement HF ne propose pas de module "pages" ?

Commentaire n°2 posté par PersonnelJS le 16/12/2008 à 16h45

les boutons renvoient par exemple vers les permaliens ou vers le formulaire de contact...
Pour l'installation le template n'a pas d'importance. Il faut l'installer dans les pages des fonctions avancées du blog, sauf bien sûr sur la feuille de style, le flux rss et atom.

Réponse de Lavande le 16/12/2008 à 17h46

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 !

Commentaire n°3 posté par PersonnelJS le 16/12/2008 à 18h01

- 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

Réponse de Lavande le 16/12/2008 à 18h20

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 !

Commentaire n°4 posté par PersonnelJS le 16/12/2008 à 18h11

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.

Commentaire n°5 posté par PersonnelJS le 19/03/2009 à 00h20

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

Réponse de Lavande le 23/03/2009 à 07h24

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é !

Commentaire n°6 posté par PersonnelJS le 19/03/2009 à 01h16

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

Réponse de Lavande le 23/03/2009 à 07h21