Programing/HTML
HTML 햄버거 메뉴 만들기 (애니메이션 버튼)
쇼핑의왕루이
2022. 8. 16. 15:57
안녕하세요 루이입니다
이번 포스팅에는 HTML로 햄버거 메뉴를 만들어보려합니다
햄버거 메뉴란 정말로 햄버거가 떠오르는 이미지의 메뉴로
모바일 웹서핑이나 어플을 이용해보신분들께서는 아주 익숙한 버튼입니다
이렇게 햄버거 버튼을 클릭시 메뉴가 슬라이드 식으로 나오는 방식으로 닫기버튼으로 메뉴를 닫을수 있고
어두워진 화면을 클릭시 닫히는 방식으로 만들었습니다
그후 서브 메뉴라는 곳을 클릭하면 밑으로 서브메뉴들이 나오며
마우스를 가져다 대면 그부분의 색상이 바뀌는 방식으로 메뉴를 구성해보았습니다
(자바스크립트는 제이쿼리를 이용하였습니다)
HTML
<div class="btn"></div>
<div onclick="history.back();" class="page_cover"></div>
<div id="menu">
<ul class="nav">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a>서브 메뉴</a>
<ul class="sub_mobile">
<li><a href="#">서브 메뉴1</a></li>
<li><a href="#">서브 메뉴2</a></li>
<li><a href="#">서브 메뉴3</a></li>
<li><a href="#">서브 메뉴4</a></li>
</ul>
</li>
</ul>
<div onclick="history.back();" class="close"></div>
</div>CSS
html.open {
overflow: hidden;
}
#menu.open {
left: 0px;
}
.page_cover.open {
display: block;
}
.btn {
width: 50px;
height: 50px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
background-image: url("http://s1.daumcdn.net/cfs.tistory/custom/blog/204/2048858/skin/images/menu.png");
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.close {
width: 50px;
height: 50px;
position: absolute;
left: 0px;
top: 0px;
background-image: url("http://s1.daumcdn.net/cfs.tistory/custom/blog/204/2048858/skin/images/close.png");
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
#menu {
width: 150px;
height: 100%;
position: fixed;
top: 0px;
left: -202px;
z-index: 10;
border: 1px solid #c9c9c9;
background-color: white;
text-align: center;
font-weight: bold;
transition: All 0.2s ease;
-webkit-transition: All 0.2s ease;
-moz-transition: All 0.2s ease;
-o-transition: All 0.2s ease;
padding-top: 50px;
padding-left: 0px;
padding-right: 40px;
}
#menu a{
padding:0;
text-decoration: none;
font-size: 18px;
color: #25a4cd;
display: block;
transition: 0.3s;
}
#menu.open {
left: 0px;
}
.page_cover.open {
display: block;
}
.page_cover {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
right: 0px;
background-color: rgba(0, 0, 0, 0.4);
z-index: 4;
display: none;
}
#menu ul {
width:190px;
margin:0;
padding:0;
}
#menu ul.nav li {
position:relative;
float:left;
width:100%;
list-style-type:none;
font-size:18px;
}
#menu ul.nav li a {
display:block;
width:100%;
height:100%;
line-height:50px;
text-indent:20px;
text-align: left;
color:#25a4cd;
font-weight:bold;
text-decoration:none;
}
#menu ul.nav li a:hover {
background:#eee;
}
#menu ul.nav li .sub_mobile a {
position:relative;
float:left;
display:block;
width:100%;
z-index:999;
background:#ccc;
}
#menu ul.nav li .sub_mobile a:hover {
background:#787878;
color:#fff;
z-index:999;
}JAVASCRIPT
$(document).ready(function() {
$(".btn").click(function() {
$("#menu,.page_cover,html").addClass("open");
window.location.hash = "#open";
})
})
window.onhashchange = function() {
if (location.hash != "#open") {
$("#menu,.page_cover,html").removeClass("open");
}
};
$(document).ready(function(){
$("#menu ul.sub_mobile").hide();
$("#menu ul.nav li").click(function(){
$("ul",this).slideToggle("fast");
})
})See the Pen Untitled by SE UNG (@codingkinglouis) on CodePen.
그리고 이건 요즘 많이 사용되는 애니메이션방식으로된 햄버거 메뉴입니다
요즘은 짤막하게 나오는 방식보다는 메뉴가 화면을 전체적으로 덮거나 이동하는쪽으로 많이 바뀌었죠
웹페이지의 경우 동적인 애니메이션 효과를 CSS로 활용하는 경우가 많이 늘어나고 있는 추세입니다
해당 버튼도 자바스크립트가 필요없이 CSS로만 이루어져있습니다
HTML
<div class="mobile_btn">
<input type="checkbox" id="hamburger" />
<label for="hamburger">
<span></span>
<span></span>
<span></span>
</label>
<div class="sidebar">
<h2 style="text-align: center; position: relative; top: 75px;"><a href="#">로고</a></h2>
<hr style="position: relative; top:100px; border: solid 1px black;">
<ul class="nav_mobile">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</div>
</div>CSS
a {text-decoration: none;
color: black;}
html,body {width: 100%; overflow-x: hidden; overflow-y: auto;}
* {margin: 0; padding: 0;}
.mobile_btn{
position: absolute;
top:70px;
left: 15px;
}
input[id="hamburger"] {
display: none;
}
input[id="hamburger"] + label {
display: block;
width: 60px;
height: 40px;
position: relative;
cursor: pointer;
}
input[id="hamburger"] + label span {
display: block;
position: absolute;
width: 100%;
height: 5px;
border-radius: 30px;
background: #000;
transition: all 0.35s;
}
input[id="hamburger"] + label span:nth-child(1) {
top: 0;
}
input[id="hamburger"] + label span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
input[id="hamburger"] + label span:nth-child(3) {
bottom: 0;
}
input[id="hamburger"]:checked + label {
z-index: 99;
}
input[id="hamburger"]:checked + label span {
background: black;
}
input[id="hamburger"]:checked + label span:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
input[id="hamburger"]:checked + label span:nth-child(2) {
opacity: 0;
}
input[id="hamburger"]:checked + label span:nth-child(3) {
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}
div[class="sidebar"] {
width: 100%;
height: 100%;
background: white;
position: fixed;
top: 0;
left: -100%;
z-index: 98;
transition: all 0.35s;
}
input[id="hamburger"]:checked + label + div {
left: 0;
}
.nav_mobile {
position: absolute;
top:119px;
width: 100%;
}
.sidebar .nav_mobile li {
color:black;
position:relative;
float:left;
width:100%;
list-style-type:none;
font-size:20px;
border-bottom:1px solid #ccc;
font-family: 'Noto Sans KR';
font-weight:bold;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.sidebar a {
padding: 0;
text-decoration: none;
display: block;
}
.sidebar li a{
display:block;
font-weight:bold;
line-height:40px;
margin:0px;
padding:0;
text-align:center;
text-decoration:none;
transition: all 0.4s;
}
.sidebar li a:hover, .sidebar ul li:hover a {
text-decoration: none;
color: #eee;
padding: 0;
margin: 0;
border: 0px;
}