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
    Sneakazuha
    Sneakazuha
    FémininAge : 23Messages : 34

    le Ven 29 Mai 2015 - 21:07

    Merci beaucoup pour cette belle navigation !
    Chanira
    Chanira
    FémininAge : 21Messages : 18

    le Mer 3 Juin 2015 - 16:38

    Très pratique, merci beaucoup !
    MajorNeuf
    MajorNeuf
    MasculinAge : 23Messages : 19

    le Ven 5 Juin 2015 - 14:04

    Merci
    Lekson
    Lekson
    MasculinAge : 19Messages : 15

    le Dim 7 Juin 2015 - 11:15

    merci
    Youp
    Youp
    FémininAge : 24Messages : 579

    le Mer 17 Juin 2015 - 22:09

    Merci beaucoup ^^J'ai un problème avec mon code, je pense que le tien peut m'aider à voir plus clair Razz



    Menu déroulant moderne (HTML & CSS3) - Page 4 262632clip20160315at092522
    Zephyr Du Moulin
    Zephyr Du Moulin
    MasculinAge : 22Messages : 19

    le Jeu 18 Juin 2015 - 16:26

    Merci !
    The One Pandemonium
    The One Pandemonium
    FémininAge : 26Messages : 97

    le Mar 23 Juin 2015 - 16:40

    Merciii!



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    Menu déroulant moderne (HTML & CSS3) - Page 4 1416253868-ladycrowcoupe
    helenecolin
    helenecolin
    FémininAge : 29Messages : 21

    le Mer 24 Juin 2015 - 15:34

    intéressant comme tuto, merci !



    Menu déroulant moderne (HTML & CSS3) - Page 4 ParadesEnd1
    Atomixy
    Atomixy
    MasculinAge : 23Messages : 28

    le Ven 3 Juil 2015 - 22:21

    SUperbe ♥
    Mini007
    Mini007
    MasculinAge : 25Messages : 21

    le Sam 4 Juil 2015 - 10:40

    merci!
    Adrosh
    Adrosh
    MasculinAge : 18Messages : 17

    le Mer 8 Juil 2015 - 15:10

    Merci
    Anselm
    Anselm
    MasculinAge : 28Messages : 151

    le Mer 8 Juil 2015 - 15:29

    Merci ! :)
    Neffaly
    Neffaly
    MasculinAge : 24Messages : 47

    le Ven 17 Juil 2015 - 3:29

    mrc
    Yovoed
    Yovoed
    FémininAge : 19Messages : 60

    le Lun 20 Juil 2015 - 20:35

    Merci beaucoup !
    Akina-chan
    Akina-chan
    FémininAge : 25Messages : 139

    le Mer 22 Juil 2015 - 18:51

    Merci <3
    younessdu91
    younessdu91
    MasculinAge : 21Messages : 96

    le Jeu 23 Juil 2015 - 20:54

    Merci !
    PuLs!oN
    PuLs!oN
    MasculinAge : 23Messages : 228

    le Ven 24 Juil 2015 - 13:59

    Merci beaucoup c'est très utile !
    Antithée
    Antithée
    FémininAge : 22Messages : 69

    le Mar 28 Juil 2015 - 16:04

    Très sympa !
    Ju' de fruits
    Ju' de fruits
    FémininAge : 26Messages : 82

    le Mar 11 Aoû 2015 - 17:45

    Merci du partage ! **



    Kelalin
    Kelalin
    FémininAge : 26Messages : 2075

    le Mar 11 Aoû 2015 - 19:43

    Merci ! O(≧▽≦)O
    Sadja
    Sadja
    MasculinAge : 21Messages : 77

    le Mar 18 Aoû 2015 - 13:56

    génial merci ! :)
    Meiywa
    Meiywa
    FémininAge : 28Messages : 79

    le Ven 28 Aoû 2015 - 22:49

    Merci pour le tutoriel Very Happy
    lonely10th
    lonely10th
    FémininAge : 32Messages : 15

    le Mer 2 Sep 2015 - 10:55

    Merci! :love:



    hurudy
    hurudy
    MasculinAge : 38Messages : 40

    le Mer 2 Sep 2015 - 23:10

    merci !
    SpaceSapien
    SpaceSapien
    MasculinAge : 28Messages : 15

    le Sam 5 Sep 2015 - 14:41

    Magnifique :3 Merci pour ce partage :)
    Contenu sponsorisé


      La date/heure actuelle est Lun 19 Aoû 2019 - 4:29