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

간단하게 메뉴꾸미기 1

하늘뚱
프로필 보기이 회원 글보기
 · 4년 전 · 4534 · 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, 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년 전
@하늘뚱 감사합니다.

게시글 목록

번호 제목
1326
AngularJS AngularJS Filters에 uppercase (대문자변환)
1325
AngularJS AngularJS Scope 3
1324
AngularJS AngularJS Scope 2
1323
AngularJS AngularJS Scope 1
1322
AngularJS AngularJS Controllers - Controllers In External Files
1321
AngularJS AngularJS Controllers - Controller Methods
1320
AngularJS AngularJS Controllers
1319
AngularJS AngularJS Data Binding 2번째
1318
AngularJS AngularJS Data Binding - Data Model(데이터 모델)
1317
AngularJS AngularJS ng-model Directive
1316
AngularJS AngularJS Directives(지시문) - Repeating HTML Elements(반복되는 HTML 요소)
1315
AngularJS AngularJS Directives(지시문) - 데이터 바인딩
1314
AngularJS AngularJS Directives(지시문)
1313
AngularJS AngularJS 모듈 만들기
1312
AngularJS 앵큘러js 간단한 예제
1311
AngularJS AngularJS Input Controls - Checkbox, Radiobuttons, Selectbox
1310
AngularJS AngularJS Input Controls - Data-Binding
1309
AngularJS AngularJS $event Object
1308
AngularJS AngularJS Toggle, True/False
1307
AngularJS AngularJS ng-click 지시문
1306
AngularJS AngularJS 마우스 이벤트
1305
AngularJS AngularJS 이벤트
1304
jQuery Mobile scrollstart 이벤트
1303
jQuery Mobile pageshow 이벤트
1302
jQuery Mobile pageremove 이벤트
1301
jQuery Mobile pageloadfailed 이벤트
1300
jQuery Mobile pageload 이벤트
1299
jQuery Mobile pageinit 이벤트
1298
jQuery Mobile pagehide 이벤트
1297
jQuery Mobile pagecreate
이전 다음
전체 목록