<!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>예제</title>
<script src="https://kit.fontawesome.com/4bb639362a.js" crossorigin="anonymous"></script>
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('.icon-menu').click(function(){
$('.side').stop().animate({left:'0px'},1000)
})
$('.icon-close').click(function(){
$('.side').stop().animate({left:'-200px'},1000);
})
})
</script>
<style>
*{margin: 0; padding: 0; text-decoration: none; color: black;}
.box{
position: relative;}
.menubar{
border: 1px solid red; height: 50px;}
.icon-menu{
font-size: 40px; border: 1px solid blue; width: 50px;
text-align: center; height: 50px; line-height: 48px; box-sizing: border-box;
position: absolute; right: 0; top: 1;}
.side{
border: 1px solid blue; width: 200px; height: 400px; position: relative;
left: -200px; box-sizing: border-box; top: 1px;}
.icon-close{
border: 1px solid blue; width: 30px; height: 30px; font-size: 25px;
text-align: center; line-height: 28px; position: absolute; right: 0; top: 0;}
.icon{color: blue;}
.icon-close:hover, .icon-menu:hover{cursor: pointer;}
</style>
</head>
<body>
<div class="box">
<div class="menubar">
<div class="icon-menu"><i class="fas fa-bars icon"></i></div>
</div>
<nav class="side">
<div class="icon-close"><i class="fas fa-times icon"></i></nav>
</div>
</div>
</body>
</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>햄버거 메뉴</title>
<script src="https://kit.fontawesome.com/4bb639362a.js" crossorigin="anonymous"></script>
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('.ham-menu').click(function(){
$('.menu-box').stop().animate({'margin-left':'0'},1000);
})
$('.btn-close').click(function(){
$('.menu-box').stop().animate({'margin-left':'-200px'},1000)
})
})
</script>
<style>
*{padding: 0; margin: 0; color: black; text-decoration: none;
list-style: none;}
nav{
height: 50px; background: lightcoral; position: relative;}
.ham-menu{
width: 50px; height: 50px; box-sizing: border-box; border: 1px solid lightcoral;
position: absolute; top: 0; right: 0; text-align: center; line-height: 48px;
font-size: 40px; cursor: pointer;}
.ham-menu:hover{
border-color: yellow;}
.container{
position: relative; height: 400px; background: lightseagreen; margin-top: 10px;}
.menu-box{
width: 200px; height: 400px; position: absolute; top: 0; left: 0; background: lightskyblue;
margin-left: -200px;}
.btn-close{
width: 30px; height: 30px; cursor: pointer; position: absolute; right: 0; top: 0;
text-align: center; line-height: 30px;}
</style>
</head>
<body>
<nav>
<div class="ham-menu">
<i class="fas fa-bars"></i>
</div>
</nav>
<div class="container">
<div class="menu-box">
<div class="btn-close">
<i class="fas fa-times"></i>
</div>
</div>
</div>
</body>
</html>'괴발개발 > Javascript+JQuery' 카테고리의 다른 글
| JQ_checkbox 선택을 나열(표시)하기 (0) | 2021.06.23 |
|---|---|
| JQ_radio(성별선택) (0) | 2021.06.23 |
| JQ_요소추가하기(append, prepend, appendTo, prependTo) (0) | 2021.06.23 |
| JQ_메뉴기능(네이버 오늘읽을만한글 ) (0) | 2021.06.23 |
| JQ_요소의 속성정보 가져오기(attr), 설정하기(prop) (0) | 2021.06.23 |