HTML CSS와 자바스크립트를 사용하는 Navbar Drawer https://www.instagram.com/webstreet

HTML CSS와 자바스크립트를 사용하는 Navbar Drawer https://www.instagram.com/webstreet_code/

Barbara Streisand

풀어 주다： 2024-11-19 06:56:02

원래의

896명이 탐색했습니다.

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

인스타그램 팔로우: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <메타 이름="뷰포트" content="너비=
    , 초기 규모=1.0">
    <title>서랍</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <스타일>

    *{
        여백: 0;
        패딩: 0;
        상자 크기 조정: 테두리 상자;
        글꼴 계열: 'Poppins',sans-serif;
    }

    몸 {
            배경색: #141625;
            디스플레이: 플렉스;
            항목 정렬: 중앙;
            내용 정당화: flex-start;
            높이: 100vh;
            오버플로: 숨김;
        }
        .햄버거{
            위치: 절대;
            상단: 20px;
            왼쪽: 18px;
            커서: 포인터;
            Z-지수: 10;
        }

        .햄버거 .line{
            너비: 35px;
            높이: 4px;
            배경색: #f0a500;
            여백:6px 0;
            테두리 반경: 2px;
            전환: 모두 0.4초 용이성;
        }

        .메뉴바 {
            위치: 고정;
            상단: 0;
            왼쪽: 0;
            너비: 80px;
            높이: 100%;
            배경색: #1f2235;
            상자 그림자: 2px 0 15px rgba(0, 0, 0, 0.6);
            오버플로: 숨김;
            전환: 너비 0.4초 용이성;

        }

        .menu-bar.open {
            너비: 220px;
        }

        .menu-bar ul {
            목록 스타일: 없음;
            패딩: 80px 10px;
        }
        .menu-bar ul li {
            디스플레이: 플렉스;
            항목 정렬: 중앙;
            패딩: 15px;
            색상: #b2becd;
            커서: 포인터;
            전환: 배경색 0.3초 용이함;
            테두리 왼쪽: 4px 투명 투명;
        }

        .menu-bar ul li i {
            글꼴 크기: 24px;
            오른쪽 여백: 20px;
            전환: 0.3초 용이성을 변환합니다.
        }
        .menu-bar ul li 스팬 {
            불투명도: 0;
            글꼴 크기: 16px;
            전환: 불투명도 0.4초 용이성;
            공백: nowrap;
        }

        .menu-bar.open ul li 스팬 {
            불투명도: 1;
        }

        .menu-bar ul li:hover {
            배경색: #282a40;
            상자 그림자: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .menu-bar ul li:hover i {
            변환: scale(1.2);
        }

        .menu-bar ul li.active {
            배경색: #f0a500;
            테두리 반경: 20px;
            색상: #1f2235;
            테두리 왼쪽: 4px 단색 #f0a500;
        }

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

        .menu-bar ul li.active 스팬 {
            색상: #1f2235;
        }

















   </스타일>
</머리>
<본문>
    <div>

로그인 후 복사

위 내용은 HTML CSS와 자바스크립트를 사용하는 Navbar Drawer https://www.instagram.com/webstreet_code/의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!