간단하게 메뉴꾸미기 1

하늘뚱

· 4년 전 · 조회 4523 4523 · 댓글 16 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="#">

Home
</a>
</li>
<li>
<a href="#">

Profile
</a>
</li>
<li>
<a href="#">

Message
</a>
</li>
<li>
<a href="#">

Help
</a>
</li>
<li>
<a href="#">

Setting
</a>
</li>
<li>
<a href="#">

Password
</a>
</li>
<li>
<a href="#">

sign Out
</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년 전

@우아한마녀블랑 감사합니다.

/ 2

1 2

게시글 목록

번호	제목	글쓴이	조회	날짜
1547	CSS 반응형 네비게이션(햄버거 메뉴) 구현	선택과집중	139	1개월 전
1546	CSS 스크롤 애니메이션 인터랙션	선택과집중	342	2개월 전
1545	CSS 이미지 비율 유지 반응형 처리	선택과집중	284	2개월 전
1544	CSS CSS 변수와 다크 모드 테마	선택과집중	261	3개월 전
1542	CSS 실무에서 자주 쓰이는 레이아웃 구성 방식 3가지	선택과집중	388	3개월 전
1541	CSS 반응형 웹을 위한 미디어쿼리 1	선택과집중	328	3개월 전
1540	CSS display 속성 완전 이해하기	선택과집중	253	3개월 전
1539	CSS 텍스트 말줄임(...) 처리 – text-overflow: ellipsis	선택과집중	270	4개월 전
1538	CSS 간단한 반응형 폰트 설정 실전 팁	선택과집중	306	4개월 전
1537	CSS 박스 모델 완전 이해	선택과집중	286	4개월 전
1535	CSS margin과 padding의 차이 완벽 이해	선택과집중	372	4개월 전
1534	CSS CSS 트랜지션, 웹을 살아 숨 쉬게 합니다 1	선택과집중	320	4개월 전
1533	CSS CSS의 기본 중의 기본: 박스 모델을 파헤쳐보자!	선택과집중	327	4개월 전
1532	CSS Flexbox로 레이아웃을 자유롭게	선택과집중	341	4개월 전
1531	CSS perspective와 transform-style: preserve-3d로 3D 공간만들기	선택과집중	225	4개월 전
1512	CSS 댓글 해킹 방어? & 강제 실행 방어 댓글 8	piadream	1,500	2년 전
1508	CSS CSS 스위치형 버튼 4	예뜨락	2,466	2년 전
1479	CSS 간단하게 메뉴꾸미기2 13	하늘뚱	3,990	4년 전
1478	CSS 간단하게 메뉴꾸미기 1 16 현재글	하늘뚱	4,524	4년 전
1475	반응형웹 html5 js 로 캔버스 그리기... - 사인입력 받을 때 응용하면 좋을 듯하네요	xpem	2,950	5년 전
1474	반응형웹 flex 와 grid 강의... 와... 대단함다@@ 1	xpem	2,798	5년 전
1460	부트스트랩 비활성화 및 활성 항목 2	수다왕	5,007	7년 전
1459	부트스트랩 드롭 다운 헤더 7	수다왕	6,564	7년 전
1458	부트스트랩 드롭 다운 분배기 2	수다왕	4,642	7년 전
1457	부트스트랩 부트 스트랩 드롭 다운	수다왕	6,677	7년 전
1456	부트스트랩 패널 바닥 글, 패널 그룹	수다왕	3,343	7년 전
1455	부트스트랩 부트스트랩 패널 제목	수다왕	3,179	7년 전
1454	부트스트랩 부트스트랩 panel	수다왕	3,682	7년 전
1453	부트스트랩 부트스트랩 List Groups -> Custom Content	수다왕	3,207	7년 전
1452	부트스트랩 부트스트랩 List Groups -> Contextual Classes	수다왕	3,074	7년 전

1 2 3

전체 목록

강좌