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.

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 :

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;
}

Deuxièmement, certaines caractéristiques des liens :

Code:

/*Trucs pour les liens*/
.navv {
  position: absolute;
  display: block;
  z-index: 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;
}

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);
}

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);
}

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  

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


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 !