Créer une barre de menu pour mon site

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 css

Coller 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&eacute;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&eacute;l&eacute;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&eacute;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&eacute;l&eacute;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'article

Pour 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 bien

Pour 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 PEUR

Un 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 ;-)

Comments

[marmou]

Bonjour,J'ai bien copier ces différents codes dans le CSS et dans mon entête avec IE. Malheureusement j'obtiens le résultat suivant. Sous IE le menu s'affiche à la vertical avec les sous-menus déroulés. Sous FF le menu marche nickel mais celui de IE s'affiche en même temps. Over-blog change effectivement mon code html mais a chaque fois que je le corrige et le valide, rien n'y fait: il ne tiens pas compte de mes corrections. J'aimerai vraiment pouvoir utiliser ces menus déroulants, j'espère que vous pourrez m'aider (au besoin je peux vous donner mes identifiants over-blog). Merci d'avance.

[u115]

Parfait !

[Geotoine]

Problème résolu.

[Geotoine]

J'ai un problème d'affichage. Quelqu'un peut-il m'aider ?

[u115]

Tu veux dire en transparence? car je vois que tu as une image sur le dessus de ton blog, d'ailleurs il est très réussi !Une petite astuce pour la transparence est de faire un tableau html et de mettre une image de fond sur une cellule et ensuite d'écrire tout simplement dans la cellule et voila le tour est joué.Sinon pour les personnes qui ne savent pas mettre une image en html:Il est possible aussi de définir des zones clicable au sein d'une meme image, il faut alors la "mapper" une recherche google devrait vous aider pour cela.A savoir le mappage est pas pris en compte dans le référencement google donc a éviter comme meme.