Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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.


    Barre de navigation ouvrable

    Partagez
    FémininAge : 22Message(s) : 2473

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    13/20  (13/20)
    Onyx
    le Mer 3 Sep 2014 - 7:51
    Rappel du premier message :


    Barre de navigation ouvrable




    Salut !

    Voici un petit LS d'une barre de navigation ouvrable au clic que j'ai remodelée à partir de la demande de Valou93. À savoir que j'ai utilisé du javascript pour ouvrir/fermer la barre, mais que vous pouvez utiliser ce tuto pour faire la même chose avec des targets qui vous préférez cette méthode.

    Pour voir l'aperçu "fermé" : cliquez ici.
    Pour voir l'aperçu "ouvert" au clic : cliquez ici.

    Ce code est en deux parties.
    • Tout d'abord, nous allons installer la navigation (et le javascript qui la fait fonctionner) dans le template.
    • Puis, nous allons mettre en forme la navigation à l'aide du CSS.

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


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



    1. Corps de la navigation (Template Overhall_Header)


    Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_box" .

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > TEMPLATES
    > > > > GÉNÉRAL
    > > > > > OVERHALL HEADER

    Nous allons alors chercher l'ancienne navigation qui devrait être aux alentours des lignes 173 à 177 et ressembler à ceci :
    Code:
    <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
     <tr>
     <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
     </tr>
     </table>

    Nous allons la remplacer par notre propre navigation, à savoir ceci :
    Code:
    <table id="navbloc" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td align="center">
          <div class="nav_links">
            {GENERATED_NAV_BAR}
          </div>
        </td>
      </tr>
      <tr>
        <td align="left">
          <span id="nav_ouvrir">Ouvrir la navigation</span>       
          <span id="nav_fermer" style="display: none;">Fermer la navigation</span>
        </td>
      </tr>
    </table>
    <script>document.getElementById("nav_ouvrir").onclick = function() {nav_open()}; /*Fonction pour ouvrir la navigation*/
    document.getElementById("nav_fermer").onclick = function() {nav_close()}; /*Fonction pour fermer la navigation*/
    function nav_open() {
      document.getElementById("nav_ouvrir").style.display = "none"; /*Fait disparition le bouton ouvrir*/
      document.getElementById("nav_fermer").style.display = "block"; /*Fait apparaître le bouton fermer*/
      document.getElementById("navbloc").style.top = "0px";} /*Fait baisser la navigation*/
    function nav_close() {
      document.getElementById("nav_fermer").style.display = "none"; /*Fait disparition le bouton fermer*/
      document.getElementById("nav_ouvrir").style.display = "block"; /*Fait apparaître le bouton ouvrir*/
      document.getElementById("navbloc").style.top = "-32px";} /*Fait monter la navigation*/</script>


    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 un tableau avec l'id "navbloc" qui nous permet de positionner notre navigation, de la même façon qu'avec la navigation normale.
    • Ensuite, dans la première cellule de notre tableau, nous avons la barre de navigation avec la class "nav_links".
    • Puis, dans la deuxième cellule, nous avons les deux boutons qui sont respectivements idenditifés avec les id "nav_ouvrir" et "nav_fermer". Le bouton "fermer" a un "display: none" pour qu'il soit invisible au départ.
    • Enfin, nous avons le javascript qui permet de fermer et d'ouvrir la navigation. Il y a déjà des explications directement dans le code, alors on va en rester là.



    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 très esthétique pour le moment. Du coup, nous allons mettre en forme notre navigation à l'aide du CSS.

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > IMAGES ET COULEURS
    > > > > COULEURS
    > > > > > FEUILLE DE STYLE CSS

    Puis, nous allons ajouter le CSS suivant :
    Code:
       /********************************************* NAVIGATION *********************************************/
    /*Fixe la navigation en haut cachée*/
    #navbloc {
      position: fixed;
      z-index: 20;
      top: -32px;
      left: 0px;
      width: 100%;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    /*Barre de la navigation*/
    .nav_links {
      background: #1A1815;
      border-bottom: 2px solid #000000;
      color: #88346B;
      height: 20px;
      padding: 5px;
    }
    /*Liens de la navigation*/
    #navbloc a.mainmenu {
      font-family: monotype corsiva;
      font-size: 18px;
      color: darkgoldenrod;
      text-shadow: 1px 1px 1px #000000;
    }
    /*Liens de la navigation au survol*/
    #navbloc a.mainmenu:hover {
      color: goldenrod;
      text-shadow: 1px 1px 1px #000000;
    }

    /*Boutons pour ouvrir ou fermer la navigation*/
    #nav_ouvrir, #nav_fermer {
      display: block;
      width: 190px;
      margin-left: 15px;
      margin-top: -2px;
      background: #1A1815;
      border: 2px solid #000000;
      border-top: none;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      color: darkgoldenrod;
      text-shadow: 1px 1px 1px #000000;
      padding: 5px;
      font-family: Times New Roman;
      font-size: 20px;
      font-variant: small-caps;
      cursor: pointer;
      text-align: center;
    }
    /*Boutons au survol*/
    #nav_ouvrir:hover, #nav_fermer:hover {
      color: goldenrod;
    }
       /********************************************* FIN NAVIGATION *********************************************/


    Pour ceux qui veulent savoir comme la barre fait pour s'ouvrir et se refermer, je vais juste donner quelques explications qui pourraient être utiles.

    • Dans le CSS du tableau "navbloc", nous avons l'attribut "top". Le "top" indique que le bloc de rechercher à -32px du haut de l'écran.
    • C'est sur cette variable qu'agit le javascript (que nous avons mis dans le template tout à l'heure).
    • Ce javascript reprend le même "top", mais en change la valeur pour "0px" lorsqu'on clique sur le bouton "ouvrir", ce qui redescend la navigation à 0px en haut de l'écran.
    • De façon semblable, lorsqu'on clique sur le bouton "fermer", cela change la valeur pour "-32px" et remet la navigation à -32px en haut de l'écran, ce qui la cache.
    • Du coup, si jamais vous souhaitez modifier les dimensions de la barre de navigation, il faudrait aller le modifier dans le CSS du tableau "navbloc" et aussi dans le javascript pour changer la valeur du "top".


    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 !


    Dernière édition par Onyx le Ven 30 Sep 2016 - 20:09, édité 4 fois
    FémininAge : 17Message(s) : 163

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Milou
    le Jeu 20 Nov 2014 - 17:44
    Merci Wink


    MasculinAge : 21Message(s) : 87
    Tyra'
    le Mer 26 Nov 2014 - 22:30
    Je kiff *-* Merci :)


    FémininAge : 22Message(s) : 810
    Loukoum
    le Jeu 27 Nov 2014 - 8:34
    Merci pour le partage!



    MasculinAge : 20Message(s) : 44

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Neiko Seiteki
    le Sam 29 Nov 2014 - 12:20
    Merci !
    MasculinAge : 22Message(s) : 23
    Noburnak
    le Sam 29 Nov 2014 - 20:01
    Merci /o/
    MasculinAge : 23Message(s) : 160
    Doctor Who
    le Ven 5 Déc 2014 - 14:45
    J'aime beaucoup le principe, merci ^^




    DOCTOR WHO ☼
    © Yamashita d'épicode
    FémininAge : 20Message(s) : 153

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    0smose
    le Sam 6 Déc 2014 - 11:53
    Je me jette à l'eau, je prend ! Very Happy

    Merci pour ce beau travail !




    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.
    FémininAge : 24Message(s) : 31
    Tsuki27
    le Lun 8 Déc 2014 - 7:39
    ty



    - Joueuse RP sur MMORPG -
    MasculinAge : 23Message(s) : 1097
    webs
    le Lun 8 Déc 2014 - 20:47
    merci


    FémininAge : 25Message(s) : 125
    Leelo
    le Mer 10 Déc 2014 - 17:00
    merci très jolie
    FémininAge : 55Message(s) : 56
    Toupimero
    le Jeu 11 Déc 2014 - 15:37
    J'essaye de faire en sorte de pouvoir fermer un bandeau vertical, j'espère que ça va pouvoir s'adapter à ce que je veux faire Very Happy
    Merci d'avance en tout cas, dans le cas où j'arrive à trifouiller ça ~ c:
    MasculinAge : 24Message(s) : 30
    Cleomede
    le Ven 12 Déc 2014 - 12:38
    très classe, et le style sobre s'adapte avec tout, merci du partage!
    FémininAge : 32Message(s) : 175
    Allison01
    le Dim 14 Déc 2014 - 13:19
    merci ^^
    Invité
    le Dim 14 Déc 2014 - 15:39
    Merci!
    FémininAge : 26Message(s) : 133
    Bunny Lune
    le Dim 14 Déc 2014 - 19:56
    Bonsoir,

    Merci beaucoup pour le partage
    FémininAge : 19Message(s) : 147
    Jacoon
    le Mar 16 Déc 2014 - 13:21
    je vais essayer ça, c'est bien pour ne pas encombrer la page d'accueil du forum ! :3
    MasculinAge : 32Message(s) : 27
    Niortais
    le Lun 22 Déc 2014 - 8:13
    merci
    FémininAge : 20Message(s) : 60
    Archeos
    le Lun 22 Déc 2014 - 16:47
    Codage fort sympas ! :)


    FémininAge : 24Message(s) : 46
    Evil Queen 4ever
    le Sam 10 Jan 2015 - 15:53
    super




    FémininAge : 18Message(s) : 41
    XaLis
    le Sam 10 Jan 2015 - 19:46
    merci **




    MasculinAge : 20Message(s) : 84
    Fayzl4D
    le Dim 11 Jan 2015 - 10:05
    merci
    FémininAge : 22Message(s) : 44
    L*
    le Dim 11 Jan 2015 - 16:51
    Merci beaucoup =)
    FémininAge : 20Message(s) : 10
    Lothegan
    le Dim 11 Jan 2015 - 21:02
    Merci beaucoup ! =D
    Invité
    le Jeu 15 Jan 2015 - 21:03
    Merci!
    FémininAge : 32Message(s) : 74
    Ouat
    le Sam 17 Jan 2015 - 10:12
    merci pour le travail !
    Contenu sponsorisé
    Aujourd'hui à 8:59

      La date/heure actuelle est Sam 1 Oct 2016 - 8:59