Pour créer une barrre de menu comme sur mon site, il faut vous aider de mes conseils et enfin si cela pose toujours problème je vous donnerai un lien qui vous aidera.
Ce code est proposé par le site PEUR qui est indiqué en bas de la page, je vous donne mon application et mon expétience avec ce code pour vous éviter de passer des heures dessus.
Le menu est compatible avec Firefox et Internet Explorer, il faudra néanmoins faire la vérification sur les deux explorateurs.
L'insertion du menu se fait en quatre étape:
1. Insertion du code donné en effectuant un copié coller dans le cssColler le code à la fin du css par exemple, en mettant avant une note du genre "menu du haut"Insérer le code suivant dans votre CSS, pour cela aller dans désign et regarder sur la droite il y a un lien vers le CSS. Copier coller votre CSS original pour ne pas faire de grosse gaffe.
.menuIE {
display:none !important;
display:block;
}
a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active {
color:#000;
width:90px;
height:18px;
display:block;
background:#c33;
border:1px solid #000;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family: verdana;
font-size:10px;
line-height:18px;
overflow:hidden;
}
a.boutonIE:hover {
color:#fff;
background:#000;
overflow:visible;}
a.boutonIE:hover table {
display:block;
background:#eee;
border-collapse:collapse;
}
.boutonFF {
color:#000;
width:90px;
height:18px;
display:block !important;
display:none;
background:#c33;
border:1px solid #000;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family: verdana;
font-size:10px;
line-height:18px;
overflow:hidden;
}
.boutonFF:hover {
height:auto;
cursor:pointer;
color:#fff;
background:#000;
}
a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active {
display:block;
width:90px !important;
width:88px;
height:18px;
border-bottom:1px solid #000;
text-decoration:none;
color:#000;
font-family: verdana;
font-size:10px;
text-align:center;
background:#eee;
}
a.SousMenu:hover {background:#BCCCD2;}
2. Copier coller le code dans l'entete:Pour cela allez dans l'entete en allant dans configuration et cliquer sur la première barre bleu.
Ensuite éditer la source de l'article, pour cela il faut etre en mode avancé, vérifiez que vous êtes dans ce mode en allant dans Accueil et sur la droite vous avez un module qui permet de "changer de mode". Ensuite retourner dans l'entete et cliquer sur le bouton "source".
Enfin copier coller en mode source le code suivant:
Affichage du menu sous Internet explorer<div style="width: 100%; height: 150%; background-image: url(http://www.filelodge.com/files/room19/486644/tete3.JPG); background-position: center; background-repeat: no-repeat;">
<div class="menuIE">
<divstyle style="text-align: right;"><a class="boutonIE" href="#nogo">Accueil
<table>
<tbody>
<tr>
<td><a class="SousMenu" href="http://u115.over-blog.com">Home</a> <a class="SousMenu" href="http://u115.over-blog.com/categorie-339668.html">U115</a> </td>
</tr>
</tbody>
</table>
</a><a class="boutonIE" href="#nogo">Playlist
<table>
<tbody>
<tr>
<td><a class="SousMenu" href="http://u115.over-blog.com/categorie-559316.html">House</a> <a class="SousMenu" href="http://u115.over-blog.com/categorie-487133.html">House c</a> <a class="SousMenu" href="http://u115.over-blog.com/categorie-487135.html">RNB</a> <a class="SousMenu" href="http://u115.over-blog.com/categorie-559317.html">Rap</a><a class="SousMenu" href="http://u115.over-blog.com/categorie-559318.html">Disco</a><a class="SousMenu" href="http://u115.over-blog.com/categorie-487152.html">Rock</a></td>
</tr>
</tbody>
</table>
</a><a class="boutonIE" href="#nogo">Musique Libre
<table>
<tbody>
<tr>
<td><a class="SousMenu" href="http://webradio.over-blog.com">Portail de La Radio</a> <a class="SousMenu" href="http://u115.over-blog.com/categorie-340628.html">Liens</a> <a class="SousMenu" href="http://u115.over-blog.com/catégorie-476577.html">Les débuts de la radio</a><a class="SousMenu" href="http://u115.over-blog.com/article-2163167.html">Licenses</a> </td>
</tr>
</tbody>
</table>
</a><a class="boutonIE" href="#nogo">Tutoriaux
<table>
<tbody>
<tr>
<td><a class="SousMenu" href="http://u115.over-blog.com/article-1953445.html">Tuto webradio</a> <a class="SousMenu" href="http://u115.over-blog.com/article-2163257.html">WebradioVDJ</a> <a class="SousMenu" href="http://u115.over-blog.com/article-2625128.html">Son Podcast</a> </td>
</tr>
</tbody>
</table>
</a><a class="boutonIE" href="#nogo">Téléchargement
<table>
<tbody>
<tr>
<td><a class="SousMenu" href="http://u115.over-blog.com/article-2277371.html">Top 50</a> <a class="SousMenu" href="http://u115.over-blog.com/article-2277371.html">Mix U115</a> </td>
</tr>
</tbody>
</table>
</a><a class="boutonIE" href="#nogo">DJ
<table>
<tbody>
<tr>
<td><a class="SousMenu" href="http://u115.over-blog.com/3-categorie-340628.html">Liens</a> <a class="SousMenu" href="http://u115.over-blog.com/categorie-559320.html">Interviews</a></td>
</tr>
</tbody>
</table>
</a><a class="boutonIE" href="">Forum
<table>
<tbody>
<tr>
<td><a class="SousMenu" href="http://u115.actifforum.com/">Le Forum</a> <a class="SousMenu" href="">!!Travaux!!</a><a class="SousMenu" href="">..i.!Error!.i..</a> </td>
</tr>
</tbody>
</table>
</a><a class="boutonIE" href="#nogo">Contacts
<table>
<tbody>
<tr>
<td><a class="SousMenu" href="http://u115.over-blog.com/article-2246891.html">Pour les DJs</a> <a class="SousMenu" href="http://u115.over-blog.com/categorie-453773.html">Mes Services</a> </td>
</tr>
</tbody>
</table>
</a> </divstyle></div>
Affichage du menu sous firefox
<div style="text-align: center;" class="boutonFF">Acceuil<br /><a class="SousMenu" href="http://u115.over-blog.com/">Home</a> <a class="SousMenu" href="http://u115.over-blog.com/categorie-339668.html">Section U115</a> </div>
<div style="text-align: center;" class="boutonFF">Playlist<br /><a class="SousMenu" href="http://u115.over-blog.com/categorie-559316.html">House</a> <a class="SousMenu" href="http://u115.over-blog.com/categorie-487133.html">House c</a> <a class="SousMenu" href="http://u115.over-blog.com/categorie-487135.html">RNB</a><a class="SousMenu" href="http://u115.over-blog.com/categorie-559318.html">Disco</a> <a class="SousMenu" href="http://u115.over-blog.com/categorie-559317.html">Rap</a><a class="SousMenu" href="http://u115.over-blog.com/categorie-487152.html">Rock</a> </div>
<div style="text-align: center;" class="boutonFF">Musique Libre<br /><a class="SousMenu" href="http://webradio.over-blog.com">Webradio</a> <a class="SousMenu" href="http://u115.over-blog.com/categorie-340628.html">Liens Utiles</a> <a class="SousMenu" href="http://u115.over-blog.com/article-2163167.html">Licenses</a> <a class="SousMenu" href="http://u115.over-blog.com/categorie-476577.html">Les Débuts Radio</a> </div>
<div style="text-align: center;" class="boutonFF">Tutoriaux<br /><a class="SousMenu" href="http://u115.over-blog.com/article-1953445.html">Sa radio</a> <a class="SousMenu" href="http://u115.over-blog.com/article-2163257.html">WebradioVDJ</a> <a class="SousMenu" href="http://u115.over-blog.com/article-2625128.html">Son Podcast</a></div>
<div style="text-align: center;" class="boutonFF">Téléchargement<br /><a class="SousMenu" href="http://u115.over-blog.com/article-2277371.html">Top 50</a> <a class="SousMenu" href="http://u115.over-blog.com/article-2277371.html">U115 Mix</a> </div>
<div style="text-align: center;" class="boutonFF">DJ<br /><a class="SousMenu" href="http://u115.over-blog.com/3-categorie-340628.html">Liens</a> <a class="SousMenu" href="http://u115.over-blog.com/categorie-559320.html">Interviews</a> </div>
<div style="text-align: center;"> </div>
<div style="text-align: center;" class="boutonFF">Forums<br /><a class="SousMenu" href="http://u115.actifforum.com">Le Forum</a> <a class="SousMenu">!!Travaux!!</a> <a class="SousMenu">!!Travaux!!</a></div>
<div style="text-align: center;" class="boutonFF">Contacts<br /><a class="SousMenu" href="http://u115.over-blog.com/article-2246891.html">Pour les DJ</a> <a class="SousMenu" href="http://u115.over-blog.com/categorie-453773.html">Mes services</a></div>
Une fois ce code insérer, modifier les liens avec vos liens, enlevez des boites de dialogue, vous pouvez aussi en rajouter.
3. Vérifier que le code source ne se modifie pas a la fermeture de l'articlePour cela fermer l'entete modifié et rouvrez la en reregardant le code source.
Vérifier que les caractéres en gras sont toujours à la même place, sinon il y a un problème, recherchez les balises qui sont mal placé ou surabondante.
4. vérifier que le menu s'affiche bienPour cela ouvrez votre site sous IE et sous Firefox
Cette méthode a été apprise et ensuite pratiqué sur mes sites, le site qui m'a permis de la découvrir et donc le site qui est l'auteur de cette méthode est accessible sur ce lien:
Voir le site de PEURUn gran merci à lui et si la présence de ce tuto le géne, il peut me le signaler, il sera enlevé, mais y a pas de raison ;-)