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

간단하게 메뉴꾸미기 1

하늘뚱
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 4년 전 · 4539 · 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년 전
한글로 좀 ; */그려주세요/*
하늘뚱
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
@DawnDew 감사합니다.
마음으로
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다
하늘뚱
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
@마음으로 감사합니다.
sinbi
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
이쁘네요. 좋은 스킨 감사합니다.
https://codepen.io/sinbi/pen/MWXYaJK
하늘뚱
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
@sinbi 와우 최고~~ㅎㅎㅎ
하늘뚱
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
@하늘뚱 감사합니다.
오소피아
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
좋네요. ^^
하늘뚱
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
@오소피아 감사합니다.
하늘뚱
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
@오소피아 감사합니다.
우아한마녀블랑
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
오 이거 너무 좋네요 추가해봐야지!
하늘뚱
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
@우아한마녀블랑 감사합니다.

게시글 목록

번호 제목
1199
반응형웹 반응형웹 스크립트로 바꾸기 3
1197
반응형웹 반응형 레이아웃의 첫걸음 예제소스
1181
부트스트랩 부트스트랩 MIT 라이센스? 3
1165
부트스트랩 data-toggle 체크박스 활용
785
표준화 9강 최신글(skin/latest) 스킨 7
455
반응형웹 *. 반응형 웹 관련 개발자 설문조사 결과 17
426
표준화 8강 아웃로그인 스킨 (skin/outlogin) 7
311
표준화 7강 갤러리 게시판 스킨 (skin/board) 21
287
반응형웹 7. 서버측 반응형 웹 접근방법 17
247
반응형웹 6. 반응형 이미지 46
237
반응형웹 잠깐글2. 반응형 테이블 12
236
표준화 6강 일반 게시판 스킨 (skin/board) 19
220
반응형웹 5. 반응형 네비게이션/메뉴 25
215
반응형웹 잠깐글1. 반응형 웹은 ???다. 11
205
반응형웹 4. 반응형 레이아웃 21
179
반응형웹 3. 반응형 그리드 23
167
반응형웹 2. CSS3 미디어쿼리와 스크린 경계 19
133
반응형웹 1. 반응형 웹 디자인/모바일 퍼스트의 이해 58
119
반응형웹 반응형 웹 강좌를 시작하며 33
108
표준화 번외편 - 퍼블리싱을 한다는 것은? 17
98
표준화 5강 그누보드4s 레이아웃 계획 및 구성 11
86
표준화 4강 그누보드4 dtd 변경 및 오류 찾기 (html5) 19
82
표준화 3강 html5 시맨틱 마크업과 그누보드 12
64
표준화 2강 장애인차별금지법의 이해 - 웹 접근성 16
50
표준화 1강 웹 표준, 웹 접근성의 이해 30
46
표준화 그누보드4 웹 표준화 강좌 규칙 11
34
표준화 그누보드4 웹 표준화 커리큘럼 21
1
표준화 그누보드4 웹 표준화 강좌를 시작하며 37
이전
전체 목록