728x90
반응형
html 마크업
css 편집
사이드 메뉴 스타일 지정
open 버튼 만들기
클릭이벤트
액티브 이벤트
open 단추 활성화하기
사이드 네비게이션 숨겨져 있을 때 open 버튼 클릭하면 나타나게 하기
open 클래스와 nav가 만나게 해야한다.
스르륵 open 되기 위해서 시간을 더해주면 된다.
하지만 .css 는 open만 되고 닫히지 않는다.
.toggleClass("Open"); 을 한다.
만약에 open이라는 클래스를 갖고 있을 때와 안 갖고 있을 때
if문 : 모든 조건을 다 수용할 수 있다.
● hasClass("open"): 가지고 있으면 참, 그렇지 않으면 거짓 >> 유무에 따라 참, 거짓을 구별하는 메서드
●text("Close") : 원래 값은 지우고 "Close"로 대치하라는 메서드
<html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<nav id="side_nav">
<h1>Website</h1>
<ul>
<li class="active"><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
<li><a href="#">메뉴5</a></li>
<li><a href="#">메뉴6</a></li>
</ul>
<a href="#" class="navBtn">Open</a>
</nav>
<section id="contents">
<article id="article1">
<h2>피할 수 없으면 <strong>즐겨라</strong></h2>
</article>
<article id="article2">
<h2>삶이 있는 한 <strong>희망</strong>은 있다.</h2>
</article>
<article id="article3">
<h2>시간은 <strong>금이다</strong></h2>
</article>
<article id="article4">
<h2>먼저 핀 꽃은 <strong class="blue">먼저 진다.</strong></h2>
</article>
<article id="article5">
<h2>피할 수 없으면 <strong class="blue">즐겨라</strong></h2>
</article>
<article id="article6">
<h2>피할 수 없으면 <strong class="blue">즐겨라</strong></h2>
</article>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
const nav = $("#side_nav > ul > li");
const cont = $("#contents > article");
// 클릭이벤트 : 클릭했을 때 각 페이지에 링크되도록 함
nav.click(function(event){
event.preventDefault();
let target = $(this);
let index = target.index();
let section = cont.eq(index);
let offset = section.offset().top
$("html").animate({scrollTop:offset},600);
});
// active 가 각 페이지에 클릭했을 때 활성화하기
$(window).scroll(function(){
let wScroll = $(this).scrollTop();
// console.log(wScroll)
if(wScroll >= cont.eq(0).offset().top){
nav.removeClass("active");
nav.eq(0).addClass("active");
}
if(wScroll >= cont.eq(1).offset().top){
nav.removeClass("active");
nav.eq(1).addClass("active");
}
if(wScroll >= cont.eq(2).offset().top){
nav.removeClass("active");
nav.eq(2).addClass("active");
}
if(wScroll >= cont.eq(3).offset().top){
nav.removeClass("active");
nav.eq(3).addClass("active");
}
if(wScroll >= cont.eq(4).offset().top){
nav.removeClass("active");
nav.eq(4).addClass("active");
}
if(wScroll >= cont.eq(5).offset().top){
nav.removeClass("active");
nav.eq(5).addClass("active");
}
});
// navBtn 을 클릭했을 때
$(".navBtn").click(function(e){
e.preventDefault();
// $("#side_nav").css("left","0");
$("#side_nav").toggleClass("Open");
// open 을 눌렀을 때 사이드 네비게이션이 나온다.
if($("#side_nav").hasClass("Open")){
// 참
$(".navBtn").text("Close");
// open이라는 글자를 가지고 있으면 Close로 변경하고
} else{
// 거짓
$(".navBtn").text("Open")
// 가지고 있지 않으면 그대로 open.
}
});
// text("Close") : 원래 값은 지우고 "Close"로 대치하라는 메서드
// hasClass("open"): 가지고 있으면 참, 그렇지 않으면 거짓 >> 유무에 따라 참, 거짓을 구별하는 메서드
</script>
</body>
</html>
<css>
@charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}
.clearfix::before,
.clearfix::after{
content: "";
display: block;
clear: both;
}
img{
display: block;
}
em{
font-style: normal;
}
/* side_nav */
#side_nav{
/* 사이드 네비게이션 */
width: 300px;
height: 100vh;
background-color: rgba(255,255,255,0.3);
position: fixed;
/* nav 감추어주기(-300px) */
left: -300px;
transition: all 0.5s;
}
#side_nav.Open{
left: 0px;
}
#side_nav h1{
font-size: 40px;
color: #fff;
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 1px 1px darkblue;
}
#side_nav ul{}
#side_nav ul li{
}
#side_nav ul li a{
/* 메뉴 크기지정 */
display: block;
text-align: center;
font-size: 18px;
padding: 5px 10px;
color: #fff;
text-shadow: 1px 1px 2px #000;
}
#side_nav ul li.active{
/* 마우스 오버, 클릭 시 활성화 되는 칸 */
background-color: rgba(255,255,255,0.5);
border-left: 5px solid red;
}
#side_nav .navBtn{
width: 50px;
height: 50px;
background-color: rgba(255,255,255,0.5);
display: block;
border-radius: 50%;
text-align: center;
line-height: 45px;
color: orange;
font-weight: bold;
/* 이동하기 */
position: absolute;
/* width값이 50px이기 때문에 -10px만큼 가려면 -60px이다 */
right: -60px;
top: 10px;
box-shadow: 2px 0px 5px orangered;
}
#contents{
text-align: center;
}
#contents > article{
width: 100%;
height: 100vh;
line-height: 100vh;
}
#contents > article > h2{
font-size: 6vh;
}
#contents > article > h2 > strong{
font-weight: bold;
color: red;
}
#contents > article > h2 > strong.blue{
color: blue;
}
#article1{
background-color: #69d2fb;
}
#article2{
background-color: #f2606f;
}
#article3{
background-color: #ff8930;
}
#article4{
background-color: #1ea623;
}
#article5{
background-color: #38a7aa;
}
#article6{
background-color: #6bdace;
}
728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
[JAVASCRIPT]5.클래스 제어하기 (0) | 2023.06.29 |
---|---|
비주얼 스튜디오 코드 54_자식 요소의 순서를 지정하자 (0) | 2023.06.29 |
비주얼 스튜디오 코드 52_웹 표준)갤러리 이미지 넣기 (0) | 2023.06.28 |
비주얼 스튜디오 코드 51_ 햄버거 메뉴 (0) | 2023.06.27 |
비주얼 스튜디오 코드 50 _ Parallax02 (0) | 2023.06.27 |