AccueilDernières imagesRechercherS'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.

-20%
Le deal à ne pas rater :
Pack Gigabyte Ecran PC Gamer 27″ LED M27Q (rev2.0) + Radeon RX 6950 ...
749 € 939 €
Voir le deal

    Menu déroulant moderne (HTML & CSS3)

    Fangs
    Fangs
    MasculinAge : 106Messages : 91

    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
    okeane
    okeane
    FémininAge : 33Messages : 93

    Jeu 26 Fév 2015 - 21:06

    Merci =)
    Stitch56
    Stitch56
    FémininAge : 30Messages : 209

    Ven 27 Fév 2015 - 12:54

    Merci ! c'est pas mal du tout **
    Drizzle
    Drizzle
    FémininAge : 25Messages : 135

    Ven 27 Fév 2015 - 19:45

    Merci ^^.



    Menu déroulant moderne (HTML & CSS3) - Page 3 800961Drizzle
    Susan Storm
    Susan Storm
    FémininAge : 44Messages : 78

    Ven 6 Mar 2015 - 18:15

    Merciii !
    Madras
    Madras
    FémininAge : 39Messages : 285

    Sam 7 Mar 2015 - 5:42

    Merci
    Redingdom
    Redingdom
    FémininAge : 23Messages : 50

    Sam 14 Mar 2015 - 15:35

    C'est super, merci du partage
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Sam 14 Mar 2015 - 21:33

    merci <3



    Menu déroulant moderne (HTML & CSS3) - Page 3 Sans_t14
    Patdrue
    Patdrue
    FémininAge : 34Messages : 158

    Mar 17 Mar 2015 - 10:04

    oy oy oy! merci beaucoup, c'est vraiment génial! *in love*
    Satyrix
    Satyrix
    MasculinAge : 26Messages : 18

    Dim 22 Mar 2015 - 13:11

    merci
    ZakenX
    ZakenX
    MasculinAge : 30Messages : 14

    Jeu 9 Avr 2015 - 21:48

    Merci
    Kirito
    Kirito
    MasculinAge : 28Messages : 209

    Lun 20 Avr 2015 - 13:10

    Merci
    sandcreations
    sandcreations
    FémininAge : 52Messages : 20

    Mer 22 Avr 2015 - 7:59

    merci
    Samiki
    Samiki
    FémininAge : 25Messages : 84

    Lun 27 Avr 2015 - 13:29

    merci



    Menu déroulant moderne (HTML & CSS3) - Page 3 Lbxa
    Dakeris RPG ♦ Un monde nouveau régi par la peur
    Le forum ouvre ses portes, nous vous attendons nombreux !

    DtwizzY
    DtwizzY
    MasculinAge : 36Messages : 10

    Jeu 30 Avr 2015 - 2:07

    Je vais tester... merci
    Hylia
    Hylia
    FémininAge : 23Messages : 100

    Jeu 30 Avr 2015 - 16:39

    Merci!



    Menu déroulant moderne (HTML & CSS3) - Page 3 _hylia10
    avatar
    Lupa
    FémininAge : 27Messages : 183

    Mer 6 Mai 2015 - 14:03

    Merci beaucoup *O* c'est superbe !



    To die would be an awfully big adventure... ~ Peter Pan, James M. Berrie.
    Fayzl4D
    Fayzl4D
    MasculinAge : 27Messages : 84

    Sam 9 Mai 2015 - 7:37

    merci
    Parka
    Parka
    MasculinAge : 44Messages : 100

    Dim 10 Mai 2015 - 0:33

    Merci !
    Miku
    Miku
    MasculinAge : 31Messages : 70

    Dim 10 Mai 2015 - 15:34

    Merci !
    Elektra Kloo
    Elektra Kloo
    FémininAge : 35Messages : 156

    Ven 15 Mai 2015 - 22:26

    Merci
    louha
    louha
    FémininAge : 36Messages : 219

    Jeu 21 Mai 2015 - 22:19

    merci!
    Chocolakato
    Chocolakato
    FémininAge : 33Messages : 837

    Sam 23 Mai 2015 - 22:40

    Merci :)



    Imari
    Imari
    FémininAge : 40Messages : 68

    Mar 26 Mai 2015 - 17:52

    Merci bien ^^



    Menu déroulant moderne (HTML & CSS3) - Page 3 2mzbax4
    ginl
    ginl
    FémininAge : 36Messages : 88

    Jeu 28 Mai 2015 - 12:11

    merci :)



    Menu déroulant moderne (HTML & CSS3) - Page 3 Mjsear10
    Menu déroulant moderne (HTML & CSS3) - Page 3 Galeri10
    avatar
    Nal Souclade
    MasculinAge : 25Messages : 167

    Ven 29 Mai 2015 - 18:49

    Génial ! Merci beaucoup pour le partage !
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 0:56