It is currently Mon 26 Sep 2016 - 14:14 - créer un forum

Menu/barre de navigation avec effet dynamique

Skip to content

Post new topic Reply to topic Goto page: 1, 2, 3, 4, 5, 6, 7  >

Menu/barre de navigation avec effet dynamique
Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Sat 10 Jan 2009 - 10:32    Post subject: Menu/barre de navigation avec effet dynamique Reply with quote

PublicitéSupprimer les publicités ?


  
Informations sur le tutoriel
NomMenu/barre de navigation avec effet dynamique
AuteurYskander
Source
http://www.jejavascript.net/ (Adapté maison pour simplifier l'implémentation dans un forum Xooit.com)
Autre
Liste de mes tutos sur Xooit.com
Mise à jour
20 Juin 2009
Difficulté
DescriptionCe tuto vous permet de créer un menu/barre de navigation dynamique qui reste toujours en haut de votre écran. Il est simple a paramétrer. Il y a déjà des tutos de barre de navigation mais je n'en ai trouvé aucun qui resté en haut de l'écran comme celui là. (Pas simple quand la fonction rechercher pose problème ^^ ). Dans l'attente d'adapter le super tuto d'altair. Sinon vous avez ici aussi un autre tuto de Stéphane avec un effet différent mais tout aussi intéressant.
Incompatibilité
Il y a des chances pour que ce script soit incompatible avec d'autres scripts (Merci de me notifier lesquels si vous en trouvez)
Testé sur
  • Navigateurs
    • Firefox toutes versions
    • Internet Explorer 7 et +
    • Opéra
    • Google Chrome
    • Kméléon
Avertissement
Effectuez ces modifications dans votre thème de test avant de le faire dans le thème normal... cela évitera des catastrophes

Tutoriel

    
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 <head> :
         
Code: Sélectionner - Agrandir
<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>

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 :
       
Quote:
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: Sélectionner - Agrandir
'<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.
         

     
  
  
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Last edited by Yskander on Sat 20 Jun 2009 - 20:54; edited 4 times in total
Forum
Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Sat 10 Jan 2009 - 10:57    Post subject: Menu/barre de navigation avec effet dynamique Reply with quote

bonjour

bien expliqué
à la place du texte on peut mettre une image?
_______________________


Forum
Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Sat 10 Jan 2009 - 10:59    Post subject: Menu/barre de navigation avec effet dynamique Reply with quote

Bonjour
Si tu fais allusion au titre du lien oui c'est possible. C'est notifié dans le tuto dans "que remplacer". Le code est tout simple
Wink
Cordialement
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Sat 10 Jan 2009 - 11:03    Post subject: Menu/barre de navigation avec effet dynamique Reply with quote

ok mais tu es sur que ici

menutexte[#]= texte du lien

si tu mets le code de l'image c'est bon et pas la peine de modifier menutexte?
_______________________


Forum
Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Sat 10 Jan 2009 - 11:15    Post subject: Menu/barre de navigation avec effet dynamique Reply with quote

Voila rajouté à l'exemple dans le fofo de test
Rien à modifier dans le code
Wink
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
zouzou157
Membre


Offline
Membre

Joined: 30 Jun 2007
Posts: 37
Niveau:
Point(s): 37
Moyenne: 1.00
Windows Vista ou 7 Masculin Lion (24juil-23aoû)

PostPosted: Sat 10 Jan 2009 - 11:19    Post subject: Menu/barre de navigation avec effet dynamique Reply with quote

Peut-étre une question bête mais je ne sais plus ce que sais le target et comment le paramétré undecided  
_______________________
<Signature retirée car non conforme au règlement>


Forum
Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Sat 10 Jan 2009 - 11:21    Post subject: Menu/barre de navigation avec effet dynamique Reply with quote

Bonjour
Le target vous permet d'ouvrir votre lien dans un nouvel onglet/fenêtre
Il n'y a rien a paramétrer, juste à mettre '_blank'
Et si vous le voulez dans la même fenetre mettez '_self'
Wink
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
zouzou157
Membre


Offline
Membre

Joined: 30 Jun 2007
Posts: 37
Niveau:
Point(s): 37
Moyenne: 1.00
Windows Vista ou 7 Masculin Lion (24juil-23aoû)

PostPosted: Sat 10 Jan 2009 - 11:41    Post subject: Menu/barre de navigation avec effet dynamique Reply with quote

Merci ! Je test sur mon forum  Wink .

Je vais faire '_self'
_______________________
<Signature retirée car non conforme au règlement>


Forum
Author Message
zouzou157
Membre


Offline
Membre

Joined: 30 Jun 2007
Posts: 37
Niveau:
Point(s): 37
Moyenne: 1.00
Windows Vista ou 7 Masculin Lion (24juil-23aoû)

PostPosted: Sat 10 Jan 2009 - 11:50    Post subject: Menu/barre de navigation avec effet dynamique Reply with quote

Regarde mon forum de test :

http://divers-choses.xooit.fr/index.php?theme=test
_______________________
<Signature retirée car non conforme au règlement>


Forum
Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Sat 10 Jan 2009 - 11:59    Post subject: Menu/barre de navigation avec effet dynamique Reply with quote

Il y avait deux erreurs (Pas de ' dans le Titre et il manquait la fin du script). Mettez çà :


 
Code: Sélectionner - Agrandir
<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 = "#C7C4C0"; //couleur de fond
var colorlien = "#010101"; //couleur du texte
var colorsel = "#FB932A"; //couleur selection
menutexte = new Array;
menulien = new Array;
menutarget = new Array;
// MENU .......
menutexte[0]= 'Portail'
menulien[0]= 'http://divers-choses.xooit.fr/portal.php'
menutarget[0]= '_self'
menutexte[1]= 'Index du Forum'
menulien[1]= 'http://divers-choses.xooit.fr/index.php'
menutarget[1]= '_self'
menutexte[2]= 'Devenir Partenaire'
menulien[2]= 'http://divers-choses.xooit.fr/portal.php?pid=10'
menutarget[2]= '_self'
menutexte[3]= 'Les partenaires'
menulien[3]= 'http://divers-choses.xooit.fr/portal.php?pid=9'
menutarget[3]= '_self'
menutexte[4]= 'S enregistrer '
menulien[4]= 'http://divers-choses.xooit.fr/profile.php?mode=register'
menutarget[4]= '_self'
// 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> 
Wink
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
zouzou157
Membre


Offline
Membre

Joined: 30 Jun 2007
Posts: 37
Niveau:
Point(s): 37
Moyenne: 1.00
Windows Vista ou 7 Masculin Lion (24juil-23aoû)

PostPosted: Sat 10 Jan 2009 - 14:00    Post subject: Menu/barre de navigation avec effet dynamique Reply with quote

Ok, merci !

Euh ca ma remis le titre du module : news importantes comment fait-on pour l'enlever ?
_______________________
<Signature retirée car non conforme au règlement>


Forum
Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Sat 10 Jan 2009 - 14:07    Post subject: Menu/barre de navigation avec effet dynamique Reply with quote

Ca n'est pas lié
Ca c'est votre message d'entête : panneau admin >> message d'entete
Wink
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
zouzou157
Membre


Offline
Membre

Joined: 30 Jun 2007
Posts: 37
Niveau:
Point(s): 37
Moyenne: 1.00
Windows Vista ou 7 Masculin Lion (24juil-23aoû)

PostPosted: Sat 10 Jan 2009 - 14:32    Post subject: Menu/barre de navigation avec effet dynamique Reply with quote

ok, merci.
Comment on fait pour avoir juste le cadre de news importantes, je sais que c'est pas dans ce sujet, c'est pour éviter un nouveau topic
_______________________
<Signature retirée car non conforme au règlement>


Forum
Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Sat 10 Jan 2009 - 14:33    Post subject: Menu/barre de navigation avec effet dynamique Reply with quote

Justement ouvrez un nouveau topic, là ce topic concerne uniquement le tuto et cela fait hors sujet
Wink
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
zouzou157
Membre


Offline
Membre

Joined: 30 Jun 2007
Posts: 37
Niveau:
Point(s): 37
Moyenne: 1.00
Windows Vista ou 7 Masculin Lion (24juil-23aoû)

PostPosted: Sat 10 Jan 2009 - 14:37    Post subject: Menu/barre de navigation avec effet dynamique Reply with quote

Ok, je vais faire ca...
Sinon autre question :

Cette barre de navigation peut-elle est masquer comme le menu démarrer sur windows, elle se glisse et des que l'on vient en haut du forum avec la souris elle apparaît ou alors elle et directement mise dés que l'on arrive tout en haut du forum ?
_______________________
<Signature retirée car non conforme au règlement>


Forum
Author Message
Contenu Sponsorisé





PostPosted: Today at 14:14    Post subject: Menu/barre de navigation avec effet dynamique

Display posts from previous:   
Reply to topic Page 1 of 7 Goto page: 1, 2, 3, 4, 5, 6, 7  >




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401