간단하게 메뉴꾸미기 1

하늘뚱

· 4년 전 · 조회 4541 4541 · 댓글 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, 1회)

screencapture-172-30-1-55-5500-menu01-html-2021-03-29-06_04_32.png (32.5 KB, 1회)

댓글 작성

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

로그인하기

댓글 16개

arari

번호	분류	제목	글쓴이	날짜	조회
298	CSS	반응형 네비게이션(햄버거 메뉴) 구현	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1개월 전	146
297	CSS	스크롤 애니메이션 인터랙션	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3개월 전	351
296	CSS	이미지 비율 유지 반응형 처리	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3개월 전	298
295	CSS	CSS 변수와 다크 모드 테마	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3개월 전	275
294	CSS	실무에서 자주 쓰이는 레이아웃 구성 방식 3가지	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3개월 전	399
293	CSS	반응형 웹을 위한 미디어쿼리 [1]	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4개월 전	336
292	CSS	display 속성 완전 이해하기	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4개월 전	266
291	CSS	텍스트 말줄임(...) 처리 – text-overflow: ellipsis	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4개월 전	278
290	CSS	간단한 반응형 폰트 설정 실전 팁	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4개월 전	317
289	CSS	박스 모델 완전 이해	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4개월 전	294
288	CSS	margin과 padding의 차이 완벽 이해	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4개월 전	381
287	CSS	CSS 트랜지션, 웹을 살아 숨 쉬게 합니다 [1]	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4개월 전	335
286	CSS	CSS의 기본 중의 기본: 박스 모델을 파헤쳐보자!	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	335
285	CSS	Flexbox로 레이아웃을 자유롭게	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	352
284	CSS	perspective와 transform-style: preserve-3d로 3D 공간만들기	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	240
283	CSS	댓글 해킹 방어? & 강제 실행 방어 댓글 [8]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1511
282	CSS	CSS 스위치형 버튼 [4]	예뜨락 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	2483
281	CSS	간단하게 메뉴꾸미기2 [13]	하늘뚱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	4013
280	CSS	간단하게 메뉴꾸미기 1 [16] 현재 보는 글	하늘뚱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	4542
279	반응형웹	html5 js 로 캔버스 그리기... - 사인입력 받을 때 응용하면 좋을 듯하네요	xpem 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5년 전	2969
278	반응형웹	flex 와 grid 강의... 와... 대단함다@@ [1]	xpem 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5년 전	2809
277	부트스트랩	비활성화 및 활성 항목 [2]	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	5014
276	부트스트랩	드롭 다운 헤더 [7]	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	6570
275	부트스트랩	드롭 다운 분배기 [2]	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	4651
274	부트스트랩	부트 스트랩 드롭 다운	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	6683
273	부트스트랩	패널 바닥 글, 패널 그룹	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3351
272	부트스트랩	부트스트랩 패널 제목	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3192
271	부트스트랩	부트스트랩 panel	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3692
270	부트스트랩	부트스트랩 List Groups -> Custom Content	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3214
269	부트스트랩	부트스트랩 List Groups -> Contextual Classes	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3084

간단하게 메뉴꾸미기 1

첨부파일

댓글 작성

댓글 16개

게시판 목록

퍼블리싱강좌

[CSS] 반응형 네비게이션(햄버거 메뉴) 구현

[CSS] 스크롤 애니메이션 인터랙션

[CSS] 이미지 비율 유지 반응형 처리

[CSS] CSS 변수와 다크 모드 테마

[CSS] 실무에서 자주 쓰이는 레이아웃 구성 방식 3가지

[CSS] 반응형 웹을 위한 미디어쿼리 [1]

[CSS] display 속성 완전 이해하기

[CSS] 텍스트 말줄임(...) 처리 – text-overflow: ellipsis

[CSS] 간단한 반응형 폰트 설정 실전 팁

[CSS] 박스 모델 완전 이해

[CSS] margin과 padding의 차이 완벽 이해

[CSS] CSS 트랜지션, 웹을 살아 숨 쉬게 합니다 [1]

[CSS] CSS의 기본 중의 기본: 박스 모델을 파헤쳐보자!

[CSS] Flexbox로 레이아웃을 자유롭게

[CSS] perspective와 transform-style: preserve-3d로 3D 공간만들기

[CSS] 댓글 해킹 방어? & 강제 실행 방어 댓글 [8]

[CSS] CSS 스위치형 버튼 [4]

[CSS] 간단하게 메뉴꾸미기2 [13]

[CSS] 간단하게 메뉴꾸미기 1 [16] 현재 보는 글

[반응형웹] html5 js 로 캔버스 그리기... - 사인입력 받을 때 응용하면 좋을 듯하네요

[반응형웹] flex 와 grid 강의... 와... 대단함다@@ [1]

[부트스트랩] 비활성화 및 활성 항목 [2]

[부트스트랩] 드롭 다운 헤더 [7]

[부트스트랩] 드롭 다운 분배기 [2]

[부트스트랩] 부트 스트랩 드롭 다운

[부트스트랩] 패널 바닥 글, 패널 그룹

[부트스트랩] 부트스트랩 패널 제목

[부트스트랩] 부트스트랩 panel

[부트스트랩] 부트스트랩 List Groups -> Custom Content

[부트스트랩] 부트스트랩 List Groups -> Contextual Classes