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 - 22:41
    Rappel du premier message :




    Menu déroulant moderne

    (HTML & CSS3)

    TAGS
    Langage : #css #css3 #html
    Éléments : #navigation
    Contenu : #effet_hover
    Auteur : #auteur_Fangs
    Version : #toutes_les_versions


    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 - 12:00, édité 1 fois
    FémininAge : 24Message(s) : 9
    dardar
    le Sam 5 Sep 2015 - 18:09
    Woah! Merci!
    FémininAge : 25Message(s) : 58

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    LittleChan
    le Dim 6 Sep 2015 - 15:36
    Thanks, c'est tout à fait ce que je cherchais Wink


    MasculinAge : 20Message(s) : 40
    Zealanders
    le Ven 18 Sep 2015 - 14:19
    ^^ sympa
    FémininAge : 23Message(s) : 2327

    Les Guildes
    Guilde des Conteurs:
    5/10  (5/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    2/10  (2/10)
    Cruelly
    le Dim 27 Sep 2015 - 22:43
    Superbe merci beaucoup :)


    Absente pour une durée indéterminée.
    Invité
    le Mar 29 Sep 2015 - 10:10
    Très sympa, je regarde, merci :)
    MasculinAge : 48Message(s) : 48
    lulu-lorry
    le Ven 2 Oct 2015 - 12:09
    Grand merci pour ce tuto, belle journée à toi

    :friends:
    FémininAge : 26Message(s) : 133
    ClaryF
    le Dim 4 Oct 2015 - 11:48
    Merci !
    MasculinAge : 15Message(s) : 76
    Angel Tiger
    le Jeu 8 Oct 2015 - 19:51
    merci
    FémininAge : 19Message(s) : 181
    MsCrazy.E
    le Dim 11 Oct 2015 - 16:09
    Merci !


    FémininAge : 19Message(s) : 114
    Tria
    le Dim 11 Oct 2015 - 16:23
    Merci :3


    "Tomber est permis, se relever est ordonné."
    MasculinAge : 22Message(s) : 69
    ShiShiGfx
    le Lun 12 Oct 2015 - 17:30
    merci ! Very Happy


    FémininAge : 19Message(s) : 47
    Mello
    le Mar 13 Oct 2015 - 6:50
    Merci!
    FémininAge : 21Message(s) : 180
    Saia
    le Mar 13 Oct 2015 - 9:35
    Merci!!!


    FémininAge : 23Message(s) : 53
    Akiro
    le Dim 18 Oct 2015 - 17:21
    Merci beaucoup! Exactement ce que je cherchais Razz
    FémininAge : 25Message(s) : 15
    Tristelune
    le Mar 20 Oct 2015 - 0:49
    Merci pour le codage (:
    FémininAge : 16Message(s) : 30
    Blazeca
    le Lun 26 Oct 2015 - 19:22
    merci !
    FémininAge : 24Message(s) : 45
    Fallen Swallow
    le Mer 28 Oct 2015 - 10:51
    Merci beaucoup ♥
    FémininAge : 28Message(s) : 165

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Pythia
    le Dim 1 Nov 2015 - 17:42
    Merci du partage :)


    MasculinAge : 23Message(s) : 42

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Rizhskaya.
    le Dim 1 Nov 2015 - 19:00
    Code vraiment pratique, merci pour le partage. :)
    FémininAge : 20Message(s) : 41
    Nileeda
    le Jeu 5 Nov 2015 - 14:47
    Merci ! :)
    FémininAge : 18Message(s) : 18
    WILDMOON.
    le Sam 7 Nov 2015 - 19:16
    Merci!
    FémininAge : 27Message(s) : 63
    Chlirr
    le Ven 20 Nov 2015 - 21:31
    Salut et Merci
    FémininAge : 33Message(s) : 125
    Sweet Angel
    le Dim 29 Nov 2015 - 11:21
    Ca m'a l'air bien intéressant, merci
    MasculinAge : 19Message(s) : 35
    Kynoha
    le Mer 9 Déc 2015 - 16:48
    Épurer, jolie police, merci !
    MasculinAge : 19Message(s) : 13
    suley
    le Jeu 10 Déc 2015 - 15:12
    Merci mais comment on fait pour mettre les liens ?
    Contenu sponsorisé
    Aujourd'hui à 13:44

      La date/heure actuelle est Ven 30 Sep 2016 - 13:44