간단하게 메뉴꾸미기 1

하늘뚱

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

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

댓글 작성

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

로그인하기

댓글 16개

arari

번호	분류	제목	글쓴이	날짜	조회
28	반응형웹	반응형웹 스크립트로 바꾸기 [3]	김깡짱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4489
27	반응형웹	반응형 레이아웃의 첫걸음 예제소스	잠돌 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	7558
26	부트스트랩	부트스트랩 MIT 라이센스? [3]	돼지코구뇽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	14831
25	부트스트랩	data-toggle 체크박스 활용	돼지코구뇽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	9424
24	표준화	9강 최신글(skin/latest) 스킨 [7]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	8296
23	반응형웹	*. 반응형 웹 관련 개발자 설문조사 결과 [17]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	13493
22	표준화	8강 아웃로그인 스킨 (skin/outlogin) [7]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	9466
21	표준화	7강 갤러리 게시판 스킨 (skin/board) [21]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	16753
20	반응형웹	7. 서버측 반응형 웹 접근방법 [17]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	19690
19	반응형웹	6. 반응형 이미지 [46]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	31007
18	반응형웹	잠깐글2. 반응형 테이블 [12]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	36485
17	표준화	6강 일반 게시판 스킨 (skin/board) [19]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	12909
16	반응형웹	5. 반응형 네비게이션/메뉴 [25]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	29305
15	반응형웹	잠깐글1. 반응형 웹은 ???다. [11]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	11839
14	반응형웹	4. 반응형 레이아웃 [21]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	31752
13	반응형웹	3. 반응형 그리드 [23]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	29734
12	반응형웹	2. CSS3 미디어쿼리와 스크린 경계 [19]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	39242
11	반응형웹	1. 반응형 웹 디자인/모바일 퍼스트의 이해 [58]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	50635
10	반응형웹	반응형 웹 강좌를 시작하며 [33]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	32781
9	표준화	번외편 - 퍼블리싱을 한다는 것은? [17]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	9156
8	표준화	5강 그누보드4s 레이아웃 계획 및 구성 [11]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	11230
7	표준화	4강 그누보드4 dtd 변경 및 오류 찾기 (html5) [19]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	9168
6	표준화	3강 html5 시맨틱 마크업과 그누보드 [12]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	11135
5	표준화	2강 장애인차별금지법의 이해 - 웹 접근성 [16]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	11238
4	표준화	1강 웹 표준, 웹 접근성의 이해 [30]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	14713
3	표준화	그누보드4 웹 표준화 강좌 규칙 [11]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	8063
2	표준화	그누보드4 웹 표준화 커리큘럼 [21]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	10173
1	표준화	그누보드4 웹 표준화 강좌를 시작하며 [37]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	11903

간단하게 메뉴꾸미기 1

첨부파일

댓글 작성

댓글 16개

게시판 목록

퍼블리싱강좌

[반응형웹] 반응형웹 스크립트로 바꾸기 [3]

[반응형웹] 반응형 레이아웃의 첫걸음 예제소스

[부트스트랩] 부트스트랩 MIT 라이센스? [3]

[부트스트랩] data-toggle 체크박스 활용

[표준화] 9강 최신글(skin/latest) 스킨 [7]

[반응형웹] *. 반응형 웹 관련 개발자 설문조사 결과 [17]

[표준화] 8강 아웃로그인 스킨 (skin/outlogin) [7]

[표준화] 7강 갤러리 게시판 스킨 (skin/board) [21]

[반응형웹] 7. 서버측 반응형 웹 접근방법 [17]

[반응형웹] 6. 반응형 이미지 [46]

[반응형웹] 잠깐글2. 반응형 테이블 [12]

[표준화] 6강 일반 게시판 스킨 (skin/board) [19]

[반응형웹] 5. 반응형 네비게이션/메뉴 [25]

[반응형웹] 잠깐글1. 반응형 웹은 ???다. [11]

[반응형웹] 4. 반응형 레이아웃 [21]

[반응형웹] 3. 반응형 그리드 [23]

[반응형웹] 2. CSS3 미디어쿼리와 스크린 경계 [19]

[반응형웹] 1. 반응형 웹 디자인/모바일 퍼스트의 이해 [58]

[반응형웹] 반응형 웹 강좌를 시작하며 [33]

[표준화] 번외편 - 퍼블리싱을 한다는 것은? [17]

[표준화] 5강 그누보드4s 레이아웃 계획 및 구성 [11]

[표준화] 4강 그누보드4 dtd 변경 및 오류 찾기 (html5) [19]

[표준화] 3강 html5 시맨틱 마크업과 그누보드 [12]

[표준화] 2강 장애인차별금지법의 이해 - 웹 접근성 [16]

[표준화] 1강 웹 표준, 웹 접근성의 이해 [30]

[표준화] 그누보드4 웹 표준화 강좌 규칙 [11]

[표준화] 그누보드4 웹 표준화 커리큘럼 [21]

[표준화] 그누보드4 웹 표준화 강좌를 시작하며 [37]