반응형
모바일웹 햄버거 메뉴버튼 만들기
세 줄모양 햄버거 메뉴를 만들 수 있다.
span 태그 4줄을 입력하고
positon : absolute 로 세팅하고
2번째와 3번째는 같이 겹쳐 놓는다.
https://codepen.io/sevenpia/pen/wvXLLMm
Html 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>햄버거-메인메뉴들</title>
<link rel="stylesheet" href="css/ham_menu.css">
<script src="js/jquery-1.12.3.js"></script>
<script src="js/ham_menu.js"></script>
</head>
<body>
<!--ham4_btn에 .active가 붙으면 span 의 모양이 변한다. -->
<a href="#" class="ham4_btn">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<!--
css에서 먼저 만들 사항들
1. overlay: overlay에 .visible이 붙으면 위에서 내려오면서 나오도록
opacity 도 1이 되도록 한다.
2. ul li 왼쪽에서 시간차를 두고 나오면서 opacity도 1 이 되도록 한다.
-->
<div class="overlay">
<ul class="menu">
<li><a href="#">html5</a></li>
<li><a href="#">css3</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">jquery</a></li>
</ul>
</div>
</body>
</html>
css 내용들
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
font-size: 22px;
}
a {
text-decoration: none;
color: inherit;
}
img {
border: 0;
}
body {
font-family: "맑은 고딕", MalgunGothic, arial, sans-serif;
font-size: 16px;
color: #666;
}
.ham4_btn {
display: block;
position: absolute;
top: 10px;
right: 30px;
width: 45px;
height: 34px;
z-index: 1;
}
.ham4_btn span {
position: absolute;
top: 0;
display: block;
width: 100%;
height: 8px;
border-radius: 4px;
background: #666;
transition: 0.2s;
}
.ham4_btn span:nth-child(1) {
top: 0;
}
.ham4_btn span:nth-child(2) {
top: 13px;
}
.ham4_btn span:nth-child(3) {
top: 13px;
}
.ham4_btn span:nth-child(1) {
top: 26px;
}
.ham4_btn.active span:nth-child(1),
.ham4_btn.active span:nth-child(4) {
opacity: 0;
}
.ham4_btn.active span:nth-child(2) {
transform: rotate(45deg);
background: #fff;
}
.ham4_btn.active span:nth-child(3) {
transform: rotate(-45deg);
background: #fff;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #81D4FA;
display: flex;
justify-content: center;
align-items: center;
height: 0;
opacity: 0;
visibility: hidden;
transition: 0.2s;
}
.overlay.visible {
height: 100%;
opacity: 0.8;
visibility: visible;
}
.overlay ul li {
display: block;
margin-bottom: 1em;
color: #fff;
opacity: 0.75;
transition: 0.2s;
font-size: 1.5em;
}
.overlay ul li:hover {
opacity: 1;
}
@keyframes move {
0% {
opacity: 0;
transform: translate(-25%);
}
100% {
opacity: 1;
transform: translate(0);
}
}
.overlay.visible ul li {
animation: move 0.3s ease forwards;
}
.overlay.visible ul li:hover {
color: #eee;
}
.overlay.visible ul li:nth-child(1) {
animation-delay: 0.23s;
}
.overlay.visible ul li:nth-child(2) {
animation-delay: 0.26s;
}
.overlay.visible ul li:nth-child(3) {
animation-delay: 0.29s;
}
.overlay.visible ul li:nth-child(4) {
animation-delay: 0.32s;
}
모바일 햄버거 메뉴 jquery 소스
$(document).ready(function(){
$(".ham4_btn").click(function(){
$(this).toggleClass("active");
$(".overlay").toggleClass("visible");
});
}) /*ready end */
반응형
'html jquery css' 카테고리의 다른 글
| [css] animation, transition 퍼블리싱 할 때 속도 속성, 속성값 (0) | 2022.10.10 |
|---|---|
| flex, justify-content 자료 중앙에 배치시키기 (0) | 2022.10.06 |
| em, rem 상대단위 글꼴 상대 단위 (0) | 2022.10.06 |
| [반응형] 이미지 제작: 가로폭 100% 이미지 만들기 (2) | 2022.10.06 |
| [css코딩]브라우저의 세로(y축)의 스크롤이 항상 보이도록 할 경우 (0) | 2022.10.04 |
| 반응형 웹에서 가로 픽셀 px 을 %로 계산하는 방법 (0) | 2022.09.29 |
| css3 animation 모음 (0) | 2022.09.29 |
| 슬라이더 : swiper (0) | 2022.09.27 |