간단하게 메뉴꾸미기 1

하늘뚱

· 4년 전 · 조회 4536 4536 · 댓글 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

프로필 보기 이 회원 글보기

4년 전

수고하셨습니다. 스크랩 한 후 bootstrap5 beta3 용 그누보드메뉴 작성할 때 참고하겠습니다.

하늘뚱

프로필 보기 이 회원 글보기

4년 전

@arari 감사합니다.

고뿌니

프로필 보기 이 회원 글보기

4년 전

한글로 좀 ; */그려주세요/*

DawnDew

프로필 보기 이 회원 글보기

4년 전

오..좋습니다

하늘뚱

프로필 보기 이 회원 글보기

4년 전

@DawnDew 감사합니다.

마음으로

프로필 보기 이 회원 글보기

4년 전

감사합니다

하늘뚱

프로필 보기 이 회원 글보기

4년 전

@마음으로 감사합니다.

sinbi

프로필 보기 이 회원 글보기

3년 전

이쁘네요. 좋은 스킨 감사합니다.
https://codepen.io/sinbi/pen/MWXYaJK

하늘뚱

프로필 보기 이 회원 글보기

3년 전

@sinbi 와우 최고~~ㅎㅎㅎ

하늘뚱

프로필 보기 이 회원 글보기

2년 전

@하늘뚱 감사합니다.

/ 2

1 2

게시글 목록

번호	제목	글쓴이	조회	날짜
1386	부트스트랩 부트 스트랩 그리드 시스템	수다왕	2,715	8년 전
1385	AngularJS 주형	수다왕	1,459	8년 전
1384	AngularJS 컨트롤러	수다왕	1,109	8년 전
1383	AngularJS $ routeProvider	수다왕	984	8년 전
1382	AngularJS AngularJS Routing - 무엇이 필요합니까?	수다왕	1,383	8년 전
1381	AngularJS AngularJS Routing	수다왕	1,181	8년 전
1380	AngularJS CSS 애니메이션	수다왕	1,498	8년 전
1379	AngularJS ngAnimate는 무엇을합니까?	수다왕	1,447	8년 전
1378	AngularJS AngularJS Animations 무엇이 필요합니까?	수다왕	1,414	8년 전
1377	AngularJS AngularJS Animations	수다왕	1,342	8년 전
1376	AngularJS AngularJS 교차 도메인 포함	수다왕	1,221	8년 전
1375	AngularJS AngularJS 코드 포함	수다왕	1,387	8년 전
1374	AngularJS AngularJS Includes	수다왕	1,043	8년 전
1373	AngularJS angular.isNumber () 참조가 숫자 인 경우 참을 리턴합니다.	수다왕	1,250	8년 전
1372	AngularJS angular.isString () 참조가 문자열이면 true를 반환합니다.	수다왕	1,265	8년 전
1371	AngularJS angular.uppercase () 문자열을 대문자로 변환합니다.	수다왕	1,612	8년 전
1370	AngularJS AngularJS API	수다왕	1,354	8년 전
1369	AngularJS 검증 예제	수다왕	1,578	8년 전
1368	AngularJS 사용자 정의 유효성 검사	수다왕	1,547	8년 전
1367	AngularJS CSS 클래스	수다왕	1,640	8년 전
1366	AngularJS 양식 상태 및 입력 상태	수다왕	1,392	8년 전
1365	AngularJS 이메일	수다왕	1,363	8년 전
1364	AngularJS AngularJS 양식 검증	수다왕	1,396	8년 전
1363	AngularJS 선택 상자	수다왕	1,433	8년 전
1362	AngularJS 라디오 버튼	수다왕	1,476	8년 전
1361	AngularJS 체크 박스	수다왕	1,465	8년 전
1360	AngularJS AngularJS 양식	수다왕	1,005	8년 전
1359	AngularJS $event 객체	수다왕	1,383	8년 전
1358	AngularJS 토글, 참 / 거짓	수다왕	1,273	8년 전
1357	AngularJS AngularJS 이벤트 - ng-click 지시문	수다왕	1,245	8년 전

이전 다음

2 3 4 5 6

전체 목록

강좌