비오늘날 혼밥 먹고 - 간단한 메뉴구성

하늘뚱

프로필 보기 이 회원 글보기

· 4년 전 · 조회 1481 1481 · 댓글 4 4

간단하게 html, css로 메뉴를 구성해 보았습니다.

menu01.html

<!DOCTYPE html>

<head>

<title>Responsive Navigation Drawer using HTML CSS & Javascript | Drawer Menu</title>

</head>

<body>

<ul>

<li>

Home

</a>

</li>

<li>

Profile

</a>

</li>

<li>

Message

</a>

</li>

<li>

Help

</a>

</li>

<li>

Setting

</a>

</li>

<li>

Password

</a>

</li>

<li>

sign Out

</a>

</li>

</ul>

</div>

</div>

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'; }

댓글 작성

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

로그인하기

댓글 4개

Zendsoft

프로필 보기 이 회원 글보기

4년 전

이쁘네요

하늘뚱

프로필 보기 이 회원 글보기

4년 전

@Zendsoft 감사합니다.

제로윈텍

프로필 보기 이 회원 글보기

4년 전

오호 좋네요~~~~

하늘뚱

프로필 보기 이 회원 글보기

4년 전

@제로윈텍 감사합니다.ㅎㅎ

게시글 목록

번호	제목	글쓴이	조회	날짜
1717635	지지삼의 첫글	지지삼	12	15시간 전
1717629	꼰대하면 가장 먼저 무엇이 떠오르시나요? 15	따삼이	143	1주 전
1717626	SIR이 완전 환골탈태 한듯 합니다 1	안졸리니졸리니	108	1주 전
1717625	SIR 데모 사이트가 회원에게 첫 개문을 . . . 2	glitter0gim	127	1주 전
1717621	수고하십니다	glitter0gim	74	1주 전
1717619	zzzzzz 1	따삼이	88	3주 전
1717611	222 7	리자	219	3주 전
1717610	222	리자	23	3주 전
1717609	1111	리자	13	3주 전
1717607	하하하 1	리자	30	3주 전
1717601	달............	감독님	39	1개월 전
1717598	연휴가 더 힘드네요. 3	김하늘™	77	1개월 전
1717591	보수...또 보수.. 3	해피아이	93	1개월 전
1717590	하단의 조크가 재미있네요...	xpem	66	1개월 전
1717583	추석 연휴 잘 보내세요. 3	오빠야	67	1개월 전
1717575	보드 환경설정 페이징 반영되나요? 1	웅푸	113	1개월 전
1717572	볼만한 유튜브 2가지 추천	이공일	79	1개월 전
1717568	부부사기단 공개 6	Gothrock	224	1개월 전
1717566	퇴근합니다. 2	김하늘™	66	1개월 전
1717549	연휴가 시작이네요.. 5	마젠토	93	1개월 전
1717545	Sora2 초대코드 있으신분 공유좀 굽신굽신 7	솔그루	161	1개월 전
1717533	사업주가 날 이렇게 대우 해? 8	해피아이	159	1개월 전
1717512	조기퇴근 하라네요~ 5	샬롬이아빠	134	1개월 전
1717511	바이브 코딩의 장점 9	리자	230	1개월 전
1717508	다음 레전드 황금 연휴... 5	미니님a	139	1개월 전
1717495	맵 사용이 엄청 까다로워졌네요 2	미니님a	170	1개월 전
1717479	무한로그인 기능을 만들고 테스트 중입니다 6	해피정	164	1개월 전
1717473	새로운 SIR 을 공개합니다 38	리자	456	1개월 전
1717470	마법사랑해 2	지운아빠	91	1개월 전
1717463	요즘 로고 어떻게 쉽게 만드나요? 2	울라프	155	1개월 전

1 2 3

전체 목록

커뮤니티