| | <Navigation> Barre de navigation qui disparait au scroll |  |
|
 Hiro 
Ninja Codeur
 Messages : 1179
 | Barre de navigation perso Niveau: Intermédiaire | Par: Hiro | Validé par: | En date du: 29 mars 2012Salut, Aujourd'hui je vais vous montrer comment réaliser une barre de navigation simple comme celle-ci (celle du haut) : Exemple Descendez la page pour voir l'effet. C'est très simple. - Premièrement, dirigeons nous vers les templates, plus précisement overall_header et situons ce code : - Code:
-
<table cellspacing="0" cellpadding="0" border="0"> <tr> <td class="navi2" align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td> </tr> </table> Remontez-le en dessous de : - Code:
-
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
Puis rajoutez en dessous : - Code:
-
<div id="buttons"> <div id="button1" class="button1" > TOP</div> <div id="button2" class="button2" > SHOW </div> <span style="clear:both"></span> </div> - Deuxièmement direction PA:Modules:Gestion des codes Javascript, créez-en un nouveau et collez ce code : - Code:
-
//Hiro pour CSSActif
$(window).scroll(function(){
pageScroll = $(document).scrollTop();
//Si la page est scroll a + ou égale à 50px
if(pageScroll >=50)
//on diminue la largeur et l'opacité
$('.navi2').animate({
height: '0px',
opacity: '0'
}, 10),
//on affiche les bouttons
$('#buttons').fadeIn(600);
//sinon
else
//on cache les bouttons
$('#buttons').fadeOut(10),
//on réaugmente la largeur et l'opacité
$('.navi2').animate({
height: '22px',
opacity: '1'
}, 10);
});
//show nav on click
$(document).ready(function(){
$("#button2").click(function () {
$('.navi2').animate({
height: '22px',
opacity: '1'
}, 10),
$('#buttons').fadeOut(10);
});
//scroll to top
$("#button1").click(function () {
$('html, body').animate({scrollTop:0}, 'fast');
});
});
Nous ne reviendrons pas en détail sur celui-ci pour le moment. - Troisièmement, allons du côté du css pour y mettre ce code : - Code:
-
/*SECONDE NAV*/
.navi2 {
background:white; /*fond*/
width:100%;
height:22px;
margin:0 auto !important;
padding:10px;
color:#ECEDF3;
font-family:Arial;
font-size:10px;
border:1px solid #D7D9E2; /*bordures*/
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
text-align:center !important;
position:fixed; /*ne pas enlever*/
}
.navi2 a { /*Les liens*/
color:#A4A5AA;
text-decoration:none;
font-size:11px;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.navi2 a:hover {color:#F04444;}
/* BUTTONS */
#buttons { /*bouttons global*/
margin-left:400px;
position:fixed;
display:none;
font-family:Arial;
font-size:10px;
}
.button1 { /*boutton 1 = top*/
width:30px;
height:30px;
background:white;
border:1px solid #D7D9E2;
border-top:none;
font-weight:bold;
color:#D7D9E2;
text-align:center;
line-height:30px;
cursor:pointer;
float:left;
}
.button2 { /*boutton 2 = show*/
width:45px;
height:30px;
background:white;
border:1px solid #D7D9E2;
border-top:none;
font-weight:bold;
color:#D7D9E2;
text-align:center;
line-height:30px;
cursor:pointer;
float:left;
margin-left:5px;
}
Voilà, la barre de navigation est finie, si vous rencontrez le moindre souci, direction section d'aide, j'essaierai de vous aider. Merci à Anoobnyme pour l'idée. Personnalisez comme vous le souhaitez, je ne me suis pas trop attardé dessus  |
Dernière édition par Hiro le Sam 07 Juil 2012, 11:50, édité 3 fois | |
|
| | |
Hiro
Ninja Codeur
Messages : 1179
| FAQ Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml | | |
|
| | |
Kaktus
{ Membre }
 Messages : 68
| J'ai l'impression que l'exemple est obsolète, il serait bien de le changer. | | |
|
| | |
Hiro
Ninja Codeur
Messages : 1179
| C'est fait, merci | | |
|
| | |
Kaktus
{ Membre }
Messages : 68
| Oh eh bien, c'est vachement sympa tout ça !  Bon boulot ! | | |
|
| | |
Shinozizi
{ Membre }
Messages : 10
| Merci pour ce tutoriel ! | | |
|
| | |
Sweetix
{ Membre }
Messages : 7
| Coucou ! Il est où l'exemple ?  | | |
|
| | |
.Lou
{ Membre actif }
Messages : 771
| + 1 , il n'y a pas d'exemple. L'aperçu ne fonctionne plus Ce serait possible d'en avoir un nouveau ? | | |
|
| | |
Hiro
Ninja Codeur
Messages : 1179
| |
| | |
.Lou
{ Membre actif }
Messages : 771
| Oh c'est super ça ! Merci beaucoup !  | | |
|
| | |
Maguitte2008
{ Membre }
Messages : 151
| L'exemple ne fonctionne pas ! Dommage ! =) | | |
|
| | |
Espeon 
Administrateur
Messages : 1819
| Hmmm, ce tutoriel sera revu et MAJ, on hébergera l'exemple sur CSSActif ainsi il n'y aura plus de soucis Désolé pour le dérangement, en revanche je ne peux pas encore dire quand il sera retouché, il y a déjà une bonne série de tutoriels dans la file d'attente En revanche, cela doit fonctionner a priori, n'hésitez pas à suivre le tutoriel et à rapporter vos impressions ! | | |
|
| | |
|
clkmaker
{ Membre }
Messages : 5
| Désolé si je ne poste pas ce message au bon endroit. Cela concerne ce topic:
Je voudrais savoir comment changer la barre de navigation. C´est à dire tout simplement changer la texte.
Oar exemple, soit le texte de départ "faq". Quand je suis dans le panneau d´administration, je vais dans en-tete et structure (corrigez moi si je me trompe), je clique sur faq et je ne peut pas changer le texte ni l´endroit ou cela mène, aidez moi s´il vous plait, je vous en serais très reconnaissant. | | |
|
| | |
Contenu sponsorisé
| |
| | |
| | <Navigation> Barre de navigation qui disparait au scroll | |
|
