recherche

Maison >interface Web >js tutoriel >Navbar Drawer utilisant HTML CSS et Javascript https://www.instagram.com/webstreet_code/

Navbar Drawer utilisant HTML CSS et Javascript https://www.instagram.com/webstreet_code/

Barbara Streisand
Barbara Streisandoriginal
2024-11-19 06:56:02900parcourir

Navbar Drawer using html css and javascript https://www.instagram.com/webstreet_code/

Suivez-nous sur Instagram : https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="fr">
<tête>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , échelle initiale=1,0">
    <titre>Tiroir</titre>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <style>

    *{
        marge : 0 ;
        remplissage : 0 ;
        dimensionnement de la boîte : bordure-boîte ;
        famille de polices : 'Poppins', sans-serif ;
    }

    corps {
            couleur d'arrière-plan : #141625 ;
            affichage : flexible ;
            align-items : centre ;
            justifier-contenu : flex-start ;
            hauteur : 100vh ;
            débordement : caché ;
        }
        .hamburger{
            position : absolue ;
            haut : 20 px ;
            gauche : 18px ;
            curseur : pointeur ;
            indice z : 10 ;
        }

        .hamburger .line{
            largeur : 35 px ;
            hauteur : 4px ;
            couleur d'arrière-plan : #f0a500 ;
            marge : 6px 0 ;
            rayon de bordure : 2 px ;
            transition : toutes les 0,4 s sont faciles ;
        }

        .barre de menu {
            poste : fixe ;
            haut : 0 ;
            gauche : 0 ;
            largeur : 80 px ;
            hauteur : 100 % ;
            couleur d'arrière-plan : #1f2235 ;
            box-shadow : 2px 0 15px rgba(0, 0, 0, 0.6);
            débordement : caché ;
            transition : largeur 0,4 s facilité ;

        }

        .menu-bar.open {
            largeur : 220 px ;
        }

        .menu-bar ul {
            style de liste : aucun ;
            remplissage : 80px 10px ;
        }
        .menu-bar ul li {
            affichage : flexible ;
            align-items : centre ;
            remplissage : 15 px ;
            couleur : #b2becd ;
            curseur : pointeur ;
            transition : facilité de couleur d'arrière-plan de 0,3 s ;
            bordure gauche : 4 px solide transparent ;
        }

        .menu-bar ul li i {
            taille de police : 24 px ;
            marge droite : 20 px ;
            transition : transformation facile en 0,3 s ;
        }
        .menu-bar ul li span {
            opacité : 0 ;
            taille de police : 16 px ;
            transition : opacité 0,4s facilité ;
            espace blanc : nowrap ;
        }

        .menu-bar.open ul li span {
            opacité : 1 ;
        }

        .menu-bar ul li:hover {
            couleur d'arrière-plan : #282a40 ;
            box-shadow : 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .menu-bar ul li:survoler i {
            transformation : échelle (1.2);
        }

        .menu-bar ul li.active {
            couleur d'arrière-plan : #f0a500 ;
            rayon de bordure : 20 px ;
            couleur : #1f2235 ;
            bordure gauche : 4px solide #f0a500 ;
        }

        .menu-bar ul li.active i {
            couleur : #1f2235 ;
        }

        .menu-bar ul li.active span {
            couleur : #1f2235 ;
        }

















   </style>
&Lt;/tête>
<corps>
    <div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css ajax html using pointer href display position overflow margin padding border viewport background transform transition flex ul li https
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment rediriger les utilisateurs vers une autre page à l’aide de JavaScript ?Article suivant：Comment rediriger les utilisateurs vers une autre page à l’aide de JavaScript ?

Articles Liés

Voir plus