Cowblogeurs, cowblogeuses,
Voici un article qui risque de vous interesser, à savoir:
la mise en place d'un menu déroulant qui survole le blog.
[visible sur Internet Explorer et Fire Fox]
dont voici l'exemple [pour les utilisateurs d'Internet Explorer, je suis désolé mais je ne l'ai pas encore configuré sur mon blog, je l'avais fais et ça fonctionne]Avoir concience que:
-Cet article est réservé aux Premiums.
-Nous allons utiliser le HTML, par concéquent il sera visible sur tout les habillages de votre blogs. Donc, il faudra modifier toutes les feuilles CSS de vos habillages, et y ajouter les codes de mise en forme du menu, en l'adaptant à chaques fois.
-Je ne suis en aucun cas spécialiste en HTML et en CSS.
Et enfin, cette manipulation est longue et difficile à mettre en place !
Le code HTML est divisé en deux parties, une pour que le menu fonctione sous Internet Explorer [IE] et une pour qu'il fonctione sous Fire Fox [FF]
Le CSS est également divisé en deux parties, pour les même raisons.
Je suis capable d'expliquer le code HTML, et en partie le CSS, je suis arrivé a un bon résultat aprés plusieurs éxperimentations, ne paniquez pas si votre menu ne fonctione pas tout de suite, veillez à bien recopier les codes et n'hesitez pas éffacer et recommencer plusieurs fois [pour vous donner une idée, il m'a fallut deux jours pour comprendre parfaitement le code HTML et l'utilité des differentes sections du CSS]
N'hésitez pas à demander de l'aide, à Sakatruc ou à moi même, mais gardez en tête que nous vous aiderons au cas par cas, ce sera donc long, assurez vous de vous y conaitre un minimum en CSS et HTML avant de vous lancer !
Afin de vous expliquer le fonctionnement des portions de code, je mettrais mes remarques entre ** **, n'oubliez pas de les éffacer lorsque vous entrerez les codes !
C'était une introduction longue, mais nécessaire.
Voilà tout d'abord le code HTML pour IE
<div class="menuIE"> **ouverture du menu IE**
<a class="boutonIE" href="">Nom_de_l'onglet_1 **ouverture de l'onglet 1**
<table><tr><td> **ouverture du sous menu**
<a class="SousMenu" href="url_de_votre_lien_1">Lien_1</a>
<a class="SousMenu" href="url_de_votre_lien_2">Lien_2</a>
<a class="SousMenu" href="url_de_votre_lien_3">Lien_3</a>
</td></tr></table> **fermeture du sous menu**
</a> **fermeture de l'onglet 1**
</div> **fermeture du menu IE**
La création d'un lien dans le sous menu s'effectue ainsi :
<a class="SousMenu" href="url_de_votre_lien_1">Lien_1</a>
avec url_de_votre_lien_1 à placer entre les "" sous la forme http://cowblog.fr/
et Lien_1 qui détérmine le non du lien. Par exemple, pour un sous lien vers un blog, il faut mettre :
<a class="SousMenu" href="http://un_blog.cowblog.fr/">Un blog</a>
Important :
Les onglets se placent les un aprés les autres.
Ne placez le </div> de fin qu'aprés avoir fermer le dernier onglet de votre menu IE à la fin de votre menu IE.
Voici maintenant la deuxieme section du code HTML qui permet de fair fonctioner le menu sous FF
<div id="container"><div id="contabs"> **ouverture du menu FF**
<div class="boutonFF">Non_de_l'onglet_1<br /> **ouverture de l'onglet 1**
<a class="SousMenu" href="url_de_votre_lien_1">Lien_1</a>
<a class="SousMenu" href="url_de_votre_lien_2">Lien_2</a>
<a class="SousMenu" href="url_de_votre_lien_3">Lien_3</a>
</div> **fermeture de l'onglet 1**
</div></div> **fermeture du menu FF**
La création d'un lien dans le sous menu s'effectue comme précedement.
Les onglets sont également a placer les uns aprés les autres.
Les deux </div></div> de fin sont également a placer à la fin de votre menu FF, aprés avoir fermer le dernier onglet de votre menu FF.
Maintenant, voici le code CSS qui met en forme votre menu, il est composé d'une partie commune, de deux parties, une pour IE et une pour FF, et d'une troisieme partie qui met en forme les sous menus.
Le code CSS qui suit est une copie de ma feuille de CSS, il est à placer à la fin de votre feuille CSS. Les valeurs de couleur et de taille donnée sont à titre d'exemple, il sagit des valeurs utilisées pous mon propre habillage, et doivent donc être modifiées pour s'adapter à votre design, je rappel que si vous pocedez plusieurs habillages, il vous faut placer tout le code dans toutes vos feuille CSS et le modifer pour qu'il s'accorde avec chaques habillages.
Il y'a des valeurs que je vous deconceille de modifier si vous n'êtes pas trés à l'aise avec le CSS, mieux vaut modifier seulement les valeurs de couleur et de taille width et height. Rappellez vous que certaines lignes son propres à mon habillages, par exemple j'ai des bordures vertes sur mes onglets, vous n'aurez probablement pas besoin de bordures vertes sur votre blog, pensez a supprimer ces lignes ! Souvenez vous aussi que la partie IE de mon blog n'est pas a jour, alors veillez a mettre les meme valeurs pour les lignes communes aux section IE/FF.
Ici je ne vais pas rajouter d'explications, en effet cela rendrait le code difficile à lire, a vous de faire des experiementations et de voir par vous meme l'action de chaques valeurs.
Je n'indiquerais que les parties du code pour une meilleure comprehension.
**Partie commune**
#container {
position: relative
}
#contabs {
position:absolute;
top: -20px !important;
top: -20px;
z-index:500;
}
#container {
position:relative !important;
}
#couche {
position:absolute !important;z-index:1000 !important
}
**Partie IE**
.menuIE {
display:none !important;
display:block;
}
a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active {
color:#0097a0;
width:94px;
height:16px;
display:inline;
background:#000000;
margin-right:1px;
text-align:left;
float:left;
text-decoration:none;
font-family: impact;
font-size:20px;
line-height:16px;
overflow:hidden;
}
a.boutonIE:hover {
color:#000000;
background:#0097a0;
overflow:visible;
}
a.boutonIE:hover table {
display:block;
background:#0097a0;
border-collapse:collapse;
}
**Partie FF**
.boutonFF {
color:#e4007b;
width:111px;
height:35px;
display:inline!important;
display:none;
background:#ffffff;
margin-right:10px;
text-align:center;
float:left;
text-decoration:none;
font-family: impact;
font-size:15px;
line-height:35px;
overflow:hidden;
margin-top:10px;
border: 2px solid #00ff01;
}
.boutonFF:hover {
height:auto;
cursor:pointer;
color:#e4497b;
background:#ffffff;
border: 2px solid #00ff01;
}
**Partie sous menu**
a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active {
display:block;
width:auto !important;
width:auto;
height:16px;
line-height:13px;
text-decoration:none;
color:#00A7EB;
font-family: verdana;
font-size:10px;
text-align:left;
background:#ffffff;
padding-left:1px;
border-top:1px dashed #00ff01;
}
a.SousMenu:hover {
background:#ffffff;
color:#50A7EB;
border-top:1px dashed #00ff01
}
Les codes donnés si dessus sont pour la fabrication d'un menu déroulant horizontal, il fonctionne sur les blogs avec le menu en haut du blog [Cf cet article], afin de le faire fonctionner en vertical, il est nécessaire d'ajouter des balises <BR> à la fin des onglets des deux menu [il me semble...]
J'espere avoir été clair.
Afin que ma tagboard ne se transforme pas en bureau des réclamations je vous prierais de m'ecire en passant par ICI, ou de vous adresser aux admins de Sakatruc qui en savent surement plus que moi. Je jetterais regulierement un coup d'oeil aux commentaires de cet article et essayerais de venir voir ceux qui ont des soucis [premiers arrivés, premiers servis].
Avec un peu de patience! Tout arrive!
Merci, j'vais regarder tout ça dés mon retour de norvege!