• Positions et opacités de la menubar

    Voici mes codes pour modifier l'opacité et la position.

    RAPPELS :
    - Vous pouvez cliquer sur TOUTES les images pour les voir en plus grand
    - Le code CSS est à placer ici :

    Installer une police et l'utiliser

              P O S I T I O N S          
    Vous avez sûrement remarqué que la menubar est en position "fixée", c'est à dire qu'elle reste fixée en haut et visible, même lorsqu'on scrolle. Et bien voici un code pour qu'elle reste en haut.

     #menubar{position:absolute;}

    position:absolute: cette propriété va permettre de détacher la menubar du corps de la page, et va donc permettre de la laisser en haut de la page.

              O P A C I T É          
    Vous avez peut être déjà vu sur certains blog que la menubar n’apparait que quand on met notre curseur à son emplacement. C'est grâce au code :
     

     #menubar{opacity:0;}
    #menubar:hover{opacity:1;}

    Le problème avec ce code, c'est que la menubar s'affiche directement. Pour mettre une petite transition, mettez plutôt ce code :
    #menubar{opacity:0; text-decoration: none;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;}
    #menubar:hover{opacity:1;}

     #menubar{opacity:0; text-decoration: none;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;}
    #menubar:hover{opacity:1;}

      opacity : c'est l'opacité. Forcément, si on la met au minimum, puis au maximum au survol, ça va créer cette effet.
    0.5 : c'est le temps de transition. Plus vous mettez une valeur élevée, plus la menubar mettra du temps à s'afficher.


    Sans transition | survolez >>
    Avec transition | survolez >>

    Si vous voulez en savoir plus sur la menubar et comment la modifier, cliquez ici.

     

    « Modifier la menubarModifier la scrollbar »

  • Commentaires

    1
    Dimanche 14 Mai à 15:31

    Merci pour ce code, ça faisait un moment que j'essayais de le coder mais en vain^^

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :