Barre de navigation pour WordPress via jQuery
Retour à la page d'accueil du sujet
Effet de survol à la place du clic
Voici le code javascript à mettre pour avoir un effet de déroulement au survol au lieu du clic. Il faut donc remplacer l'ancien code par celui-ci
$("#wBandeau").css("display","block");
$("#wBandeau #wLiens a.wclic").click(function(){
return false;
})
$("#wBandeau #wLiens a.wclic").each(function(i){
$(this).attr("rel", "not");
var temp = $(this).attr("href");
$(this).hover(function () {
var offset = $(this).offset();
$("#wContent").css({
left: offset.left+"px",
top: $("#wBandeau").height()+"px"
})
$("#wBandeau #wLiens a.wclic").not(":eq("+i+")").each(function(i){
var temp3 = $(this).attr("href");
if($(temp3).css("display") != 'none'){
$(this).attr("rel", "not");
$(temp3).css("display","none");
}
});
if($(this).attr("rel") == "not"){
$(this).attr("rel", "yes");
$(temp).css("display","block");
}else{
$(this).attr("rel", "not");
$(temp).css("display","none");
}
},function(){});
});
$("#wBandeau").hover(function(){},function(){
$("#wBandeau #wLiens a.wclic").each(function(i){
var temp3 = $(this).attr("href");
if($(temp3).css("display") != "none"){
$(temp3).slideUp();
$(this).attr("rel", "not");
}
});
})
});
Créer un décalage en haut de page pour ne pas que le barre recouvre du contenu
Et oui, comme la barre est positionnée en absolue, elle recouvre une petite partie de votre header. Pour lui laisser la place de s'intégrer au dessus de votre page, ajoutez la portion de code suivante au début du code javascript, juste avant:
Devient donc:
$("#wBandeau").css("display","block");
Fixer la barre sur le bord de l'écran, pour qu'elle soit toujours accessible (sauf ie6)
Pour celà il suffit de changer rajouter en bas du code CSS fourni:
position: fixed;
}
Mais comme cette propriété n'est pas reconnue par ie6, il faut lui indiquer de garder l'ancienne valeur.
Pour celà, tapez le code suivant juste avant la balise </head> de votre page:
<style type="text/css" media="screen">
#wBandeau{
position: absolute;
}
</style>
<![endif]-->
Ajouter/supprimer des blocs de la barre
C'est simple, pour chaque lien se trouvant dans la barre qui ont une classe "wclic", il y a un bloc correspondant dans la div id="wContent".
Il faut juste savoir que pour ajouter un bloc, vous devez donc ajouter un lien dans la div "wLiens", qui aura une classe "wclic" et un href qui pointe vers l'id du bloc correspondant.
Retour à la page d'accueil du sujet
-----Pages: Page précédente
iTypo: thème Wordpress gratuit
Guide pour mieux gérer vos emails via gmail (multicompte, redirection, ...)
Comment réussir vos concours sur vos blogs ?
Brève Wordpress: 40 liens, thèmes, plugins et astuces en tout genre !
Merci pour ce tutoriel, pour le blog et le mag !
Un vrai régal à chaque fois.
Stéphane
Merci pour toutes ces infos sur jQuery
pardon mais je dois pas voir la meme chose que vous là parceque je ne vois aucun effet JS ou autre…
Hello Toto,
As-tu bien regardé ? La barre est assez petite, et elle est tout en haut de la page de demo.
Sinon dis moi sur quel navigateur et quel OS tu es
C’est peut etre le firewall de ma boite qui doit bloquer des JS car je sais que pas mal d’appli ne marchent pas là ou je suis. quelqu’un aurait une capture d’écran sous la main?
Bonjour,
La capture d’écran ici :
http://www.hostingpics.net/viewer.php?id=381176Webinventif.png
@toto
Alors oui effectivement, il y a souvent beaucoup de bridage en entreprise. refait le test de chez toi
Et merci pour la capture Sbertolotti
De rien
Merci pour tes très bon tuto bien écrit.
La même barre mais fixe donc visible tout le temps qui suit le scroll tant verticalement que horizontalement c’est possible a faire en partant de ce tuto?
C’est possible en chipotant simplement le css?
thanks
@nad
Oui c’est très simple, il suffit de changer la valeur « position: absolute » en « position: fixed » dans les CSS de « #wBandeau{«
merci tu viens de me faire avancer dans la vie
Bonjour,
J’ai mis en place ce tutoriel, tout marcha impec à part qu’à l’affichage tous les liens sont visibles, il faut passer sur catégories par exemple pour qu’ils soient cachés
Avez vous une solution pour y remédier?
@Buzenet
As-tu bien mis en place tout le CSS que j’ai fourni ? On dirait que t’as oublié un « display: none; » quelque part …
Bonjour,
Si je place ma barre en bas d’écran (bottom:0px et position:fixed) comment faire pour dérouler les blocs vers le haut et non en bas cette fois-ci ?
Merci beaucoup.
Draikhin
j’essaie de mettre ton menu dans mon blog WordPress fabriqué avec le thème Ataualpa mais il n’y a rien d’affiché
Peux-tu m’aider?
merci beaucoup
Bonjour,
Je souhaite savoir ou mettre le code javascript dans le thèmes. Là j’avoue être un peu perdu.
Sous mac et Dreamweaver
Merci beaucoup.
merci pour ce tuto sur jquery
Bonjour,
ce tuto est toujours d’actualité malgré le fait que tu l’aies posté en 2008. Je l’ai installé sur le theme Twentyten de WordPress pour le tester et je n’ai pas eu besoin d’installer le Javascript.
Est-ce normal ?