Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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)

    Partagez
    MasculinAge : 99Message(s) : 91

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    2/10  (2/10)
    Fangs
    le Lun 10 Nov 2014 - 16: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 */
    Attention

    Vous devez poster à la suite pour voir les codes.

    Question ?

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

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



    Dernière édition par Fangs le Lun 24 Nov 2014 - 6:00, édité 1 fois
    MasculinAge : 17Message(s) : 44
    Ashtar
    le Jeu 11 Fév 2016 - 16:03
    Ca m'a l'air très beau, ça ! OwO

    Merci ! o/
    MasculinAge : 55Message(s) : 44
    Nardco
    le Sam 13 Fév 2016 - 8:23
    Merci l'ami ! très propre
    FémininAge : 53Message(s) : 232
    patriciadpt30
    le Sam 20 Fév 2016 - 16:12
    merci à vous Very Happy Very Happy


    Patricia :)
    FémininAge : 16Message(s) : 9
    Docteur Apple
    le Lun 22 Fév 2016 - 6:27
    Merci !!
    FémininAge : 19Message(s) : 144
    Whit
    le Lun 22 Fév 2016 - 15:47
    Merci ! <3
    FémininAge : 20Message(s) : 48
    Nunna
    le Lun 22 Fév 2016 - 17:17
    Merci ^_^
    FémininAge : 23Message(s) : 149
    Saya Shirayuki
    le Mar 23 Fév 2016 - 7:41
    Superbe !
    Merci beaucoup !
    FémininAge : 17Message(s) : 18
    Aylira
    le Ven 26 Fév 2016 - 15:47
    c'est parfait, merci :)
    FémininAge : 24Message(s) : 87
    Kamesora
    le Sam 27 Fév 2016 - 9:23
    Merci eaucoup
    FémininAge : 33Message(s) : 82
    Kitket
    le Sam 27 Fév 2016 - 12:13
    Merci *-*
    FémininAge : 21Message(s) : 12

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Trizomere
    le Dim 6 Mar 2016 - 18:42
    Merci beaucoup!
    FémininAge : 22Message(s) : 81
    Smikyou
    le Mer 9 Mar 2016 - 9:35
    ty
    FémininAge : 26Message(s) : 158
    Kimberlay *
    le Jeu 24 Mar 2016 - 12:38
    Merci
    MasculinAge : 17Message(s) : 47
    KTMiz
    le Sam 26 Mar 2016 - 19:41
    Merci


    FémininAge : 25Message(s) : 5
    kensha
    le Sam 26 Mar 2016 - 21:35
    merci
    FémininAge : 16Message(s) : 40
    Allya33
    le Lun 28 Mar 2016 - 13:53
    Merci!!!
    MasculinAge : 48Message(s) : 146
    Coco-Lapin02
    le Lun 4 Avr 2016 - 8:46
    Merci
    FémininAge : 19Message(s) : 23
    Ykhar
    le Mar 5 Avr 2016 - 17:45
    Merci ♥
    FémininAge : 20Message(s) : 38

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    beza
    le Sam 9 Avr 2016 - 13:18
    Merci!
    FémininAge : 25Message(s) : 305
    Eil'liathan Tyan'Lirulin
    le Mer 13 Avr 2016 - 14:49
    Pile ce qu'il me faut ! Merci ^^
    FémininAge : 20Message(s) : 150
    EAVENN
    le Lun 18 Avr 2016 - 15:06
    merci !
    FémininAge : 23Message(s) : 13
    SillyDoo
    le Dim 24 Avr 2016 - 13:34
    Thx (: !
    MasculinAge : 20Message(s) : 10
    Pechemelba
    le Mar 26 Avr 2016 - 10:34
    Merci du tuto :)
    MasculinAge : 19Message(s) : 22
    jeremy31
    le Ven 29 Avr 2016 - 9:10
    merci :)
    Message(s) : 3810

    Les Guildes
    Guilde des Conteurs:
    1/10  (1/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    9/10  (9/10)
    Nihil Scar Winspeare
    le Ven 29 Avr 2016 - 10:04
    Merci !



    Merci Maféliquement <3
    Viens faire un tour sur la chatbox Gérer les périodes de vacances sur son forum
    Présence fortement réduite :toto:
    Contenu sponsorisé
    Aujourd'hui à 18:00

      La date/heure actuelle est Ven 30 Sep 2016 - 18:00