Connexion
Inscription

WILD

ROAR

Rejoindre une équipe ?Croquons-nous !Écrasons-nous !Trompetons-nous !
AccueilAccueil  FAQFAQ  RechercherRechercher  
Rechercher
Résultats par :
Recherche avancée Recherche avancée
MembresMembres  GroupesGroupes  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 !
avatar
17/04/2014Date d'inscription  : 25Â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.

Merci Eurydice pour ce superbe vava !
avatar
01/04/2014Date d'inscription  : 28Âge  : 1392Messages  : BelgiqueLocalisation  :
Min Sia
Très beau tuto, merci du partage =3 05/02/15, 11:11 pm



ava ©Aisling & sign ©Azumii.
avatar
13/02/2014Date d'inscription  : 23Âge  : 1818Messages  :
Mzelle Machin
Ah très pratique comme alternative!
Merci du partage! 08/02/15, 12:07 pm





Merci à Pingouin pour cette sign et à Eustache/Pöka pour cet avatar *-*

Spoiler:
 

Merci Oraaaaak ♥

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


avatar
18/02/2014Date d'inscription  : 17Â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


Spoiler:
 
« Hey mademoiselle, dommage qu'il n'y ait pas Mickey sur ton T-Shirt, ça t'aurait fait des seins animés ! »
Spoiler:
 


merci mille fois kimel' :c


AHRI A LE POUVOIR. Je la remercie pour ce kit soooooo ♥♥♥♥♥♥♥

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)

avatar
04/10/2014Date d'inscription  : 25Â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
avatar
17/04/2014Date d'inscription  : 25Â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.

Merci Eurydice pour ce superbe vava !
avatar
30/03/2015Date d'inscription  : 27Â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
avatar
17/04/2014Date d'inscription  : 25Â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.

Merci Eurydice pour ce superbe vava !
avatar
31/07/2014Date d'inscription  : 19Âge  : 32Messages  :
Nemalus
Merci \o/ 03/04/15, 08:25 pm



Merci Pwaar ♥
avatar
08/10/2014Date d'inscription  : 30Âge  : 12Messages  :
Emikä
merci beaucoup ^^ 08/05/15, 01:50 pm
avatar
08/10/2014Date d'inscription  : 30Âge  : 12Messages  :
Emikä
merci beaucoup ^^ 08/05/15, 02:18 pm
avatar
14/05/2015Date d'inscription  : 18Âge  : 47Messages  :
One.
merci! 01/06/15, 05:43 pm


avatar
19/02/2014Date d'inscription  : 21Âge  : 67Messages  :
Euphemia
merci ! 24/06/15, 08:25 am
avatar
10/07/2015Date d'inscription  : 21Âge  : 26Messages  :
Nirvage
I need see this o/ Thanks o/ 12/07/15, 02:26 pm


avatar
17/04/2014Date d'inscription  : 25Â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.

Merci Eurydice pour ce superbe vava !
avatar
08/07/2015Date d'inscription  : 23Â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


avatar
05/07/2015Date d'inscription  : 22Â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


 &    


Mes blasons ♥:
 


avatar
17/04/2014Date d'inscription  : 25Â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.

Merci Eurydice pour ce superbe vava !
avatar
08/07/2015Date d'inscription  : 23Â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


avatar
05/07/2015Date d'inscription  : 22Â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
avatar
17/04/2014Date d'inscription  : 25Â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.

Merci Eurydice pour ce superbe vava !
avatar
02/10/2015Date d'inscription  : 19Âge  : 10Messages  :
LeeBlue
merci beaucoup ! 13/10/15, 10:18 am
avatar
14/10/2014Date d'inscription  : 26Â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~
avatar
27/11/2015Date d'inscription  : 44Âge  : 3Messages  : flandres(59)Localisation  :
R-max
bonjour et merci pour ce tuto .
bonne journée a tous , 27/11/15, 12:00 pm
avatar
14/10/2014Date d'inscription  : 26Â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~
avatar
17/04/2014Date d'inscription  : 25Â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.

Merci Eurydice pour ce superbe vava !
avatar
24/12/2015Date d'inscription  : 18Â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.