Connexion
Inscription

WILD

ROAR

Rejoindre une équipe ?Croquons-nous !Écrasons-nous !Trompetons-nous !
AccueilAccueil  RechercherRechercher  
Rechercher
Résultats par :
Recherche avancée Recherche avancée
S'enregistrerS'enregistrer  ConnexionConnexion  
Marquer tout comme luAfficher le forum Nouveaux messagesSes messages

  • Wild Roar
    •  :: Codage :: Tutoriels
  • [★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat !
Allan
17/04/2014Date d'inscription  : 28Âge  : 1275Messages  :
Allan



Informations



  • Version : PHPBB2

  • Auteur du code : Allan.

  • Auteur du tutoriel : Allan.

  • Ressources : Aucune

  • Rendu : Une image vaut bien mille mots, surtout un gif !

  • Pré-requis :

    • Une certaine connaissance du HTML/CSS

    • Les accès fondateur

    • Une bonne dose de courage

    • Un professeur génial

    • Ne pas hésiter à poser des question dans la partie adéquate !





Hello bande de poulpes ! Vous allez bien ? J'espère parce qu'aujourd'hui, je vais vous montrer comment réaliser un système permettant de cacher votre barre de navigation lors du scroll ! Le principe est simple ! Notre barre de menu se trouve en haut, fixée à notre page. Lorsqu'on scroll vers le bas, elle se cache mais laisse un liseret apparaitre. Si on survol ce liseret ou si l'on scroll vers le haut, la barre réapparait. Sweet non ?

Bon, assez de blabla, commençons à préparer tout ça ! (Un petit merci et les portes vers la magie du jQuery s'ouvriront à vous !)



Merci et à très bientôt !


M.A.J. 03/12/2015 : Exemple d'utilisation de SweetGumiho ajouté

05/02/15, 10:44 pm


Lamperouge Lelouch: If the king doesn’t move, then his subjects won’t follow.
[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! BUlJYbt
Merci Eurydice pour ce superbe vava !
Min Sia
01/04/2014Date d'inscription  : 30Âge  : 1392Messages  : BelgiqueLocalisation  :
Min Sia
Très beau tuto, merci du partage =3 05/02/15, 11:11 pm


[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 1439838629-minsiafria
ava ©️Aisling & sign ©️Azumii.
Mzelle Machin
13/02/2014Date d'inscription  : 25Âge  : 1818Messages  :
Mzelle Machin
Ah très pratique comme alternative!
Merci du partage! 08/02/15, 12:07 pm



[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! RBxbsXg

Merci à Pingouin pour cette sign et à Eustache/Pöka pour cet avatar *-*
[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 1395166329-mini-ephel-infiltre [★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! Sims_mini_ephel
Spoiler:
 
[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 1402084245-mzellemachinblaze
Merci Oraaaaak ♥️

Grande
14/02/2014Date d'inscription  : 31Âge  : 46Messages  :
Grande
Merci du partage. 09/02/15, 09:09 pm


[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 70681410 [★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 1393791200-mini-ephel-love
redSheep
18/02/2014Date d'inscription  : 20Âge  : 428Messages  : le cul entre deux chaises. :cLocalisation  :
redSheep
Mais ce gif du swag.
Allan le retour, mais avec swag. 15/02/15, 01:23 pm


[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! P7pLtw8
Spoiler:
 
« Hey mademoiselle, dommage qu'il n'y ait pas Mickey sur ton T-Shirt, ça t'aurait fait des seins animés ! »
Spoiler:
 
[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 994953redsheepespace[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 1393883593-azumii2
[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 1392847432-redsheep
merci mille fois kimel' :c
[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 561435redsheepnoel[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! Redsheep320-46464c7
[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! Redsheepsign-46464cf

AHRI A LE POUVOIR. Je la remercie pour ce kit soooooo ♥️♥️♥️♥️♥️♥️♥️
[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 339243signbalance2
SISI. nous les balances, on est seksy. merci mzelle machin ♥️
Et re-merci mzelle machin, ze best 4ever qui gère trop la banane.
I'M A FUCKING SOUAG GIRL (thanks pingouin)

Alondite
04/10/2014Date d'inscription  : 28Âge  : 10Messages  :
Alondite
Allez ! Comme je te l'ai dit j'adore le principe alors je prends ^^
Merci bien :) 05/03/15, 04:36 pm
Allan
17/04/2014Date d'inscription  : 28Âge  : 1275Messages  :
Allan
Content que ça plaise :D 05/03/15, 08:15 pm


Lamperouge Lelouch: If the king doesn’t move, then his subjects won’t follow.
[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! BUlJYbt
Merci Eurydice pour ce superbe vava !
Yorizura
30/03/2015Date d'inscription  : 30Âge  : 12Messages  :
Yorizura
Le niveau est sans doute trop haut pour moi mais je tente le coup :P
Merci <3

EDIT : ÇA MARCHE ! Et j'ai compris ! <3 <3 Merci encore XD 31/03/15, 03:25 pm
Allan
17/04/2014Date d'inscription  : 28Âge  : 1275Messages  :
Allan
Mais de rien :D 31/03/15, 07:11 pm


Lamperouge Lelouch: If the king doesn’t move, then his subjects won’t follow.
[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! BUlJYbt
Merci Eurydice pour ce superbe vava !
Nemalus
31/07/2014Date d'inscription  : 21Âge  : 32Messages  :
Nemalus
Merci \o/ 03/04/15, 08:25 pm


[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 887646nemalus
Merci Pwaar ♥️
Emikä
08/10/2014Date d'inscription  : 33Âge  : 12Messages  :
Emikä
merci beaucoup ^^ 08/05/15, 01:50 pm
Emikä
08/10/2014Date d'inscription  : 33Âge  : 12Messages  :
Emikä
merci beaucoup ^^ 08/05/15, 02:18 pm
One.
14/05/2015Date d'inscription  : 21Âge  : 47Messages  :
One.
merci! 01/06/15, 05:43 pm


[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 1393791200-mini-ephel-hipster
Euphemia
19/02/2014Date d'inscription  : 23Âge  : 67Messages  :
Euphemia
merci ! 24/06/15, 08:25 am
Nirvage
10/07/2015Date d'inscription  : 23Âge  : 26Messages  :
Nirvage
I need see this o/ Thanks o/ 12/07/15, 02:26 pm


Allan
17/04/2014Date d'inscription  : 28Âge  : 1275Messages  :
Allan
Mais de rien. J'ai fait en sorte que ce tuto soit accessible à tous, hésitez pas à poster vos rendus si vous avez tenté ! 12/07/15, 02:35 pm


Lamperouge Lelouch: If the king doesn’t move, then his subjects won’t follow.
[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! BUlJYbt
Merci Eurydice pour ce superbe vava !
Error
08/07/2015Date d'inscription  : 26Âge  : 65Messages  : à Piltover en train de tout détruire avec Poiscaille et Bang-Bang ! /GET JINXED/Localisation  :
Error
je pique ! (enfin je vais essayer xD) je voulais faire une jolie barre de navigation style banderole, mais les images partent en live ça me soul ... on verra si cela me soul moins O_x xD

EDIT : bon dès la première partie ça coince ... ça dit "Erreur Le template modifié contient des erreurs, il n'a pas pu être enregistré." T.T 13/07/15, 01:00 pm


[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 150708052351713418
Narcysse
05/07/2015Date d'inscription  : 25Âge  : 1137Messages  : Aix-En-ProvenceLocalisation  :
Narcysse
Hanw, je vais à la douche parce que je pue puis je teste ça. Merci Allan, notre contrat ne te sera que plus bénéfique pour le coup ! /PAN/ ♥ 13/07/15, 01:51 pm


[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 174755CUTEDIILE  &    [★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 862425croc


Mes blasons ♥:
 


Allan
17/04/2014Date d'inscription  : 28Âge  : 1275Messages  :
Allan
@Error: Tu es bien en PHPBB2 ? Je te propose d'ouvrir un sujet d'entraide :D

@Narcysse : Du coup, je peux en demander plus ? trooooll 14/07/15, 12:35 pm


Lamperouge Lelouch: If the king doesn’t move, then his subjects won’t follow.
[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! BUlJYbt
Merci Eurydice pour ce superbe vava !
Error
08/07/2015Date d'inscription  : 26Âge  : 65Messages  : à Piltover en train de tout détruire avec Poiscaille et Bang-Bang ! /GET JINXED/Localisation  :
Error
Yep Allan je suis bien en PHPBB2 ... ok bah je fais ça x) 14/07/15, 12:57 pm


[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 150708052351713418
Narcysse
05/07/2015Date d'inscription  : 25Âge  : 1137Messages  : Aix-En-ProvenceLocalisation  :
Narcysse
Juste un peu alors horny

Sinon... J'ai lu, j'ai compris, j'ai fait /o Ça marche du feu de dieu. Encore merci pour le tuto Allan !!! panda love

EDIT: Je suis peut-être passé à côté, c'est possible mais... Je fais comment pour remonter les boutons ? Parce qu'en fait je voudrais que la barre de navig' soit moins épaisse, alors j'ai rajouté un «height», mais la bordure est alors collée aux boutons. De ce fait, j'ai rajouté un padding-bottom, mais là, les boutons ne sont plus à égale distance du top et du bottom \ºoº/ (bref, j'espère que c'est compréhensible mdrr)

EDIT2: Je n'ai rien dit. J'ai trouvé ='D 15/07/15, 10:05 am
Allan
17/04/2014Date d'inscription  : 28Âge  : 1275Messages  :
Allan
Question aux non codeurs qui ont lu, est-ce que c'était assez clair ? Il y a des points où vous avez du vous y reprendre avant de comprendre ? 15/07/15, 05:45 pm


Lamperouge Lelouch: If the king doesn’t move, then his subjects won’t follow.
[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! BUlJYbt
Merci Eurydice pour ce superbe vava !
LeeBlue
02/10/2015Date d'inscription  : 22Âge  : 10Messages  :
LeeBlue
merci beaucoup ! 13/10/15, 10:18 am
SweetGumiho
14/10/2014Date d'inscription  : 29Âge  : 41Messages  : BordeauxLocalisation  :
SweetGumiho
Merci beaucoup pour ce tutoriel très utile. ^^ 18/11/15, 05:17 pm


AH LES CROCROCRO LES CROCROCRO LES CROCRODILEUH~
[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 678663Jemappelledilecrocrodile
R-max
27/11/2015Date d'inscription  : 47Âge  : 3Messages  : flandres(59)Localisation  :
R-max
bonjour et merci pour ce tuto .
bonne journée a tous , 27/11/15, 12:00 pm
SweetGumiho
14/10/2014Date d'inscription  : 29Âge  : 41Messages  : BordeauxLocalisation  :
SweetGumiho
Serait-il possible de faire que lorsque l'on n'est plus tout en haut du forum la barre de navigation n'apparaisse que lorsque l'on place la souris en haut de la page et disparaisse si celle-ci n'y est pas ? Merci bien. :) 01/12/15, 08:07 pm


AH LES CROCROCRO LES CROCROCRO LES CROCRODILEUH~
[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! 678663Jemappelledilecrocrodile
Allan
17/04/2014Date d'inscription  : 28Âge  : 1275Messages  :
Allan
J'ai ajouté une moyen de réaliser cela ! J'espère qu'il est compréhensible ! 03/12/15, 12:22 am


Lamperouge Lelouch: If the king doesn’t move, then his subjects won’t follow.
[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat ! BUlJYbt
Merci Eurydice pour ce superbe vava !
SHY
24/12/2015Date d'inscription  : 21Âge  : 10Messages  :
SHY
Va falloir adapter le tout mais c'est super, merci ! ^-^ 24/12/15, 10:15 am
Contenu sponsorisé
  • Wild Roar
    •  :: Codage :: Tutoriels
  • [★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat !
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit

Connexion

Pas encore inscrit ?

Vous pouvez vous inscrire et rejoindre Wild Roar en cliquant juste ici !

Mot de passe perdu ?

Pas de soucis, il est possible d'en demander un nouveau à cet endroit.