Accueil­FAQ­Rechercher­Membres­Groupes­S'enregistrer­Connexion
Poster un nouveau sujet   Répondre au sujetLe forum des services :: Nos services :: Css & Codes :: Trucs et astuces :: Trucs et astuces XooitPartager | 
 

 [Tuto]Menu/barre de navigation avec effet dynamique

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Dreamland
Admin


Féminin Messages: 867
Réputation: 25
Date d'inscription: 09/06/2009
Age: 19
Localisation: Drome

MessageSujet: [Tuto]Menu/barre de navigation avec effet dynamique   Dim 25 Oct - 22:20
Le script est assez simple à installer après les modifications que j'ai pu apporter. Le script de base nécessitant d'enregistrer le code des liens du menu dans un document à part. Là tout est dans le même script. Allez donc dans panneau admin >> thème >> modifier les templates et ouvrez le template overall header.tpl. Insérer le script suivant juste après :

Code:
<script language="Javascript">
var p_top=0 //hauteur debut du menu
var p_left=0 //distance du bord
var p_wth=210 //largeur
var colorbg = "CODE COULEUR DE FOND"; //couleur de fond
var colorlien = "CODE COULEUR DU TEXTE"; //couleur du texte
var colorsel = "CODE COULEUR QUAND SELECTIONNE"; //couleur selection
menutexte = new Array;
menulien = new Array;
menutarget = new Array;
// MENU .......
menutexte[0]= 'TITRE DU LIEN'
menulien[0]= 'URL DU SITE'
menutarget[0]= 'PARAMETRE DU TARGET'
menutexte[1]= 'TITRE DU LIEN'
menulien[1]= 'URL DU SITE'
menutarget[1]= 'PARAMETRE DU TARGET'
menutexte[2]= 'TITRE DU LIEN'
menulien[2]= 'URL DU SITE'
menutarget[2]= 'PARAMETRE DU TARGET'
menutexte[3]= 'TITRE DU LIEN'
menulien[3]= 'URL DU SITE'
menutarget[3]= 'PARAMETRE DU TARGET'
menutexte[4]= 'TITRE DU LIEN'
menulien[4]= 'URL DU SITE'
menutarget[4]= 'PARAMETRE DU TARGET'
// MENU .......
window.onload = pos_menu;
document.write('<SPAN ID="menu" style="position:absolute;top:'+p_top+';left:'+p_left+';"><table bgcolor=\''+colorbg+'\'" width="'+(screen.width-20)+'" border=1  bordercolorlight=\''+colorbg+'\'" bordercolordark=#CCCCCC ><TR>')
var a=0
while (a<menutexte.length) {   
    document.write('<TD onMouseOut="this.style.background=\''+colorbg+'\'" onMouseOver="this.style.background=\''+colorsel+'\'" STYLE="cursor:hand"><div align="center"><FONT FACE="comic sans ms" SIZE=2><B><A HREF="'+menulien[a]+'" TARGET="'+menutarget[a]+'" STYLE="text-decoration:none;font-weight: bold;color:'+colorlien+'">'+menutexte[a]+'</A></B></FONT></div></TD>');
    a++;
    }
document.write('</TR></TABLE></SPAN>')

ie4=document.all
ns6=document.getElementById&&!document.all
ns4=document.layers
function pos_menu() {
if (ie4) {menu.style.pixelTop=document.body.scrollTop+p_top}
else if (ns6) {document.getElementById("menu").style.top=window.pageYOffset+p_top}
else if (ns4) {eval(document.menu.top=eval(window.pageYOffset+p_top));}
if(ie4 || ns6 || ns4)
    setTimeout("pos_menu()",1);
}
//-->
</script>
var p_top=0 //hauteur debut du menu
var p_left=0 //distance du bord
var p_wth=210 //largeur
var colorbg = "CODE COULEUR DE FOND"; //couleur de fond
var colorlien = "CODE COULEUR DU TEXTE"; //couleur du texte
var colorsel = "CODE COULEUR QUAND SELECTIONNE"; //couleur selection
menutexte = new Array;
menulien = new Array;
menutarget = new Array;
// MENU .......
menutexte[0]= 'TITRE DU LIEN'
menulien[0]= 'URL DU SITE'
menutarget[0]= 'PARAMETRE DU TARGET'
menutexte[1]= 'TITRE DU LIEN'
menulien[1]= 'URL DU SITE'
menutarget[1]= 'PARAMETRE DU TARGET'
menutexte[2]= 'TITRE DU LIEN'
menulien[2]= 'URL DU SITE'
menutarget[2]= 'PARAMETRE DU TARGET'
menutexte[3]= 'TITRE DU LIEN'
menulien[3]= 'URL DU SITE'
menutarget[3]= 'PARAMETRE DU TARGET'
menutexte[4]= 'TITRE DU LIEN'
menulien[4]= 'URL DU SITE'
menutarget[4]= 'PARAMETRE DU TARGET'
// MENU .......
window.onload = pos_menu;
document.write('<SPAN ID="menu" style="position:absolute;top:'+p_top+';left:'+p_left+';"><table bgcolor=\''+colorbg+'\'" width="'+(screen.width-20)+'" border=1  bordercolorlight=\''+colorbg+'\'" bordercolordark=#CCCCCC ><TR>')
var a=0
while (a


Composition du code :

Comme vous pouvez le constatez le code est simple à paramétrer. Vous avez au tout début le paramétrage des couleurs et ensuite ce qui va composer votre barre de navigation :

Citation:
menutexte[#]= texte du lien
menulien[#]= adresse
menutarget[#]=fenêtre cible


Que remplacer :

Tout ce que vous devez remplacer c'est les différentes couleurs (Code couleur de fond, Code couleur du texte et Code couleur quand sélectionné), le titre des liens (Titre du lien), les url des liens (Url du site) et enfin le mode d'ouverture de ces liens (Paramètre du target). Vous avez aussi la possibilité de mettre une image à la place du Titre du lien si vous le désirez. Il faut dans ce cas l'intégrer directement de cette manière :

Code:
'<img src="URL DE L'IMAGE" border="0">'



Que dois-je mettre à paramètre du target ? Ah ah bonne question. En fait vous avez le choix entre deux possibilités :
- '_self' : ouvrira le lien dans la page courante
- '_blank' : ouvrira le lien dans une nouvelle page/nouvel onglet (Selon le paramétrage de votre navigateur)
Remplacez donc Paramètre du target par le mode d'ouverture que vous désirez.
Voila, vous pouvez sauvegarder votre template.

Source : Xooit

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://twilight-storys.forumactif.net/forum.htm
 

[Tuto]Menu/barre de navigation avec effet dynamique

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Le forum des services :: Nos services :: Css & Codes :: Trucs et astuces :: Trucs et astuces Xooit-
Poster un nouveau sujet   Répondre au sujet