풀페이지 소스 - 네비게이션 버튼 수정
본문
현재 위의 풀페이지 소스를 활용해서 작업을 진행하고 있습니다.
근데 네비게이션 디자인을 각 섹션마다 색상을 바꿔주고 싶은데,
어떻게 클래스를 추가해서 컨트롤을 할 수 있는지 모르겠습니다.
예를들어 첫번째 섹션에서는 네비게이션이 블랙이면, 2번째 섹션에서는 화이트로 가고 싶습니다.
어떻게 자바스크립트를 작성해야 가능할까요?
답변 2
//풀페이지 옵션에 afterLoad를 넣으셔서 하시면 됩니다.
new fullpage('#fullpage',
{
afterLoad: function(origin, destination, direction){
jQuery("#infoMenu"),removeAttr('class').attr('class', '');
jQuery("#infoMenu").addClass("infoMenu"+origin.index); //해당 섹션 index 0 부터
}
});
css 로 내용을 정의해 놓으시면 됩니다.
<style>
#infoMenu.infoMenu0{}
#infoMenu.infoMenu1{}
...
</style>
afterLoad: function(origin){
if(origin.anchor == 'one'){
jQuery("#fp-nav").addClass("nav_green");
}
}
이렇게 응용했어용 ㅋㅋ 고맙습니다.
onLeave: function(origin, destination, direction){
/* onLeave는 해당 섹션을 떠나는 도중에 실행. afterLoad는 떠나고 나서 실행. */
/*지정한 앵커명에 따라서 클래스를 추가. 특정 섹션마다 디자인 변경 가능*/
if(origin.anchor == 'one'){ /* 앵커 one을 떠나는 도중에 클래스를 추가하라. */
$("#fp-nav").addClass("nav_green");
} else if(destination.index == 0) { /* 목적지가 인덱스 0인 경우 클래스를 지워라 */
$("#fp-nav").removeClass("nav_green");
}
}
이렇게 다시 수정!
오 멋지십니다 ^^b
css 중 :nth-child() 선택자를 이용하시면 충분히 가능합니다.
구글링 하셔서 어떤 역활을 하는지 알아보시고 사용해보세요.
