코드랩 레퍼런스
Parallax - Responsive - Nav 본문
See the Pen Parallax - Responsive Nav by Webstoryboy (@webstoryboy) on CodePen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Nav</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');
/* font-family: 'Lato', sans-serif; */
/* reset */
*{margin:0; padding:0}
li,ul {list-style:none}
a {text-decoration:none}
/* nav */
#nav {
position: fixed; left: 0; top: 0; z-index: 100;
width: 100%; height: 56px;
text-align: center;
transition: top 0.3s ease-in-out;
}
.menu li {
float: left;
width: 16.6666%;
}
.menu li a {
display: block;
background-color:rgba(0,0,0,0.3);
color: #fff;
padding:20px;
text-decoration: none;
text-transform: uppercase;
}
.menu li.active a {
background-color:rgba(0,0,0,0.5)
}
.mNav {
overflow:hidden;
display: none;
background-color:rgba(0,0,0,0.3);
}
.mNav h1 {
float: left;
font-size: 34px; font-weight: 900;
color: #fff;
padding:15px 13px 10px 13px;
}
.mNav .bars {
float: right;
width: 40px;
height: 40px;
position: relative;
cursor: pointer;
margin-right:24px; margin-top:13px;
}
.mNav .bars .bar {
position: absolute;
width: 40px; height: 4px;
background-color: #fff;
margin: 5px 0;
}
.mNav .bars .bar.one {top:0; left;0;}
.mNav .bars .bar.two {top: 10px; left: 0;}
.mNav .bars .bar.three {top: 20px; left: 0;}
/* contents */
#contents {
font-size: 60px;
color:#fff;
text-align: center;
font-family: 'Lato', sans-serif;
}
#contents > div {
height: 100vh; line-height: 100vh;
}
#contents > div h2 {
font-weight: 100;
}
#contents > div h2 strong {
font-weight: 700;
}
/* section */
#section1 {background: radial-gradient(ellipse farthest-corner at center right, #ffee75 0%, #ff8930 100%);}
#section2 {background: radial-gradient(ellipse farthest-corner at center left, #cbf49a 0%, #1ea623 100%);}
#section3 {background: radial-gradient(ellipse farthest-corner at center top, #f8bfa4 0%, #f33b4e 100%);}
#section4 {background: radial-gradient(ellipse farthest-corner at center bottom, #6beace 0%, #2e9aa4 100%);}
#section5 {background: radial-gradient(ellipse farthest-corner at left top, #69d2fb 0%, #20438e 100%);}
#section6 {background: radial-gradient(ellipse farthest-corner at left bottom, #f093fb 0%, #f5576c 100%);}
/* mediaquery */
@media (max-width:960px){
.menu {display: none;}
.menu li {float:none; width:100%; background: rgba(0,0,0,0.1)}
.mNav {display: block;}
}
</style>
</head>
<body>
<nav id="nav">
<div class="mNav">
<h1>WEB'S</h1>
<div class="bars">
<div class="bar one"></div>
<div class="bar two"></div>
<div class="bar three"></div>
</div>
</div>
<ul class="menu">
<li class="active"><a href="#section1">Intro</a></li>
<li><a href="#section2">Skill</a></li>
<li><a href="#section3">Coding</a></li>
<li><a href="#section4">Design</a></li>
<li><a href="#section5">About</a></li>
<li><a href="#section6">Contact</a></li>
</ul>
</nav>
<section id="contents">
<div id="section1">
<div class="container">
<div class="sec1">
<h2>피할수 없으면 <strong>즐겨라</strong></h2>
</div>
</div>
</div>
<div id="section2">
<div class="container">
<div class="sec2">
<h2>삶이 있는 한 <strong>희망</strong>은 있다</h2>
</div>
</div>
</div>
<div id="section3">
<div class="container">
<div class="sec3">
<h2>시간은 <strong>금이다.</strong></h2>
</div>
</div>
</div>
<div id="section4">
<div class="container">
<div class="sec4">
<h2>먼저핀 꽃은 <strong>먼저진다</strong></h2>
</div>
</div>
</div>
<div id="section5">
<div class="container">
<div class="sec5">
<h2>모든 인생은 <strong>실험이다</strong></h2>
</div>
</div>
</div>
<div id="section6">
<div class="container">
<div class="sec6">
<h2>내일은 내일의 <strong>태양이 뜬다</strong></h2>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(".bars").click(function(){
$(".menu").slideToggle();
});
$(window).resize(function(){
var wWidth = $(window).width();
if(wWidth > 400 && $(".menu").is(":hidden")){
$(".menu").removeAttr("style");
}
});
var menu = $(".menu li");
var contents = $("#contents > div");
menu.click(function(e){
e.preventDefault();
var target = $(this);
var index = target.index();
var section = contents.eq(index);
var offset = section.offset().top;
$("html,body").animate({scrollTop:offset},600,"easeInOutExpo");
});
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
if(wScroll >= contents.eq(0).offset().top){
menu.removeClass("active");
menu.eq(0).addClass("active");
}
if(wScroll >= contents.eq(1).offset().top){
menu.removeClass("active");
menu.eq(1).addClass("active");
}
if(wScroll >= contents.eq(2).offset().top){
menu.removeClass("active");
menu.eq(2).addClass("active");
}
if(wScroll >= contents.eq(3).offset().top){
menu.removeClass("active");
menu.eq(3).addClass("active");
}
if(wScroll >= contents.eq(4).offset().top){
menu.removeClass("active");
menu.eq(4).addClass("active");
}
if(wScroll >= contents.eq(5).offset().top){
menu.removeClass("active");
menu.eq(5).addClass("active");
}
});
</script>
</body>
</html>
Share
Ad
Comments