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

간단하게 메뉴꾸미기 1

하늘뚱
프로필 보기이 회원 글보기
 · 4년 전 · 4526 · 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, 1회)
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년 전
@우아한마녀블랑 감사합니다.

게시글 목록

번호 제목
1386
부트스트랩 부트 스트랩 그리드 시스템
1385
AngularJS 주형
1384
AngularJS 컨트롤러
1383
AngularJS $ routeProvider
1382
AngularJS AngularJS Routing - 무엇이 필요합니까?
1381
AngularJS AngularJS Routing
1380
AngularJS CSS 애니메이션
1379
AngularJS ngAnimate는 무엇을합니까?
1378
AngularJS AngularJS Animations 무엇이 필요합니까?
1377
AngularJS AngularJS Animations
1376
AngularJS AngularJS 교차 도메인 포함
1375
AngularJS AngularJS 코드 포함
1374
AngularJS AngularJS Includes
1373
AngularJS angular.isNumber () 참조가 숫자 인 경우 참을 리턴합니다.
1372
AngularJS angular.isString () 참조가 문자열이면 true를 반환합니다.
1371
AngularJS angular.uppercase () 문자열을 대문자로 변환합니다.
1370
AngularJS AngularJS API
1369
AngularJS 검증 예제
1368
AngularJS 사용자 정의 유효성 검사
1367
AngularJS CSS 클래스
1366
AngularJS 양식 상태 및 입력 상태
1365
AngularJS 이메일
1364
AngularJS AngularJS 양식 검증
1363
AngularJS 선택 상자
1362
AngularJS 라디오 버튼
1361
AngularJS 체크 박스
1360
AngularJS AngularJS 양식
1359
AngularJS $event 객체
1358
AngularJS 토글, 참 / 거짓
1357
AngularJS AngularJS 이벤트 - ng-click 지시문
이전 다음
전체 목록