HTML CSS와 자바스크립트를 사용하는 Navbar Drawer https://www.instagram.com/webstreet_code/
- Barbara Streisand원래의
- 2024-11-19 06:56:02900검색
인스타그램 팔로우: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
JavaScript css ajax html using pointer href display position overflow margin padding border viewport background transform transition flex ul li https
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.