안드로이드는 전자양의 꿈을 꾸는가

제이쿼리 스크롤메뉴

jQuery 2017. 8. 29. 20:30

예제1)

1) jquery.easing.1.3.min.js

2) scroll_menu.js

$(function(){

var menu = $('#top_menu > ul > li');

var contents = $('#contents > div');

menu.click(function(event){

event.preventDefault();

var tg = $(this);

var i = tg.index();

var section = contents.eq(i);

var tt = section.offset().top;

$('html, body').stop().animate({scrollTop:tt});

});

$(window).scroll(function(){

var sct = $(window).scrollTop();

contents.each(function(){

var tg = $(this);

var i = tg.index();

if(tg.offset().top <= sct){

menu.removeClass('on');

menu.eq(i).addClass('on');

}

});

3) scroll_menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>scroll_menu</title>

<style>

* { margin:0; padding:0; }

body { background: #545454; }

.wrap { width:950px; margin:0 auto; padding-bottom:400px; }

#top_menu { position: fixed; width:950px; height:114px; margin:0 auto; text-align:center; top:0px; background: #545454; }

#top_menu ul {float:right; margin-right:33px;}

#top_menu ul li { padding:59px 0px 0px 63px; float:left; list-style: none; color: #CCCCCC; }

#top_menu ul li a { color:#fff; text-decoration:none; background:url(./img/icon.png) no-repeat 0 0; width:100px; padding:20px 0; display:inline-block;}

#top_menu ul li a span{

display:none;

}

#top_menu ul li.on a { color:#000; font-weight:bold; background:url(./img/icon.png) no-repeat -100px 0;}

#logo {float:left; width:125px; padding-top:40px; color:#FFFFFF;}

#contents {}

#contents div {padding-top:114px;}

#s01 {width:100%; height:650px;background:#00BAFF;}

#s02 {width:100%; height:650px; background:#00BAFF;}

#s03 {width:100%; height:700px;background:#FFE200; }

</style>

</head>

<body>

</div>

<ul>

</ul>

</div>

</div>

</div>

</body>

</html>

연습)

1) style.css

*{margin:0;padding:0;box-sizing:border-box;}

ol,ul{list-style:none;}

body{font-size:1em;color:#000;font-family:맑은고딕;}

a{font-size:0.8em;color:#333;font-family:맑은고딕;text-decoration:none;}

html,body,main{height:100%;}

header{width:100%;height:100px;border:3px solid red;position:fixed;background:#fff;}

header div.inner{width:80%;margin:0 auto;height:100%;border:3px solid green;}

header div.inner h1{border:1px solid pink;text-align:center;}

header div.inner nav{border:1px solid yellow;}

header div.inner ul{border:1px solid cyan;text-align:center;}

header div.inner li{border:1px solid green;display:inline;}

header div.inner nav ul li a span{display:none;}

header div.inner nav ul li a{

border:1px solid cyan;

width:50px;

height:50px;

display:inline-block;

background:url(./img/menu.png) no-repeat 0 0;

}

header div.inner nav ul li.on a{

border:1px solid cyan;

width:50px;

height:50px;

display:inline-block;

background:url(./img/menu.png) no-repeat -50px 0;

}

#contents{border:0 solid blue;padding-top:100px;height:5000px;}

#s01{width:100%;height:100%;background:#333;}

#s02{width:100%;height:200%;background:#666;}

#s03{width:100%;height:1500px;background:#999;}

#s04{width:100%;height:150%;background:#888;}

#s05{width:100%;height:50%;background:#000;}

2) scroll_menu.js

$(function(){

var menu = $('header div.inner > nav > ul > li');

var contents = $('#contents > section');

menu.click(function(event){

event.preventDefault();

var tg = $(this);

var i = tg.index();

var section = contents.eq(i);

var tt = section.offset().top;

$('html, body').stop().animate({scrollTop:tt});

});

$(window).scroll(function(){

var sct = $(window).scrollTop();

contents.each(function(){

var tg = $(this);

var i = tg.index();

if(tg.offset().top <= sct){

menu.removeClass('on');

menu.eq(i).addClass('on');

}

});

3) study.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<nav>

<ul>

</ul>

</nav>

</div>

</header>

</section>

</body>

</html>

저작자표시

'jQuery' 카테고리의 다른 글

오늘부터 마감일까지의 날짜 일수 계산 카운트 (0)	2018.01.30
J쿼리의 메서드: size(), eq(), first()/last(), index(), not(), filter(), slice(), has(), each() (0)	2017.09.05
2. 제이쿼리 문법 기초: attr(), 클래스명 바꾸기 (0)	2017.08.24
1. 제이쿼리 문법 기초 (0)	2017.08.24
Ajax: serialize(), serializeArray() (0)	2016.03.22