AccueilRechercherS'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 : 102Messages : 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
    Valwen Dynn
    Valwen Dynn
    FémininAge : 28Messages : 8

    le Mar 3 Mai 2016 - 16:22

    Merci !
    -Resis
    -Resis
    MasculinAge : 23Messages : 25

    le Sam 7 Mai 2016 - 2:09

    Très bon travail merci pr le partage Very Happy !
    AdmireLeParadox
    AdmireLeParadox
    MasculinAge : 30Messages : 7

    le Sam 7 Mai 2016 - 13:44

    merci !!!
    avatar
    N3m0
    FémininAge : 27Messages : 303

    le Jeu 19 Mai 2016 - 0:29

    Merci !
    Mawie62
    Mawie62
    FémininAge : 24Messages : 125

    le Dim 22 Mai 2016 - 19:14

    Merci :)



    Menu déroulant moderne (HTML & CSS3) - Page 8 Signat10
    mon-etoile
    mon-etoile
    FémininAge : 31Messages : 140

    le Mar 24 Mai 2016 - 21:20

    Merci beaucoup
    Azalia
    Azalia
    FémininAge : 28Messages : 17

    le Dim 29 Mai 2016 - 15:47

    simple mais jolie et efficace



    la patience est une vertue
    Sighild
    Sighild
    FémininAge : 32Messages : 219

    le Mar 31 Mai 2016 - 19:11

    Je suis curieuse! merci pour le tuto
    Flavien1309
    Flavien1309
    MasculinAge : 26Messages : 39

    le Ven 3 Juin 2016 - 15:41

    merci Wink
    Chesham
    Chesham
    FémininAge : 20Messages : 45

    le Mar 14 Juin 2016 - 21:51

    J'adore, merci *-*
    Takasu-ryuji
    Takasu-ryuji
    MasculinAge : 27Messages : 23

    le Mer 15 Juin 2016 - 4:25

    merci
    Allan Oresh
    Allan Oresh
    MasculinAge : 43Messages : 34

    le Sam 18 Juin 2016 - 17:36

    Très original ! Merci !
    laurefrost
    laurefrost
    FémininAge : 22Messages : 4

    le Jeu 23 Juin 2016 - 17:11

    Hello ! J'aime beaucoup ce menu déroulant. Mais j'ai une petite question: est-ce que cela renmplace les onglets ? (vous savez c'est ce qui permet de rendre visible uniquement les catégories et lorsqu'on clic dessus les forums s'affichent ?)
    Car j'aimerais beaucoup mettre des onglets sur mon forum (car les catégories sont trop longues) donc voila !
    Si quelqu'un prend le temps de me répondre ça serait vachement gentil, merci ! ^^
    Et j'espère que vous m'avez comprise xD
    Aidden
    Aidden
    MasculinAge : 25Messages : 45

    le Mer 29 Juin 2016 - 4:00

    Superbe ! Merci !
    Nekrofyre
    Nekrofyre
    MasculinAge : 20Messages : 33

    le Jeu 30 Juin 2016 - 22:21

    Bon boulot !
    Yamashita
    Yamashita
    FémininAge : 21Messages : 50

    le Dim 3 Juil 2016 - 21:50

    Elle est trop jolie, merci *A*)/



    Anonymous
    Invité

    le Mar 5 Juil 2016 - 19:28

    Merci pour ce partage c:
    Asarigolo
    Asarigolo
    MasculinAge : 26Messages : 29

    le Lun 11 Juil 2016 - 3:52

    Merci.
    Aoi Kiseki
    Aoi Kiseki
    FémininAge : 27Messages : 105

    le Mar 12 Juil 2016 - 16:14

    merci !
    Géranium
    Géranium
    FémininAge : 19Messages : 56

    le Mer 13 Juil 2016 - 19:04

    Merci ! <3
    Azalia
    Azalia
    FémininAge : 28Messages : 17

    le Ven 22 Juil 2016 - 12:59

    merci pour ce partage



    la patience est une vertue
    Sokaro
    Sokaro
    FémininAge : 23Messages : 195

    le Ven 22 Juil 2016 - 22:58

    Merci du partage! *-*



    Menu déroulant moderne (HTML & CSS3) - Page 8 540068Sokacadre2
    (Signature provisoire.)
    naah
    naah
    MasculinAge : 25Messages : 80

    le Jeu 4 Aoû 2016 - 13:29

    magique
    Plyrica
    Plyrica
    MasculinAge : 26Messages : 7

    le Lun 8 Aoû 2016 - 6:16

    Sweet, merci :>
    Luunalight
    Luunalight
    FémininAge : 29Messages : 98

    le Lun 8 Aoû 2016 - 11:31

    Merci bcp!
    Contenu sponsorisé


      La date/heure actuelle est Ven 6 Déc 2019 - 9:51