• 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, c'est la position "absolute", qui en fait un élément à part.
    #menubar{position:absolute;}

              O P A C I T É          
    Vous avez peut être déjà vu sur certains blog que la menubar n'apparâit que quand on met notre curseur à son emplacement. Et bien c'est grâce au code qui met l'opacité à 0, puis à 1 au survol, avec ce code :
    #menubar{opacity:0;}
    #menubar:hover{opacity:1;}

    Le problème avec ce code, c'est qu'avec ce code, la menubar s'affiche directement. Pour mettre une petite transition, mettez 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;}

    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 :