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
    Ashtar
    Ashtar
    MasculinAge : 20Messages : 44

    le Jeu 11 Fév 2016 - 22:03

    Ca m'a l'air très beau, ça ! OwO

    Merci ! o/
    avatar
    Nardco
    MasculinAge : 58Messages : 82

    le Sam 13 Fév 2016 - 14:23

    Merci l'ami ! très propre
    patriciadpt30
    patriciadpt30
    FémininAge : 56Messages : 240

    le Sam 20 Fév 2016 - 22:12

    merci à vous Very Happy Very Happy



    Patricia :)
    Docteur Apple
    Docteur Apple
    FémininAge : 19Messages : 9

    le Lun 22 Fév 2016 - 12:27

    Merci !!
    Whit
    Whit
    FémininAge : 21Messages : 154

    le Lun 22 Fév 2016 - 21:47

    Merci ! <3
    Nunna
    Nunna
    FémininAge : 22Messages : 48

    le Lun 22 Fév 2016 - 23:17

    Merci ^_^
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 26Messages : 153

    le Mar 23 Fév 2016 - 13:41

    Superbe !
    Merci beaucoup !
    Aylira
    Aylira
    FémininAge : 20Messages : 21

    le Ven 26 Fév 2016 - 21:47

    c'est parfait, merci :)
    Kamesora
    Kamesora
    FémininAge : 27Messages : 90

    le Sam 27 Fév 2016 - 15:23

    Merci eaucoup
    Kitket
    Kitket
    FémininAge : 36Messages : 105

    le Sam 27 Fév 2016 - 18:13

    Merci *-*
    Trizomere
    Trizomere
    FémininAge : 24Messages : 12

    le Lun 7 Mar 2016 - 0:42

    Merci beaucoup!
    Smikyou
    Smikyou
    FémininAge : 25Messages : 85

    le Mer 9 Mar 2016 - 15:35

    ty
    Kimberlay *
    Kimberlay *
    FémininAge : 29Messages : 161

    le Jeu 24 Mar 2016 - 17:38

    Merci
    KTMiz
    KTMiz
    MasculinAge : 20Messages : 47

    le Dim 27 Mar 2016 - 0:41

    Merci



    Menu déroulant moderne (HTML & CSS3) - Page 7 Kjod95_sick_religion
    kensha
    kensha
    FémininAge : 28Messages : 6

    le Dim 27 Mar 2016 - 3:35

    merci
    Allya33
    Allya33
    FémininAge : 18Messages : 41

    le Lun 28 Mar 2016 - 19:53

    Merci!!!
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 51Messages : 167

    le Lun 4 Avr 2016 - 14:46

    Merci
    Ykhar
    Ykhar
    FémininAge : 22Messages : 23

    le Mar 5 Avr 2016 - 23:45

    Merci ♥
    beza
    beza
    FémininAge : 23Messages : 47

    le Sam 9 Avr 2016 - 19:18

    Merci!
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 28Messages : 315

    le Mer 13 Avr 2016 - 20:49

    Pile ce qu'il me faut ! Merci ^^
    EAVENN
    EAVENN
    FémininAge : 23Messages : 162

    le Lun 18 Avr 2016 - 21:06

    merci !
    SillyDoo
    SillyDoo
    FémininAge : 26Messages : 13

    le Dim 24 Avr 2016 - 19:34

    Thx (: !
    Pechemelba
    Pechemelba
    MasculinAge : 23Messages : 10

    le Mar 26 Avr 2016 - 16:34

    Merci du tuto :)
    jeremy31
    jeremy31
    MasculinAge : 22Messages : 22

    le Ven 29 Avr 2016 - 15:10

    merci :)
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5106

    le Ven 29 Avr 2016 - 16:04

    Merci !



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    Contenu sponsorisé


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