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
    Roitatan
    Roitatan
    MasculinAge : 20Messages : 50

    le Dim 21 Déc 2014 - 13:01

    Stylé !
    Ariane
    Ariane
    FémininAge : 26Messages : 13

    le Dim 21 Déc 2014 - 14:48

    Merci et très joli barre de navigation.
    Niortais
    Niortais
    MasculinAge : 34Messages : 27

    le Lun 22 Déc 2014 - 8:07

    Sympa merci
    FreeSpirit
    FreeSpirit
    MasculinAge : 23Messages : 167

    le Ven 26 Déc 2014 - 15:47

    merci
    Memorian
    Memorian
    FémininAge : 25Messages : 52

    le Lun 29 Déc 2014 - 2:23

    Merci! <3
    louha
    louha
    FémininAge : 31Messages : 213

    le Mar 30 Déc 2014 - 15:39

    merci
    Arc-En-Ciela
    Arc-En-Ciela
    FémininAge : 24Messages : 37

    le Mar 30 Déc 2014 - 18:33

    Merci ! Mon menu déroulant a soudainement cessé de fonctionner, et j'ai re-suivi le tutoriel principal de Forumactif, mais ça ne fonctionne toujours pas. J'espère que ce tutoriel-ci pourra m'aider :)
    Ryoma
    Ryoma
    MasculinAge : 31Messages : 420

    le Ven 2 Jan 2015 - 16:38

    Merci beaucoup, comme toujours !
    MxPrime2
    MxPrime2
    MasculinAge : 25Messages : 81

    le Mer 7 Jan 2015 - 12:06

    Ça me semble bien intéressant, je vais essayer ! Merci !
    avatar
    Blue
    MasculinAge : 22Messages : 36

    le Sam 10 Jan 2015 - 14:49

    Merci beaucoup ! Ce code me sera très utile !
    Mozart
    Mozart
    FémininAge : 24Messages : 52

    le Dim 11 Jan 2015 - 1:00

    Merci beaucoup pour ce partage !



    Menu déroulant moderne (HTML & CSS3) - Page 2 Tumblr_mjdkx9iT191r24z09o1_500
    Fayzl4D
    Fayzl4D
    MasculinAge : 23Messages : 84

    le Dim 11 Jan 2015 - 8:43

    merci beaucoup
    weysn
    weysn
    MasculinAge : 29Messages : 17

    le Mar 27 Jan 2015 - 13:23

    Merci !
    Malf Claymore
    Malf Claymore
    FémininAge : 25Messages : 125

    le Sam 31 Jan 2015 - 18:41

    merci c'est très sympathique
    blade li britannia
    blade li britannia
    MasculinAge : 27Messages : 90

    le Ven 6 Fév 2015 - 20:36

    merci



    Menu déroulant moderne (HTML & CSS3) - Page 2 Vpzr10
    GreenGage
    GreenGage
    FémininAge : 26Messages : 73

    le Sam 7 Fév 2015 - 8:25

    Merci beaucoup !
    Ananké
    Ananké
    FémininAge : 32Messages : 45

    le Mer 11 Fév 2015 - 3:02

    Merci pour ce tuto Wink
    Paradéo
    Paradéo
    FémininAge : 21Messages : 21

    le Mer 11 Fév 2015 - 17:01

    merciii ! *^*
    Bunny Lune
    Bunny Lune
    FémininAge : 29Messages : 145

    le Mar 17 Fév 2015 - 20:52

    Magnifique merci beaucoup pour le partage
    Zaidko
    Zaidko
    FémininAge : 16Messages : 81

    le Mar 17 Fév 2015 - 22:59

    Merci !
    Thalia Grace
    Thalia Grace
    FémininAge : 22Messages : 66

    le Mer 18 Fév 2015 - 13:27

    Merci beaucoup ! C'est vraiment superbe ! ♥
    Anonymous
    Invité

    le Dim 22 Fév 2015 - 10:29

    Merci :)
    Depp
    Depp
    FémininAge : 28Messages : 299

    le Lun 23 Fév 2015 - 16:49

    Merci :) je pense que ça va m'être utile :)



    Menu déroulant moderne (HTML & CSS3) - Page 2 Tumblr_nenygwIlcz1s4u464o1_500
    Maître Corbeau
    Maître Corbeau
    MasculinAge : 19Messages : 21

    le Jeu 26 Fév 2015 - 17:51

    Merciii ! ^^
    Vee
    Vee
    FémininAge : 20Messages : 24

    le Jeu 26 Fév 2015 - 20:10

    oh ♥
    Contenu sponsorisé


      La date/heure actuelle est Lun 19 Aoû 2019 - 4:01