- 속성 조정 메서드
<body>
<div class="container">
<nav class="nav">
<ul class="gnb">
<li>
<div class="main">
<strong>HTML5/CSS3</strong>
<button type="button" class="open">
<i class="blind">메뉴열기</i>
<span></span>
<span></span>
</button>
</div>
<div class="lnb">
<ul class="sub">
<li><a href="#">HTML5/CSS3</a></li>
<li><a href="#">HTML5/CSS3</a></li>
<li><a href="#">HTML5/CSS3</a></li>
<li><a href="#">HTML5/CSS3</a></li>
</ul>
</div>
</li>
<li>
<div class="main">
<strong>JAVASCRIPT</strong>
<button type="button" class="open">
<i class="blind">메뉴열기</i>
<span></span>
<span></span>
</button>
</div>
<div class="lnb">
<ul class="sub">
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">JAVASCRIPT</a></li>
</ul>
</div>
</li>
<li>
<div class="main">
<strong>Jquery</strong>
<button type="button" class="open">
<i class="blind">메뉴열기</i>
<span></span>
<span></span>
</button>
</div>
<div class="lnb">
<ul class="sub">
<li><a href="#">Jquery</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">Jquery</a></li>
</ul>
</div>
</li>
<li>
<div class="main">
<strong>Figma</strong>
<button type="button" class="open">
<i class="blind">메뉴열기</i>
<span></span>
<span></span>
</button>
</div>
<div class="lnb">
<ul class="sub">
<li><a href="#">Figma</a></li>
<li><a href="#">Figma</a></li>
<li><a href="#">Figma</a></li>
<li><a href="#">Figma</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</body>
자바를 사용해서 진행하였던 부분을 제이쿼리를 사용해 간단하게 행동을 넣어줄 수 있다.
<style>
*{
margin: 0; padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: inherit;
}
ul{
list-style: none;
}
button{
border: 0; outline: 0;
background: transparent;
}
strong{
display: inline-block;
font-weight: 400;
}
.blind{
position: absolute; width: 1px; height: 1px;
margin: -1px; overflow: hidden;
clip: rect(0,0,0,0);
}
.container{
padding: 200px;
}
.nav{
width: 200px;
border: 1px dodgerblue dotted;
}
.main{
position: relative;
cursor: pointer;
height: 35px; line-height: 35px;
background: rgb(117,175,0); color: #fff;
text-indent: 10px;
border-bottom: 1px solid rgb(83, 124, 0);
}
.lnb{
background: #fff;
padding: 10px;
display: none;
}
.lnb a{
display: block;
color: inherit;
padding: 5px;
}
.open{
position: absolute;
width: 16px; height: 16px;
/* border: 1px dotted red; */
right: 10px; top:7px;
}
.open>span{
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: #fff;
}
.open>span+span{
transform: rotate(90deg);
transition: 0.3s;
}
.main.on{
background: rgb(83, 124, 0);
}
.main.on .open>span+span{
transform: translate(0deg); opacity: 0;
}
</style>
css를 잡아주고
<script>
$(function(){
$(".main").click(function(){
$(".main").removeClass("on"); //모든 css를 빼주고 (리셋과정)
$(".lnb").slideUp(100); //펼쳐져 있는 lnb를 닫아준다. 인터프린터 방식이기 때문에 순서에 맞게 먼저 기입해준다. 숫자를 넣어서 속도를 조절해줄 수도 있다.
$(this).addClass("on");
$(this).next().stop().slideDown()//next는 나의 형제(동생)선택자 stop은 사용자가 여러번 눌러도 하나만 들어가도록 slideDown은 펼쳐지도록 하는것
});
})
</script>
실행전에는 반드시 제이쿼리를 연결해주어야 하고 document 를 선언하지 않고 주로 $를 사용해서 선언하며 해당 되는 클래스나 함수를 넣을수도 있고 실행식을 넣을 수도 있다. 자바스크립트에서는 forEach를 사용해 넣었다 뺏다 해주었지만 제이쿼리에서는 자동으로 해당 식이 적용되어서 손쉽게 메뉴들을 열고 닫아줄수 있다. if 구문을 사용해서도 만들수가 있다
<script>
$(function(){
$(".main").click(function(){
if($(this).hasClass("on")){//.main에 클래스가 있으면 클래스를 빼고 서브메뉴를 close
$(".main").removeClass("on")
$(".lnb").stop().slideUp();
}else{//.main에 클래스가 없으면 클래스를 넣고 서브메뉴를 open
$(".main").removeClass("on")
$(".lnb").stop().slideUp();
$(this).addClass("on");
$(this).next().stop().slideDown();
}
});
})
</script>
if구문을 사용해서도 넣어줄수 있는데 자바를 사용하게 되면 길어지는 구문이 짧게 적용되는것을 알수 있다. 또한 메인으로 if를 지정하지 않고 누른 해당 변수인 this로 넣어주면 열렸다 닫혔다 할 수 있다.
.nav{
width: 20%;
max-width: 200px;
position: fixed;
left: -100%; top: 0;
height: 100%;
background: #eaeaea;
/* border: 1px dodgerblue dotted; */
transition: left 0.3s;
}
.nav.active{
left: 0%;
}
네비를 왼쪽 끝으로 넣어서 가려주고 transtion으로 중간단계를 만들어준다. 그리고 active라는 임의의 css를 지정하여 left 0% 으로 넣어서 나오도록 만들어준다. 그리고 제이쿼리를 사용해 active가 실행되도록 해준다.
$(".ham-menu button").click(function(){
$(".nav").toggleClass("active")
})
toggle을 사용해 넣었다 뺏다 하도록 하여 설정이 가능하다.
- 수치 조정 메서드