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
    Sybline
    Sybline
    FémininAge : 33Messages : 22

    le Mer 10 Aoû 2016 - 19:22

    Merci pour le partage ^^
    LeMonarque
    LeMonarque
    MasculinAge : 33Messages : 26

    le Sam 13 Aoû 2016 - 12:21

    Merci
    LegendsOfToday
    LegendsOfToday
    FémininAge : 23Messages : 78

    le Ven 19 Aoû 2016 - 14:46

    Merci !
    charlint
    charlint
    FémininAge : 19Messages : 30

    le Lun 22 Aoû 2016 - 22:31

    mercii
    Yam'
    Yam'
    FémininAge : 25Messages : 75

    le Mer 24 Aoû 2016 - 4:40

    merci beaucouuup!
    cynical-echo
    cynical-echo
    FémininAge : 22Messages : 41

    le Sam 27 Aoû 2016 - 9:23

    Merci :)
    Suzanne Ady
    Suzanne Ady
    FémininAge : 25Messages : 75

    le Sam 27 Aoû 2016 - 10:03

    merci pour ce menu ¡!
    Scratpub
    Scratpub
    FémininAge : 33Messages : 91

    le Lun 29 Aoû 2016 - 12:13

    I love !
    Insane.
    Insane.
    FémininAge : 21Messages : 82

    le Mar 30 Aoû 2016 - 16:00

    Mercii !
    Lughnassadh
    Lughnassadh
    FémininAge : 28Messages : 23

    le Mer 7 Sep 2016 - 7:54

    Exactement ce dont j'avais besoin pour améliorer ma navbar, merci !
    avatar
    Drogba JR
    MasculinAge : 27Messages : 88

    le Mer 14 Sep 2016 - 17:33

    merci
    Aladiah
    Aladiah
    FémininAge : 22Messages : 58

    le Mer 14 Sep 2016 - 22:26

    j'adore merci
    Thanos
    Thanos
    MasculinAge : 23Messages : 84

    le Jeu 15 Sep 2016 - 1:07

    Merci
    Sestren
    Sestren
    FémininAge : 27Messages : 35

    le Ven 16 Sep 2016 - 18:27

    Thanks for all !
    Lilou O'Neill
    Lilou O'Neill
    FémininAge : 19Messages : 62

    le Ven 16 Sep 2016 - 21:08

    C'est génial ! Merci !
    The Mad Hatter
    The Mad Hatter
    MasculinAge : 25Messages : 38

    le Dim 18 Sep 2016 - 14:14

    Wouha!



    Le meilleur moyen de réaliser l’impossible est de croire que c’est possible.
    skyfighter
    skyfighter
    MasculinAge : 36Messages : 352

    le Ven 23 Sep 2016 - 16:23

    merci




    Menu déroulant moderne (HTML & CSS3) - Page 9 Signat10
    Praecursator
    Praecursator
    MasculinAge : 16Messages : 77

    le Ven 23 Sep 2016 - 17:32

    Super !
    Merci !
    Philo
    Philo
    FémininAge : 21Messages : 64

    le Mer 23 Nov 2016 - 21:24

    merci
    Suzanne Ady
    Suzanne Ady
    FémininAge : 25Messages : 75

    le Jeu 24 Nov 2016 - 12:24

    Pour le mettre en dessous de la barre de navigation du forum, il faut mettre le code HTML dans quel template ? Merci d'avance !
    PockyBanana
    PockyBanana
    FémininAge : 29Messages : 35

    le Dim 18 Déc 2016 - 21:35

    J'aime beaucoup ! Merci pour ce partage ! (:
    br6668lo
    br6668lo
    MasculinAge : 24Messages : 7

    le Ven 23 Déc 2016 - 14:31

    merci
    Jagan
    Jagan
    MasculinAge : 34Messages : 25

    le Dim 5 Fév 2017 - 14:07

    merci
    Saik
    Saik
    MasculinAge : 23Messages : 65

    le Mer 8 Mar 2017 - 20:40

    Thx :)
    Isyndra
    Isyndra
    FémininAge : 37Messages : 41

    le Mar 21 Mar 2017 - 21:02

    Merci beaucoup!
    Contenu sponsorisé


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