테스트 사이트 - 개발 중인 베타 버전입니다
SIR

간단하게 메뉴꾸미기 1

하늘뚱
프로필 보기이 회원 글보기
 · 4년 전 · 4524 · 16
screencapture-172-30-1-55-5500-menu01-html-2021-03-29-06_04_48.png
screencapture-172-30-1-55-5500-menu01-html-2021-03-29-06_04_32.png
menu01.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Drawer using HTML CSS & Javascript | Drawer Menu</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/menu01.css">
</head>
<body>
<div class="container">
<div class="navigation">
<ul>
<li>
<a href="#">
<span class="icon"><i class="fa fa-home" aria-hidden="true"></i></span>
<span class="title">Home</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fa fa-user" aria-hidden="true"></i></span>
<span class="title">Profile</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fa fa-comment" aria-hidden="true"></i></span>
<span class="title">Message</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
<span class="title">Help</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fa fa-cog" aria-hidden="true"></i></span>
<span class="title">Setting</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fa fa-lock" aria-hidden="true"></i></span>
<span class="title">Password</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fa fa-sign-out" aria-hidden="true"></i></span>
<span class="title">sign Out</span>
</a>
</li>
</ul>
</div>
<div class="toggle"></div>
</div>
<script>
const navigation = document.querySelector('.navigation');
document.querySelector('.toggle').onclick = function(){
this.classList.toggle('active');
navigation.classList.toggle('active');
}
</script>
</body>
</html>

menu01.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #6843d1; }
.container { position: relative; }
.container .navigation { position:relative; width: 80px; height: 420px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: 0.5s; }
.container .navigation.active { width: 300px }
.container .navigation ul { position: absolute; top: 0; left: 0; width: 100%; }
.container .navigation ul li { position: relative; list-style: none; width: 100%; }
.container .navigation ul li:hover { background: #efefef; }
.container .navigation ul li a { position: relative; display: block; width: 100%; display: flex; text-decoration: none; color: #6843cf; font-weight: 500; }
.container .navigation ul li a .icon { position: relative; display: block; min-width: 80px; height: 60px; line-height: 60px; text-align: center; }
.container .navigation ul li a .icon .fa { font-size: 24px; }
.container .navigation ul li a .title { position: relative; display: block; height: 60px; line-height: 60px; white-space: nowrap; }

.toggle { position: absolute; top: calc(50% - 20px); right: -20px; width: 40px; height: 40px; background: #f5f5f5; cursor: pointer; border: 5px solid #4843d1; border-radius: 50%; }


.toggle::before { content: '\f054'; font-family: fontAwesome; position: absolute; width:100%; height: 100%; line-height: 32px; text-align: center; font-size: 16px; color: #4843d1 }
.toggle.active::before { content: '\f053'; }


ps :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

첨부파일

screencapture-172-30-1-55-5500-menu01-html-2021-03-29-06_04_48.png (42.6 KB, 0회)
screencapture-172-30-1-55-5500-menu01-html-2021-03-29-06_04_32.png (32.5 KB, 0회)
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 16개

써맨
프로필 보기이 회원 글보기
 2년 전
감사합니다.
오소피아
프로필 보기이 회원 글보기
 2년 전
좋네요. ^^
하늘뚱
프로필 보기이 회원 글보기
 2년 전
@오소피아 감사합니다.
하늘뚱
프로필 보기이 회원 글보기
 2년 전
@오소피아 감사합니다.
우아한마녀블랑
프로필 보기이 회원 글보기
 2년 전
오 이거 너무 좋네요 추가해봐야지!
하늘뚱
프로필 보기이 회원 글보기
 2년 전
@우아한마녀블랑 감사합니다.

게시글 목록

번호 제목
1451
부트스트랩 Disabled Item
1450
부트스트랩 활성 상태
1449
부트스트랩 링크 된 항목으로 그룹 나열
1448
부트스트랩 부트 스트랩 배지가있는 목록 그룹
1447
부트스트랩 부트 스트랩 목록 그룹
1446
부트스트랩 Bootstrap Pager 버튼 맞춤 1
1445
부트스트랩 Bootstrap Pager
1444
부트스트랩 Breadcrumbs
1443
부트스트랩 Pagination Sizing
1442
부트스트랩 부트스트랩 Disabled State
1441
부트스트랩 부트스트랩 활성 상태
1440
부트스트랩 부트 스트랩 페이지 매김
1438
부트스트랩 스택 된 진행률 표시 줄
1437
부트스트랩 애니메이션 진행률 표시 줄
1436
부트스트랩 스트라이프 진행 표시 줄
1435
부트스트랩 컬러 진행 바
1434
부트스트랩 레이블이있는 진행 표시 줄
1433
부트스트랩 부트 스트랩 진행률 표시 줄
1432
부트스트랩 레이블
1431
부트스트랩 부트 스트랩 배지 및 라벨
1430
부트스트랩 부트 스트랩 글리펀콜
1429
부트스트랩 분할 단추 드롭 다운
1428
부트스트랩 중첩 단추 그룹 및 드롭 다운 메뉴
1427
부트스트랩 양쪽 맞춤 버튼 그룹
1426
부트스트랩 세로 단추 그룹
1425
부트스트랩 버튼 그룹
1424
부트스트랩 활성 / 비활성 버튼
1421
부트스트랩 블록 레벨 버튼
1420
부트스트랩 단추 크기 1
1419
부트스트랩 부트 스트랩 버튼 1
이전 다음
전체 목록