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






    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
    Venise
    Venise
    FémininAge : 36Messages : 270

    le Mar 11 Nov 2014 - 18:52

    j'aime ^^
    alex24d
    alex24d
    FémininAge : 31Messages : 95

    le Mar 11 Nov 2014 - 19:38

    merci
    Anonymous
    Invité

    le Sam 22 Nov 2014 - 18:42

    Hey !

    Super sympa (autant le fond que la forme, j'adore ta mise en page !) *-*
    Par contre il me semble que les préfixes ne sont plus nécessaires pour le "box-shadow" → www. Et un "-" manque au :

    Code:
    .nav_txt {
      [...]
      borderbottom: 1px solid #091016;


    Peux-tu corriger ? :3

    Merci beaucoup du partage Fangs Wink
    Fangs
    Fangs
    MasculinAge : 102Messages : 91

    le Lun 24 Nov 2014 - 12:01

    Salut ! Merci pour ta réponse, je commençais à désespérer ^^
    Alors voilà, je pense avoir tout corrigé, merci :)
    Anonymous
    Invité

    le Mar 25 Nov 2014 - 20:23

    Beuh actuellement je suis toute seule pour gérer les LS, et mes commandes en parallèle, donc je passe dans ce coin quand je peux hein xD
    Merci d'avoir arrangé Wink
    Fangs
    Fangs
    MasculinAge : 102Messages : 91

    le Mer 26 Nov 2014 - 20:15

    J'imagine bien ^^ Merci beaucoup :)
    Tyra'
    Tyra'
    MasculinAge : 24Messages : 87

    le Mer 26 Nov 2014 - 22:16

    Bravo! *-*



    Menu déroulant moderne (HTML & CSS3) Sans_t11
    FantastiQue
    FantastiQue
    MasculinAge : 18Messages : 4

    le Jeu 27 Nov 2014 - 20:40

    Très jolie !
    Kaamee
    Kaamee
    FémininAge : 23Messages : 110

    le Ven 28 Nov 2014 - 20:21

    Merci o/



    Neiko Seiteki
    Neiko Seiteki
    MasculinAge : 23Messages : 44

    le Sam 29 Nov 2014 - 12:17

    Merci :3
    Nanachu ♥
    Nanachu ♥
    FémininAge : 22Messages : 108

    le Ven 5 Déc 2014 - 16:26

    Ce code est génial, il va pouvoir guider mes membres et les aider à aller plus vite lorsqu'ils chercheront à accéder à un lieu. Merci beaucoup ♥
    0smose
    0smose
    FémininAge : 24Messages : 165

    le Ven 5 Déc 2014 - 17:40

    C'est génial ! J'adore l'écriture ! Merci énormément !



    Menu déroulant moderne (HTML & CSS3) Bannie10

    But I'm only human
    And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
    knives in my heart. You build me up and then I fall apart.
    'Cause I'm only human.
    avatar
    SinoJak
    MasculinAge : 18Messages : 44

    le Sam 6 Déc 2014 - 17:19

    Merci
    Xperience
    Xperience
    FémininAge : 23Messages : 156

    le Mar 9 Déc 2014 - 20:11

    Merci !



    Menu déroulant moderne (HTML & CSS3) 1453390429-tumblr-lv1fbrkxzh1qlnpia
    りん
    りん
    FémininAge : 27Messages : 73

    le Mer 10 Déc 2014 - 11:33

    Wow, cool ! Merci ! =)
    ~Nodoka~
    ~Nodoka~
    FémininAge : 22Messages : 185

    le Ven 12 Déc 2014 - 16:03

    Mercii
    Banpaia
    Banpaia
    FémininAge : 22Messages : 130

    le Ven 12 Déc 2014 - 21:40

    Merci !
    Rubis-Hope
    Rubis-Hope
    FémininAge : 26Messages : 46

    le Ven 12 Déc 2014 - 22:01

    C'est super !
    Merci !
    Immortal
    Immortal
    FémininAge : 33Messages : 631

    le Sam 13 Déc 2014 - 14:52

    Merci pour ce partage **




    Besoin d'avis pour un futur forum multi-univers.
    Promis je suis ouverte aux critiques comme aux solutions
    :love:
    CLICK
    Sorako
    Sorako
    FémininAge : 22Messages : 94

    le Dim 14 Déc 2014 - 11:59

    Merci !
    âme
    âme
    FémininAge : 54Messages : 154

    le Dim 14 Déc 2014 - 12:57

    Merci et bon dimanche :)



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    Kamora
    Kamora
    MasculinAge : 27Messages : 18

    le Lun 15 Déc 2014 - 18:46

    Merci beaucoup !
    Féhéla
    Féhéla
    FémininAge : 46Messages : 238

    le Lun 15 Déc 2014 - 22:58

    Wouha ! Très classe ! J'aime beaucoup :love:
    Jacoon
    Jacoon
    FémininAge : 23Messages : 147

    le Mar 16 Déc 2014 - 13:16

    merci, j'aime beaucoup ! ^^
    Contenu sponsorisé


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