AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Navigation en forme d'horloge

    Onyx
    Onyx
    FémininAge : 26Messages : 3300

    le Lun 23 Juin 2014 - 20:25

    Rappel du premier message :




    Navigation en forme d'horloge


    Salut !

    Voici un petit LS d'une barre de navigation en forme d'horloge dont l'aiguille pointe sur les liens survolés qui a été fait pour la demande de Dastan.

    Pour l'aperçu, cliquez juste ici.

    Ce code est en trois parties.
    • Tout d'abord, nous allons supprimer l'ancienne navigation et la remplacer par la notre dans le template "Overhall Header".
    • Ensuite, nous allons mettre notre navigation en forme en allant ajouter certains éléments dans le CSS.
    • Enfin, nous allons ajouter un petit javascript pour savoir qu'un nouveau message privé est arrivé dans notre messagerie. D'ailleurs, pour cette partie, je me suis servie de ce tuto : http://www.school-of-pub.net/t11850-fa-totalement-personnaliser-la-barre-de-nav.


    Mettre un crédit vers Never-Utopia est obligatoire si vous utilisez ce LS.



    1. Corps de la navigation (Template Overhall_Header)


    Pour commencer, nous allons devoir nous débarrasser de la navigation normale afin qu'elle arrête de nous traîner dans les jambes.
    Comment?
    Nous allons carrément la supprimer.

    Elle devrait normalement se trouver entre les lignes 273 et 277. Voici à quoi elle ressemble :
    Code:
    <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
     <tr>
     <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
     </tr>
     </table>


    Une fois que c'est fait, il est temps d'ajouter notre propre navigation. Du coup, au même endroit où était positionné l'ancienne barre de navigation, nous allons venir mettre le code suivant :
    Code:
    <table cellspacing="0" cellpadding="0" border="0" align="left">
     <tr>
                                              <td align="left">
       <div class="nav_bloc" align="center">
        <div class="navv" id="accueil"><a href="/forum"><img src="https://i.imgur.com/BleQNVF.png" alt="Accueil" /></a></div>
        <div class="navv" id="rechercher"><a href="/search"><img src="https://i.imgur.com/ILyNbqm.png" alt="Rechercher" /></a></div>
        <div class="navv" id="membres"><a href="/memberlist"><img src="https://i.imgur.com/smihrYB.png" alt="Membres" /></a></div>
        <div class="navv" id="groupes"><a href="/groups"><img src="https://i.imgur.com/0TCFuVf.png" alt="Groupes" /></a></div>
                                                        <div class="navv" id="profil"><a href="/profile?mode=editprofile"><img src="https://i.imgur.com/Fur3amR.png" alt="Profil" /></a></div>
          <!-- BEGIN switch_user_logged_in -->
        <div class="navv" id="mp"><a href="/privmsg?folder=inbox"><img src="https://i.imgur.com/AEQMua4.png" alt="MP" id="mpO" /></a></div>
                                                        <div class="navv" id="off"><a href="/login?logout"><img src="https://i.imgur.com/1WWhoBy.png" alt="Déconnexion" /></a></div>
          <!-- END switch_user_logged_in -->
          <!-- BEGIN switch_user_logged_out -->
                                                        <div class="navv" id="s_inscrire"><a href="/register"><img src="https://i.imgur.com/gFDkg6v.png" alt="S'inscrire" /></a></div>
                                                        <div class="navv" id="on"><a href="/login"><img src="https://i.imgur.com/1WWhoBy.png" alt="Connexion" /></a></div>
          <!-- END switch_user_logged_out -->
                                                        <div class="navv" id="nav_aiguille"></div>
                                                        <div style="visibility: hidden;">{GENERATED_NAV_BAR}</div>
          </div></td>
     </tr>
     </table>

    Donc, histoire de comprendre un peu ce qu'on a fait, nous allons regarder un peu le code que nous venons de rajouter :

    • Au tout début, il y a une table qui nous permet de positionner notre navigation, de la même façon qu'avec la navigation normale.
    • Ensuite, nous avons une "div" avec la class "nav_bloc". C'est le bloc avec l'image de l'horloge en background qui contient tous les liens de la navigation.
    • Puis, nous avons diverses "div" avec les liens de notre navigation. C'est séparé en trois parties :
      • Les liens que tout le monde peut voir.
      • Les liens entre le "BEGIN switch_user_logged_in" et "END switch_user_logged_in" que seuls les membres connectés peuvent voir.
      • Les liens entre "BEGIN switch_user_logged_out" et le "END switch_user_logged_out" que seuls les invités peuvent voir.
    • En avant dernier, nous avons l'aiguille qui tourne selon le lien sur lequel notre curseur est placé.
    • Enfin, nous avons l'ancienne navigation "GENERATED_NAV_BAR" qui est invisible mais qui nous sera utile pour récupérer le code des nouveaux MPs.

    À l’exception des images de l'aiguille et de l'horloge, toutes les images des liens peuvent être modifiées à cette étape.



    2. Mise en forme (CSS)


    Si vous avez installé le code dans le template, vous voyez sans doute tout de suite que ce n'est pas super du tout pour le moment.

    Du coup, nous allons mettre en forme notre navigation à l'aide du code suivant que j'expliquerai ensuite :
    Code:
                  /*NAVIGATION*/

    /*Bloc de l'horloge*/
    .nav_bloc {
      background-image: url('https://i.imgur.com/u2wxcxS.png');
      width: 300px;
      height: 300px;
      position: relative;
      display: block;
      margin-top: -190px;
      margin-left: 30px;
    }

    /*Trucs pour les liens*/
    .navv {
      position: absolute;
      display: block;
      z-index: 2;
    }

    /*Aiguille*/
    #nav_aiguille {
      background-image: url('https://i.imgur.com/QpoF06N.png');
      width: 14px;
      height: 244px;
      bottom: 32px;
      left: 140px;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      transition: 0.5s;
      -webkit-transition: 0.5s;
      z-index: 1;
    }

    /*Positionnement des liens*/
    #accueil {
      width: 100px;
      height: 27px;
      bottom: 260px;
      left: 101px;
      -webkit-transform:rotate(1deg);
      transform:rotate(1deg);
    }
    #rechercher {
      width: 131px;
      height: 35px;
      bottom: 200px;
      left: 184px;
      -webkit-transform:rotate(57deg);
      transform:rotate(57deg);
    }
    #membres {
      width: 94px;
      height: 28px;
      bottom: 100px;
      left: 218px;
      -webkit-transform:rotate(109deg);
      transform:rotate(109deg);
    }
    #groupes {
      width: 99px;
      height: 32px;
      bottom: 21px;
      left: 144px;
      -webkit-transform:rotate(157deg);
      transform:rotate(157deg);
    }
    #profil {
      width: 79px;
      height: 28px;
      bottom: 25px;
      left: 55px;
      -webkit-transform:rotate(205deg);
      transform:rotate(205deg);
    }
    #mp {
      width: 115px;
      height: 39px;
      bottom: 120px;
      left: -31px;
      -webkit-transform:rotate(265deg);
      transform:rotate(265deg);
    }
    #off, #on {
      width: 80px;
      height: 31px;
      bottom: 225px;
      left: 26px;
      -webkit-transform:rotate(315deg);
      transform:rotate(315deg);
    }
    #s_inscrire {
      width: 107px;
      height: 37px;
      bottom: 120px;
      left: -27px;
      -webkit-transform:rotate(263deg);
      transform:rotate(263deg);
    }

    /*Mouvement de l'aiguille selon le lien survolé*/
    #accueil:hover ~ #nav_aiguille {
      -webkit-transform:rotate(2deg);
      transform:rotate(2deg);
    }
    #rechercher:hover ~ #nav_aiguille {
      -webkit-transform:rotate(57deg);
      transform:rotate(57deg);
    }
    #membres:hover ~ #nav_aiguille {
      -webkit-transform:rotate(109deg);
      transform:rotate(109deg);
    }
    #groupes:hover ~ #nav_aiguille {
      -webkit-transform:rotate(157deg);
      transform:rotate(157deg);
    }
    #profil:hover ~ #nav_aiguille {
      -webkit-transform:rotate(205deg);
      transform:rotate(205deg);
    }
    #mp:hover ~ #nav_aiguille {
      -webkit-transform:rotate(265deg);
      transform:rotate(265deg);
    }
    #s_inscrire:hover ~ #nav_aiguille {
      -webkit-transform:rotate(263deg);
      transform:rotate(263deg);
    }
    #on:hover ~ #nav_aiguille, #off:hover ~ #nav_aiguille {
      -webkit-transform: rotate(315deg);
      transform: rotate(315deg);
    }

                   /*FIN NAVIGATION*/


    Maintenant, pour ceux qui veulent comprendre ce qu'ils font à la place de faire du copier/coller, nous allons découper certaines parties de ce CSS afin de comprendre comment cela fonctionne.

    Premièrement, le bloc de l'horloge :
    Code:
    /*Bloc de l'horloge*/
    .nav_bloc {
      background-image: url('https://i.imgur.com/u2wxcxS.png');
      width: 300px;
      height: 300px;
      position: relative;
      display: block;
      margin-top: -190px;
      margin-left: 30px;
    }

    • Le "background-image" est image de l'horloge.
    • Le "width" est la largeur de l'image de l'horloge et est importante puisque cela délimite la largeur du bloc également.
    • Le "height" est la hauteur de l'image de l'horloge et est importante puisque cela délimite la hauteur du bloc également.
    • La "position: relative" indique que s'il y a d'autres div à l'intérieur du bloc, leur position sera définie par rapport à la largeur et à la hauteur du bloc de l'horloge.
    • Le "display: block;" indique que le bloc de l'horloge est un bloc.
    • Le "margin-top: -190px" permet de déplacer le bloc de 190px vers le haut, à savoir sur la bannière.
    • Le "margin-left: 30px" permet de déplacer le bloc de 30px vers la droite.



    Deuxièmement, certaines caractéristiques des liens :
    Code:
    /*Trucs pour les liens*/
    .navv {
      position: absolute;
      display: block;
      z-index: 2;
    }

    • La "position: absolute" veut dire que la position des liens sont automatiquement liés aux bordures du bloc de l'horloge.
    • Le "display: block" indique que les liens sont des blocs.
    • Le " z-index: 2" indique que les liens sont au-dessus des éléments qui ont un "z-index" inférieur à 2 et en-dessous des éléments qui ont un "z-index" supérieurs à 2.



    Troisièmement, l'aiguille comme elle est initialement :
    Code:
    /*Aiguille*/
    #nav_aiguille {
      background-image: url('https://i.imgur.com/QpoF06N.png');
      width: 14px;
      height: 244px;
      bottom: 32px;
      left: 140px;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: 0.5s;
      transition: 0.5s;
      z-index: 1;
    }

    • Le "background-image" est image de l'aiguille.
    • Le "width" est la largeur de l'image de l'aiguille et est importante puisque cela délimite la largeur du bloc également.
    • Le "height" est la hauteur de l'image de l'aiguille et est importante puisque cela délimite la hauteur du bloc également.
    • Le "bottom" indique que le bloc de l'aiguille est à 32px du bas du bloc de l'horloge.
    • Le "left" indique que le bloc de l'aiguille est à 140px du côté gauche du bloc de l'horloge.
    • Le "transform: rotate(0deg);" indique que le bloc de l'aiguille reste droit.
    • Le "transition: 0.5s;" indique que les mouvements de l'aiguille seront d'une durée de 0,5 seconde.
    • Le " z-index: 1" indique que les liens sont au-dessus des éléments qui ont un "z-index" inférieur à 1 et en-dessous des éléments qui ont un "z-index" supérieurs à 1.



    Quatrièmement, le positionnement des liens de la navigation. Comme ils sont tous basés sur le même principe, je prendrai le lien de "rechercher" comme exemple :
    Code:
    #rechercher {
      width: 131px;
      height: 35px;
      bottom: 200px;
      left: 184px;
      -webkit-transform:rotate(57deg);
      transform:rotate(57deg);
    }

    • Le "width" est la largeur de l'image de rechercher et est importante puisque cela délimite la largeur du bloc également.
    • Le "height" est la hauteur de l'image de rechercher et est importante puisque cela délimite la hauteur du bloc également.
    • Le "bottom" indique que le bloc de rechercher est à 200px du bas du bloc de l'horloge.
    • Le "left" indique que le bloc de rechercher est à 184px du côté gauche du bloc de l'horloge.
    • Le "transform: rotate(57deg);" indique que le bloc de rechercher est tourné de 57 degrés vers la droite.



    Dernièrement, le déplacement de l'aiguille en fonction du lien survolé. Comme ils sont tous basés sur le même principe, je prendrai le lien de "rechercher" comme exemple :
    Code:
    #rechercher:hover ~ #nav_aiguille {
      -webkit-transform:rotate(57deg);
      transform:rotate(57deg);
    }

    • Le "#rechercher:hover ~ #nav_aiguille" veut dire que quand le bloc "#rechercher" (bloc de rechercher) est survolé, il y a l'effet suivant sur le bloc "#nav_aiguille" (bloc de l'aiguille).
    • Le "transform: rotate(57deg);" indique que le bloc de l'aiguille tourne de 57 degrés vers la droite. Normalement, la rotation devrait être la même que celle qui a été appliquée sur le bloc rechercher.


    J'ai modifié tous les liens des images et tout est décalé! Qu'est-ce que je fais maintenant?
    Premièrement, va lire les explications du CSS si tu ne l'as pas fait.
    Ensuite, il va falloir repositionner chaque lien modifié avec leurs attributs "bottom", "left" et "rotate".
    N'oublie pas d'aller ajuster la rotation de l'aiguille avec la nouvelle rotation de tes liens !
    Enfin... bonne chance pour ce casse-tête Twisted Evil 



    3. Nouveau MP (Javascript)


    Avec la navigation de base, il y a une image différente que celle de la messagerie normale lorsqu'il y a un nouveau message. Seulement, ce n'est pas une fonction automatique si on fait sa propre barre de navigation. Du coup, nous allons reproduire cet effet !

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > MODULES
    > > > HTML & JAVASCRIPT
    > > > > GESTION DES CODES JAVASCRIPT

    À ce même endroit, si vous n'avez pas activé la gestion des javascripts, il faut le faire avant de faire tout autre chose.

    Ensuite, nous allons "créer un nouveau javascript".
    Il va falloir lui choisir un nom. Ex: "Nouveau MP"
    Ensuite, il va falloir cocher le Placement "Sur toutes les pages".

    Puis, on va y coller le code suivant :
    Code:
    jQuery().ready(function(){
            
            /* On prend l'élément du menu de base pour savoir s'il y a un nouveau message */
            var e= $("#i_icon_mini_new_message");
            
            /* Si il y en a pas, on s'arrête là */
            if(!e.length) return;
            
            /* S'il y en a, l'image changera pour l'image de nouveau message*/
            $("#mpO").attr('src','https://i.imgur.com/uTwYE10.png');
          
          
            });

    Cette partie de code est expliquée directement dans le code alors on va en rester là ^^




    C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

    À plus !


    Merci de laisser un message pour donner vos impressions/commentaires/remerciements ^^


    Dernière édition par Onyx le Ven 22 Fév 2019 - 2:37, édité 8 fois
    Cupcake-11
    Cupcake-11
    FémininAge : 21Messages : 31

    le Lun 4 Aoû 2014 - 20:14

    Merci infiniment c'est super joli ♥
    Jasmée
    Jasmée
    FémininAge : 28Messages : 43

    le Jeu 7 Aoû 2014 - 0:16

    C'est super original et vachement bien fait ! Merci beaucoup !
    Arpège
    Arpège
    FémininAge : 21Messages : 111

    le Jeu 7 Aoû 2014 - 12:18

    Hanwaii :3

    J'adore le rendu ^^



    Navigation en forme d'horloge - Page 2 170221084427548922
    Writers World commence à ouvrir !
    Kiwix
    Kiwix
    FémininAge : 24Messages : 67

    le Ven 8 Aoû 2014 - 22:02

    C'est incroyable!
    avatar
    Nal Souclade
    MasculinAge : 20Messages : 163

    le Dim 10 Aoû 2014 - 15:04

    Ooow ! C'est sympa ça comme genre ! Merci beaucoup !
    lala zhang
    lala zhang
    FémininAge : 28Messages : 369

    le Dim 10 Aoû 2014 - 17:57

    C'est super original merci du partage
    piou
    piou
    FémininAge : 26Messages : 59

    le Lun 11 Aoû 2014 - 14:07

    merci pour ce tuto n_n
    Clémentine
    Clémentine
    FémininAge : 27Messages : 223

    le Mer 13 Aoû 2014 - 16:06

    Joli!!! Merci ^^



    Navigation en forme d'horloge - Page 2 9w9t
    Shymi
    Shymi
    FémininAge : 21Messages : 65

    le Mer 13 Aoû 2014 - 20:33

    Très original ! Very Happy
    Merci du partage ♥
    0smose
    0smose
    FémininAge : 24Messages : 165

    le Dim 17 Aoû 2014 - 14:30

    Une horloge Oo Quelle excellente idée ! Je vais tester cela... J'espère que cela ira bien.
    Merci beaucoup pour ton brillant travail !



    Navigation en forme d'horloge - Page 2 Bannie10

    But I'm only human
    And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
    knives in my heart. You build me up and then I fall apart.
    'Cause I'm only human.
    Azaral
    Azaral
    FémininAge : 23Messages : 69

    le Lun 18 Aoû 2014 - 10:33

    merci *o*
    Heartfilia
    Heartfilia
    FémininAge : 19Messages : 98

    le Lun 18 Aoû 2014 - 20:37

    Magnifique, merci !



    YOU HELLA SAVED MY LIFE
    - chloe price
    Asuman
    Asuman
    MasculinAge : 24Messages : 20

    le Mar 19 Aoû 2014 - 19:25

    Merci Very Happy
    Hollyx
    Hollyx
    FémininAge : 27Messages : 76

    le Mer 20 Aoû 2014 - 20:29

    Oh my goooooooo(...)ooooood!
    C'est réellement splendide. Merkiiiii!
    Nîniel
    Nîniel
    FémininAge : 24Messages : 70

    le Mer 20 Aoû 2014 - 23:18

    Merci



    Navigation en forme d'horloge - Page 2 1384099300-nini-nu-signa
    Araik
    Araik
    FémininAge : 24Messages : 250

    le Jeu 21 Aoû 2014 - 16:31

    vraiment magnifique



    Navigation en forme d'horloge - Page 2 Signat15
    MissMali
    MissMali
    FémininAge : 31Messages : 12

    le Sam 23 Aoû 2014 - 9:40

    Merci !
    Frereplaton
    Frereplaton
    FémininAge : 29Messages : 25

    le Dim 24 Aoû 2014 - 17:38

    Merci, c'est super beau!! :hug: 
    Damned
    Damned
    FémininAge : 18Messages : 109

    le Dim 24 Aoû 2014 - 18:23

    Thanks
    Frereplaton
    Frereplaton
    FémininAge : 29Messages : 25

    le Dim 24 Aoû 2014 - 19:03

    Pour les besoins de mon forum j'ai changé les couleurs de l'horloge, en marron plus foncé: voici l'image si certains sont intéressés!

    Navigation en forme d'horloge - Page 2 Montre11
    Chocolakato
    Chocolakato
    FémininAge : 29Messages : 801

    le Lun 25 Aoû 2014 - 1:06

    Moi qui cherchais quelque chose qui ne fasse pas trop moderne, vous me sauvez la vie !



    catkiller
    catkiller
    FémininAge : 24Messages : 70

    le Mar 26 Aoû 2014 - 4:01

    j'adore l'idée!
    Kinst.MP
    Kinst.MP
    FémininAge : 20Messages : 53

    le Mar 26 Aoû 2014 - 14:33

    waouh je pensais pas que c'était possible de faire ça OO
    Merci en tout cas!
    Wanda Maximoff
    Wanda Maximoff
    FémininAge : 25Messages : 80

    le Mer 27 Aoû 2014 - 13:03

    C'est très original et magnifique !
    Merci ! ♥
    Lilie
    Lilie
    FémininAge : 36Messages : 171

    le Ven 29 Aoû 2014 - 17:31

    Pouah c'est magnifique ! Bravo
    Contenu sponsorisé


      La date/heure actuelle est Ven 6 Déc 2019 - 9:31