| <Navigation> Barre de navigation qui disparait au scroll | |
|
Hiro ![Ninja Codeur Ninja Codeur](https://2img.net/h/files.cssactif.com/rangs/membre.png)
Ninja Codeur
Messages : 1179
![<Navigation> Barre de navigation qui disparait au scroll Empty](https://2img.net/i/fa/empty.gif) | 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 ![Wink](https://2img.net/i/fa/i/smiles/icon_wink.gif) |
Dernière édition par Hiro le Sam 07 Juil 2012, 11:50, édité 3 fois | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Hiro ![Ninja Codeur Ninja Codeur](https://2img.net/h/files.cssactif.com/rangs/membre.png)
Ninja Codeur
Messages : 1179
![<Navigation> Barre de navigation qui disparait au scroll Empty](https://2img.net/i/fa/empty.gif) | FAQ Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici : http://www.css-actif.com/f17-aide-css-xhtml | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Kaktus ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 68
![<Navigation> Barre de navigation qui disparait au scroll Empty](https://2img.net/i/fa/empty.gif) | J'ai l'impression que l'exemple est obsolète, il serait bien de le changer. ![Wink](https://2img.net/i/fa/i/smiles/icon_wink.gif) | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Hiro ![Ninja Codeur Ninja Codeur](https://2img.net/h/files.cssactif.com/rangs/membre.png)
Ninja Codeur
Messages : 1179
![<Navigation> Barre de navigation qui disparait au scroll Empty](https://2img.net/i/fa/empty.gif) | C'est fait, merci ![Wink](https://2img.net/i/fa/i/smiles/icon_wink.gif) | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Kaktus ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 68
![<Navigation> Barre de navigation qui disparait au scroll Empty](https://2img.net/i/fa/empty.gif) | Oh eh bien, c'est vachement sympa tout ça ! ![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif) Bon boulot ! ![Wink](https://2img.net/i/fa/i/smiles/icon_wink.gif) | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Shinozizi ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 10
![<Navigation> Barre de navigation qui disparait au scroll Empty](https://2img.net/i/fa/empty.gif) | Merci pour ce tutoriel ! ![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif) | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Sweetix ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 7
![<Navigation> Barre de navigation qui disparait au scroll Empty](https://2img.net/i/fa/empty.gif) | Coucou ! Il est où l'exemple ? ![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png) | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
.Lou ![{ Membre actif } { Membre actif }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre actif }
Messages : 771
![<Navigation> Barre de navigation qui disparait au scroll Empty](https://2img.net/i/fa/empty.gif) | + 1 , il n'y a pas d'exemple. L'aperçu ne fonctionne plus Ce serait possible d'en avoir un nouveau ? | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Hiro ![Ninja Codeur Ninja Codeur](https://2img.net/h/files.cssactif.com/rangs/membre.png)
Ninja Codeur
Messages : 1179
![<Navigation> Barre de navigation qui disparait au scroll Empty](https://2img.net/i/fa/empty.gif) | |
![Aller en bas](https://2img.net/i/empty.gif) | |
.Lou ![{ Membre actif } { Membre actif }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre actif }
Messages : 771
![<Navigation> Barre de navigation qui disparait au scroll Empty](https://2img.net/i/fa/empty.gif) | Oh c'est super ça ! Merci beaucoup ! | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Maguitte2008 ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 151
![<Navigation> Barre de navigation qui disparait au scroll Empty](https://2img.net/i/fa/empty.gif) | L'exemple ne fonctionne pas ! Dommage ! =) | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Espeon ![Administrateur Administrateur](https://2img.net/h/files.cssactif.com/rangs/admin.png)
Administrateur
Messages : 1819
![<Navigation> Barre de navigation qui disparait au scroll Empty](https://2img.net/i/fa/empty.gif) | Hmmm, ce tutoriel sera revu et MAJ, on hébergera l'exemple sur CSSActif ainsi il n'y aura plus de soucis ![Wink](https://2img.net/i/fa/i/smiles/icon_wink.gif) 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 ![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif) En revanche, cela doit fonctionner a priori, n'hésitez pas à suivre le tutoriel et à rapporter vos impressions ! | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
|
clkmaker ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 5
![<Navigation> Barre de navigation qui disparait au scroll Empty](https://2img.net/i/fa/empty.gif) | 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. | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Contenu sponsorisé
![<Navigation> Barre de navigation qui disparait au scroll Empty](https://2img.net/i/fa/empty.gif) | |
![Aller en bas](https://2img.net/i/empty.gif) | |
| <Navigation> Barre de navigation qui disparait au scroll | |
|