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.


    Menu déroulant moderne (HTML & CSS3)

    Fangs
    Fangs
    MasculinAge : 101Messages : 91

    le Lun 10 Nov 2014 - 22:41

    Rappel du premier message :






    Menu déroulant moderne

    (HTML & CSS3)


    Bonjour à tous ! :gentleman:

    Alors, comme son nom l'indique, dans ce ls, je vais vous ai réalisé un petit menu déroulant très moderne pour vos forums et vos pages web. Il est uniquement fait à partir de HTML et de CSS3, la dernière version du CSS qui propose beaucoup de possibilités.

    Ce ls est donc divisé en deux parties:

    - Le codage HTML
    - Le codage CSS

    Sachez que ce menu déroulant, qui peut servir de barre de navigation, est totalement personnalisable ! Il suffit de changer les textes dans le HTML et de changer des paramètres dans le CSS, et pour les plus à l'aise en codage, modifier cette barre à l'infini et selon leurs envies !
    Attention
    Je vous rappelle que les codeurs qui créent les ls et les tutoriels font ça bénévolement, il est donc normal que nous attention un crédit de Never Utopia sur vos forums. Merci :toto:

    Assez parlé, passons aux choses sérieuses.

    Aperçu de la barre de navigation

    Aperçu
    Voici donc un petit aperçu de ce que cela donne:
    barre de navigation ; barre au survol

    Codage: HTML


    Voici donc le code que vous pouvez disposer où vous voulez: dans une page web, une template ou dans un message. (Si vous publiez ce code dans une template, n'oubliez pas de la publier par la suite).

    Code:

    <center>
            
       <div class="barre_nav">
                   
          <div class="nav_1">
                              
             <div class="nav_txt">
                        Titre 1<br /><br />       
             </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />     
          </div>
                   
          <div class="nav_2">
                              
             <div class="nav_txt">
                        Titre 2<br /><br />       
             </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />   
          </div>
                   
          <div class="nav_3">
                              
             <div class="nav_txt">
                        Titre 3<br /><br />       
             </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />
          </div>
                   
          <div class="nav_4">
                              
             <div class="nav_txt">
                        Titre 4<br /><br />       
             </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br /> 
          </div>
                   
          <div class="nav_5">
                              
             <div class="nav_txt">
                        Titre 5<br /><br />       
             </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />   
          </div>
               
       </div>
    </center>

    Codage: CSS


    Et voici donc le code CSS qui en découle ! :)

    Code:

    /* DEBUT BARRE DE NAVIGATION */
    .nav_txt {
      text-align: center;
      font-variant: small-caps;
      font-family: Gerogia;
      color: #e6e7e7;
      background: #091016;
      font-size: 20px;
      height: 25px;
      text-shadow:1px 1px 2px #000000;
      border-bottom: 1px solid #091016;
      box-shadow: 0px 0px 3px #000000;
    }
    .barre_nav a{
      text-align: center;
      font-variant: small-caps;
      font-family: Gerogia;
      color: #e6e7e7;
      font-size: 15px;
      margin-left: 5px;
      text-decoration: none !important;
      -moz-transition:  0.2s all;
      -webkit-transition:  0.2s all;
      -o-transition:  0.2s all;
      -ms-transition:  0.2s all;
      -khtml-transition:  0.2s all;
      transition:  0.2s all;
    }
    .barre_nav a:hover {
      text-decoration: none !important;
      letter-spacing: 2px;
      -moz-transition:  0.2s all;
      -webkit-transition:  0.2s all;
      -o-transition:  0.2s all;
      -ms-transition:  0.2s all;
      -khtml-transition:    0.2s all;
      transition:    0.2s all;
    }
    .barre_nav {
      width:960px; /* à adapter selon la largeur de votre forum */
      height:175px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      top: 100px; /* à adapter selon les éléments présents au dessus de votre barre */
      overflow: hidden;
      z-index: 10;
      border-top: 1px solid #e6e7e7;
    }
    .nav_1 {
      width:190px;
      height:25px;
      background: #080e13;
      float: left;
      border: 1px solid #091016;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
      overflow: hidden;
    }
    .nav_2 {
      width:190px;
      height:25px; 
      background: #080e13; 
      float: left;
      border: 1px solid #091016;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
      overflow: hidden;
    }
    .nav_3 {
      width:190px;
      height:25px;
      background: #080e13; 
      float: left;
      border: 1px solid #091016;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
      overflow: hidden;
    }
    .nav_4 {
      width:190px;
      height:25px;
      background: #080e13;
      float: left;
      border: 1px solid #091016;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
      overflow: hidden;
    }
    .nav_5 {
      width:190px;
      height:25px; 
      background: #080e13;
      float: left;
      border: 1px solid #091016;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
      overflow: hidden;
    }
    .nav_1:hover {
      width:190px;
      height:125px;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
    }
    .nav_2:hover {
      width:190px;
      height:125px; 
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
    }
    .nav_3:hover {
      width:190px;
      height:140px;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
    }
    .nav_4:hover {
      width:190px;
      height:125px;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
    }
    .nav_5:hover {
      width:190px;
      height:125px; 
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
    }

    /* FIN BARRE DE NAVIGATION */

    Question ?

    Si vous avez une question, je vous rappelle que cette section est disponible !

    Voilà, voilà, je vous remercie. :)


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



    Dernière édition par Fangs le Lun 24 Nov 2014 - 12:00, édité 1 fois
    dardar
    dardar
    FémininAge : 27Messages : 10

    le Sam 5 Sep 2015 - 18:09

    Woah! Merci!
    LittleChan
    LittleChan
    FémininAge : 28Messages : 60

    le Dim 6 Sep 2015 - 15:36

    Thanks, c'est tout à fait ce que je cherchais Wink



    Menu déroulant moderne (HTML & CSS3) - Page 5 34ex18y
    Zealanders
    Zealanders
    MasculinAge : 23Messages : 42

    le Ven 18 Sep 2015 - 14:19

    ^^ sympa
    Cruelly
    Cruelly
    FémininAge : 26Messages : 2592

    le Dim 27 Sep 2015 - 22:43

    Superbe merci beaucoup :)



    :heart: :heart:
    Anonymous
    Invité

    le Mar 29 Sep 2015 - 10:10

    Très sympa, je regarde, merci :)
    lulu-lorry
    lulu-lorry
    MasculinAge : 51Messages : 48

    le Ven 2 Oct 2015 - 12:09

    Grand merci pour ce tuto, belle journée à toi

    :friends:
    ClaryF
    ClaryF
    FémininAge : 29Messages : 137

    le Dim 4 Oct 2015 - 11:48

    Merci !
    avatar
    Angel Tiger
    MasculinAge : 18Messages : 76

    le Jeu 8 Oct 2015 - 19:51

    merci
    MsCrazy.E
    MsCrazy.E
    FémininAge : 22Messages : 183

    le Dim 11 Oct 2015 - 16:09

    Merci !



    Menu déroulant moderne (HTML & CSS3) - Page 5 Nu_a_b10
    Tria
    Tria
    FémininAge : 22Messages : 127

    le Dim 11 Oct 2015 - 16:23

    Merci :3



    "Tomber est permis, se relever est ordonné."
    Menu déroulant moderne (HTML & CSS3) - Page 5 Hv62
    ShiShiGfx
    ShiShiGfx
    MasculinAge : 25Messages : 69

    le Lun 12 Oct 2015 - 17:30

    merci ! Very Happy



    Menu déroulant moderne (HTML & CSS3) - Page 5 Shishi_v2_by_invisibolt-d5xwmdx
    Mello
    Mello
    FémininAge : 22Messages : 52

    le Mar 13 Oct 2015 - 6:50

    Merci!
    Saia
    Saia
    FémininAge : 24Messages : 195

    le Mar 13 Oct 2015 - 9:35

    Merci!!!



    Menu déroulant moderne (HTML & CSS3) - Page 5 Finit10
    Akiro
    Akiro
    FémininAge : 26Messages : 55

    le Dim 18 Oct 2015 - 17:21

    Merci beaucoup! Exactement ce que je cherchais Razz
    Tristelune
    Tristelune
    FémininAge : 28Messages : 15

    le Mar 20 Oct 2015 - 0:49

    Merci pour le codage (:
    Blazeca
    Blazeca
    FémininAge : 19Messages : 30

    le Lun 26 Oct 2015 - 19:22

    merci !
    Fallen Swallow
    Fallen Swallow
    FémininAge : 27Messages : 46

    le Mer 28 Oct 2015 - 10:51

    Merci beaucoup ♥
    Pythia
    Pythia
    FémininAge : 30Messages : 182

    le Dim 1 Nov 2015 - 17:42

    Merci du partage :)



    Menu déroulant moderne (HTML & CSS3) - Page 5 Neo10
    Rizhskaya.
    Rizhskaya.
    MasculinAge : 26Messages : 42

    le Dim 1 Nov 2015 - 19:00

    Code vraiment pratique, merci pour le partage. :)
    Nileeda
    Nileeda
    FémininAge : 23Messages : 42

    le Jeu 5 Nov 2015 - 14:47

    Merci ! :)
    WILDMOON.
    WILDMOON.
    FémininAge : 21Messages : 33

    le Sam 7 Nov 2015 - 19:16

    Merci!
    Chlirr
    Chlirr
    FémininAge : 30Messages : 63

    le Ven 20 Nov 2015 - 21:31

    Salut et Merci
    Sweet Angel
    Sweet Angel
    FémininAge : 36Messages : 152

    le Dim 29 Nov 2015 - 11:21

    Ca m'a l'air bien intéressant, merci
    Kynoha
    Kynoha
    MasculinAge : 22Messages : 35

    le Mer 9 Déc 2015 - 16:48

    Épurer, jolie police, merci !
    suley
    suley
    MasculinAge : 22Messages : 13

    le Jeu 10 Déc 2015 - 15:12

    Merci mais comment on fait pour mettre les liens ?
    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Aoû 2019 - 19:59