1 août 2010

Créer un menu vertical orienteur en iframe

Ce menu bien que joli :
  • n'est pas très évolutif. Si vous désirez rajouter des lignes ultérieurement, il faudra recréer un fichier ejs_menu_dyn_vert2.js, le ré-héberger...
  • connaît des problèmes d'encodage : les ziguiguis qui remplacent certaines lettres



Allez sur EDITEUR JAVASCRIPT

PREMIERE ETAPE : CREEZ VOTRE MENU EN LIGNE

1) A l'aide des menus déroulants, choisissez vos fonds, couleur, polices..

2) Saisissez le titre de vos menus.
Après la saisie de chaque titre, vous cliquez sur Enregistrer ce titre de menu
Lorsque tous les titres du menu sont enregistrés, vous cliquez sur Passez à l'étape suivante.

3) Sous chaque titre de menu, saisissez les noms et adresses des liens
Après chaque saisie de lien, vous Enregistrez
Vous répétez cette opération pour tous les menus et liens

4) vous cliquez sur Editez votre script et vous obtenez 2 pavés :

Le premier  :
<DIV ID=mv2></DIV>
<SCRIPT LANGUAGE="JavaScript" SRC="ejs_menu_dyn_vert2.js"></SCRIPT>
Le second :
/*
SCRIPT TROUVE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
document.write('<STYLE TYPE="text/css">na.mv2style {color:#000000;text-decoration:none;}na:hover.mv2style
{color:;text-decoration:underlined;}n</STYLE>');
mv2_menu = new Array();
mv2_lien = new Array();
mv2_menu[0] = 'Privilège et premium';
mv2_menu[1] = 'En confiance';
mv2_menu[2] = 'Déco ded Blog';
mv2_menu[3] = 'Vie des Blogs';
mv2_lien[0] = ''
mv2_lien[1] = ''
mv2_lien[2] = ''
mv2_lien[3] = ''
mv2_lien[0] += '<A HREF="http://annak.over-blog.com/article-4017293.html" CLASS=mv2style> . Les 1ers pas en Privilège</A><BR>';
mv2_lien[1] += '<A HREF="http://annak.over-blog.com/article-3254809.html" CLASS=mv2style> . Les 1ers pas sur un blog en V2</A><BR>';
mv2_lien[3] += '<A HREF="http://annak.over-blog.com/article-4091723.html" CLASS=mv2style> . Jingles</A><BR>';
mv2_pos = -1;
function mv2_menu_draw()
{
mv2_aff = "<TABLE BORDER=0 BGCOLOR=#000000 CELLPADDING=0 CELLSPACING=0 WIDTH=160><TR><TD><TABLE BORDER=0 CELLPADDING=03 CELLSPACING=1 WIDTH=100%>";
for(a=0;a<mv2_menu.length;a++)
{
if(mv2_pos == a || !document.getElementById)
bgcolor = "#FFFFCC";
else
bgcolor = "#006699";
if(document.getElementById)
mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><A HREF="#" onMouseOver="mv2_pos="+a+";mv2_menu_draw()" CLASS=mv2style><FONT FACE="Arial"
SIZE=2>"+mv2_menu[a]+"</FONT></A></TD></TR>";
else
mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE="Arial" SIZE=2 COLOR=#000000>"+mv2_menu[a]+"</FONT></TD></TR>"
if(mv2_pos == a || !document.getElementById)
mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE="Arial" SIZE=1>"+mv2_lien[a]+"</FONT></TD></TR>";
}
mv2_aff += "</TABLE></TD></TR></TABLE>";
if(document.getElementById)
document.getElementById("mv2").innerHTML = mv2_aff;
else
document.write(mv2_aff);
}
mv2_menu_draw();
DEUXIEME ETAPE : SAUVEGARDEZ LE 2EME PAVE SUR VOTRE PC

1) Vous copiez ce 2ème pavé,
2) vous ouvrez votre Bloc-note sous Windows
3) vous y collez le pavé
4) vous sauvegardez le pavé en le nommant ejs_menu_dyn_vert2.js

TROISIEME ETAPE : SAUVEGARDEZ CE FICHIER SUR LE WEB

Si votre plateforme de blog ne permet pas la sauvegarde de fichiers js, Archive-host le fait gratuitement.

Notez l'adresse de votre fichier : http://ddata.over-blog.com/xxxyyy/0/37/17/67/javascript/ejs-menu-dyn-vert2.js

QUATRIEME ETAPE : INSTALLER LE MENU SUR VOTRE BLOG

1) Vous reprenez le 1er pavé et corrigez l'adresse en rouge
<DIV ID=mv2></DIV>
<SCRIPT LANGUAGE="JavaScript" SRC="ejs_menu_dyn_vert2.js"></SCRIPT>
Vous changez ejs_menu_dyn_vert2.js par votre adresse.

Vous collez enfin ce pavé en HTML.

Aucun commentaire:

Enregistrer un commentaire

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)