728x90
반응형
▶ 네비게이션을 닷메뉴 형태로 변경
html 마크업
css reset
#contents css 편집
각 article 배경색 넣기
article 한번에 편집
#header css 편집
#dot - ul(menu) css 편집
fixed 시키고 위치 변경하기
.li css 편집
menu 1-6 글자 지우기
parallax 적용
script
dot 클릭하면 해당페이지로 움직이게 하기
스크롤 좌표 알아보기
페이지별 dot이 활성화되면서 해당페이지로 이동한다.
<html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>네비게이션을 닷메뉴 형태로 변경</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header id="header">
<h1>C's Web</h1>
</header>
<nav id="dot">
<ul>
<li class="active"><a href="#"><em>menu1</em></a></li>
<li><a href="#"><em>menu2</em></a></li>
<li><a href="#"><em>menu3</em></a></li>
<li><a href="#"><em>menu4</em></a></li>
<li><a href="#"><em>menu5</em></a></li>
<li><a href="#"><em>menu6</em></a></li>
</ul>
</nav>
<section id="contents">
<article id="article1"><h2>언어의 한계가 곧 자기세계의 한계다.</h2></article>
<article id="article2"><h2>교육은 최상의 노후대비책이다.</h2></article>
<article id="article3"><h2>용기란 공포를 1분 더 참는 것이다.</h2></article>
<article id="article4"><h2>욕망은 이성의 지배하에 두어라</h2></article>
<article id="article5"><h2>교육의 위대한 목표는 앎이 아니라 행동이다.</h2></article>
<article id="article6"><h2>계획 없는 목표는 한낱 꿈에 불과하다.</h2></article>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
const dot = $("#dot > ul > li");
const cont = $("#contents > article");
dot.click(function(e){
e.preventDefault();
let target = $(this);
let index = target.index();
let section = cont.eq(index);
let offset = section.offset().top;
$("html,body").animate({scrollTop:offset},600);
});
$(window).scroll(function(){
let wScroll = $(this).scrollTop();
console.log(wScroll);
if(wScroll >= cont.eq(0).offset().top){
dot.removeClass("active");
dot.eq(0).addClass("active")
}
if(wScroll >= cont.eq(1).offset().top){
dot.removeClass("active");
dot.eq(1).addClass("active")
}
if(wScroll >= cont.eq(2).offset().top){
dot.removeClass("active");
dot.eq(2).addClass("active")
}
if(wScroll >= cont.eq(3).offset().top){
dot.removeClass("active");
dot.eq(3).addClass("active")
}
if(wScroll >= cont.eq(4).offset().top){
dot.removeClass("active");
dot.eq(4).addClass("active")
}
if(wScroll >= cont.eq(5).offset().top){
dot.removeClass("active");
dot.eq(5).addClass("active")
}
if(wScroll >= cont.eq(6).offset().top){
dot.removeClass("active");
dot.eq(6).addClass("active")
}
});
</script>
</body>
</html><css>
@charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
color: #222;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}
.clearfix::before,.clearfix::after{
display: block;
clear: both;
content: "";
}
#header{
position: fixed;
width: 100%;
height: 60px;
background-color: rgba(255, 255, 255, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
#header h1{color: yellowgreen;}
#dot{
position: fixed;
top: 50%;
right: 20px;
/* translate로 중앙으로 위치 배정 */
transform: translateY(-50%);
}
#dot ul{}
#dot ul li{
margin: 8px;
}
#dot ul li a{
display: block;
width: 20px;
height: 20px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
}
#dot ul li a em{
/* 글자 지우기 */
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
#dot ul li.active{}
#dot ul li.active a{
background-color: #fff;
}
#contents{
text-align: center;
}
#contents > article{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#contents > article > h2{
font-size: 5vw;
color: #fff;
}
#article1{background-color: lightblue;}
#article2{background-color: lightgreen;}
#article3{background-color: lightsalmon;}
#article4{background-color: lightcoral;}
#article5{background-color: lemonchiffon;}
#article6{background-color: lavenderblush;}728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 65_파노라마 회사 소개 (0) | 2023.07.05 |
|---|---|
| 비주얼 스튜디오 코드 64_ 하이시네마 웹페이지 03 (0) | 2023.07.05 |
| 비주얼 스튜디오 코드 62_ 하이시네마 웹사이트 만들기 02 (0) | 2023.07.04 |
| 비주얼 스튜디오 코드 61 _ 비교연산자 (0) | 2023.07.04 |
| 비주얼 스튜디오 코드 60_ parallax 06 (0) | 2023.07.04 |