AccueilFAQRechercherMembresGroupesS'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.


    Barre de navigation ouvrable

    Onyx
    Onyx
    FémininAge : 25Messages : 3289

    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.



    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 !


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


    Dernière édition par Onyx le Ven 22 Fév 2019 - 2:40, édité 11 fois
    Heine
    Heine
    MasculinAge : 24Messages : 169

    le Dim 18 Jan 2015 - 21:37

    Thanks you ! o/



    Barre de navigation ouvrable - Page 3 110407104459204818
    AlexTasie
    AlexTasie
    MasculinAge : 22Messages : 34

    le Sam 24 Jan 2015 - 18:29

    Merci à toi. (:
    Tyragrio
    Tyragrio
    MasculinAge : 38Messages : 15

    le Lun 26 Jan 2015 - 10:08

    Très jolie merci beaucoup
    avatar
    N3m0
    FémininAge : 27Messages : 303

    le Jeu 29 Jan 2015 - 10:34

    Merci
    Grande
    Grande
    FémininAge : 31Messages : 207

    le Jeu 29 Jan 2015 - 13:53

    Très Joli =D



    Barre de navigation ouvrable - Page 3 171074gwenj10
    Malf Claymore
    Malf Claymore
    FémininAge : 25Messages : 125

    le Sam 31 Jan 2015 - 18:48

    merci beaucoup
    Lestrange
    Lestrange
    FémininAge : 23Messages : 163

    le Ven 13 Fév 2015 - 17:23

    Super code °° Merci du partage et beau travail Very Happy
    Hana Evali
    Hana Evali
    FémininAge : 29Messages : 179

    le Dim 15 Fév 2015 - 11:20

    Chouette, merci !





    Je joue
    • ♚ Kili
    • ♚Ianto Jones
    • ♚ Thor Odinson
    • ♚ James T. Kirk
    J'anime
    • ♚ Les intrigues
    • ♚ Les soirées CB
    • ♚ Les événements
    • ♚ Le flood/les jeux


    Win
    Win
    Age : 27Messages : 114

    le Mar 17 Fév 2015 - 22:56

    thank you!



    Barre de navigation ouvrable - Page 3 Spiritxz4
    Pokahontas
    Pokahontas
    FémininAge : 22Messages : 28

    le Mer 18 Fév 2015 - 12:18

    Merci !
    Nîniel
    Nîniel
    FémininAge : 24Messages : 70

    le Mer 18 Fév 2015 - 14:57

    Merci beaucoup pour ce LS



    Barre de navigation ouvrable - Page 3 1384099300-nini-nu-signa
    Thalia Grace
    Thalia Grace
    FémininAge : 23Messages : 66

    le Jeu 19 Fév 2015 - 13:45

    Merci ! ♥
    JEG Elo
    JEG Elo
    FémininAge : 28Messages : 42

    le Lun 23 Fév 2015 - 17:51

    Merci beaucoup pour ton partage *-*
    MxPrime2
    MxPrime2
    MasculinAge : 25Messages : 81

    le Mar 24 Fév 2015 - 7:52

    C'est super !
    okeane
    okeane
    FémininAge : 29Messages : 93

    le Mar 24 Fév 2015 - 22:38

    merciiii
    Vee
    Vee
    FémininAge : 20Messages : 24

    le Jeu 26 Fév 2015 - 21:24

    merci Very Happy
    Anonymous
    Invité

    le Sam 28 Fév 2015 - 16:12

    merci !
    Maya Seiko
    Maya Seiko
    FémininAge : 26Messages : 126

    le Jeu 5 Mar 2015 - 15:05

    Merci ^^
    Madras
    Madras
    FémininAge : 34Messages : 281

    le Mer 8 Avr 2015 - 9:19

    Merci du partage
    avatar
    Valkoor
    MasculinAge : 22Messages : 34

    le Dim 12 Avr 2015 - 21:29

    thanks o/
    Kanra
    Kanra
    FémininAge : 18Messages : 113

    le Lun 13 Avr 2015 - 14:04

    Merci Very Happy
    servity
    servity
    MasculinAge : 47Messages : 82

    le Mar 21 Avr 2015 - 12:29

    merci



    Barre de navigation ouvrable - Page 3 HadqjCkktw
    Izaya Orihara
    Izaya Orihara
    FémininAge : 17Messages : 105

    le Mer 22 Avr 2015 - 14:43

    Merci du partage !
    Lekson
    Lekson
    MasculinAge : 19Messages : 15

    le Mer 22 Avr 2015 - 18:58

    Merci
    Célestine
    Célestine
    FémininAge : 21Messages : 51

    le Sam 25 Avr 2015 - 20:16

    Merci beaucoup !
    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Aoû 2019 - 20:43