페이지 이동시 메뉴에 표시하기

페이지 이동시 메뉴 처리하는 스크립트를 작성해 보도록 합시다.

어떠한 UI 를 예로 들수 있냐면

한국닌텐도

http://www.nintendo.co.kr/3DS/intro/3DSXL_intro.php

입니다.

페이지를 누르면 페이지 이동이 되면서

해당 페이지를 보고있다. 라는걸 알수있죠.

...

이런걸 UI 라고 하나...? 어쨌든!

하지만 스크립트와 제이쿼리로 저런걸 어떻게 만들 수 있을까요?

대략 폴더 구성부터 짜봅니다.

특별한게 아니라면

보통은 이럴꺼라 생각이 드네요.

css,js,img 는 일반적으로 다들 있는거겠고..

company, event, games 라는 서브 파일을 넣는 폴더를 생성했습니다.

company 폴더에는 sub1.html

event 폴더에는 sub2.html

games 폴더에는 sub3.html

을 만들어서 넣어주었구요.

여기까지의 작업을 첨부해 두겠습니다.

예제파일

site.zip

자 그러면

먼저 스타일 부터 잡아보도록 하겠습니다.

경로는 css 폴더 안의 common.css 파일 입니다.

@charset "utf-8";

a{color: #000;text-decoration: none;}
a.on{color: #eeb060;font-weight: bold;}

간단하게 a 태그 의 기본 컬러는 검은색이고

a 태그에 on 이라는 클래스가 붙으면 색은 주황색에, 글씨 굵기는 굵게.

이걸 브라우저에서 테스트 해볼려면

만들어 보거나

관리자 도구로 클래스를 강제적으로 집어 넣는 수밖에 없겠죠?

이제 스크립트를 짜봅시다.

경로는 js 폴더 안의 common.js 입니다.

$(function(){
    var subPage = new Array;
    subPage[0] = "company";
    subPage[1] = "event";
    subPage[2] = "games";
    var url = location.href;
    var getAr0 = url.indexOf(subPage[0]);
    var getAr1 = url.indexOf(subPage[1]);
    var getAr2 = url.indexOf(subPage[2]);
    if(getAr0 != -1){
        $("li:eq(1) a").addClass("on")
    };
    if(getAr1 != -1){
        $("li:eq(2) a").addClass("on")
    };
    if(getAr2 != -1){
        $("li:eq(3) a").addClass("on")
    };
});

2번 라인부터~

일단 subPage 라는 배열 하나를 만들어 줍니다.

배열의 첫번째 에는 company 라는 단어가 들어 있구요.

두번째 에는 event 라는 단어가

세번째 에는 games 라는 단어가 들어 있습니다.

6번째 라인에는 url 이라는 변수를 하나 만드렁 놨구요.

이 url 이라는 변수에는 현재 페이지의 주소값을 가져옵니다.

7번 라인에는 변수 getAr0 에 현재 가져온 주소값의 에서 해당 단어를 찾아냅니다.

8, 9 도 마찬가지 입니다.

만약에 찾아오면 양수의 어떤 숫자가 해당 변수에 담길 것이고

못찾으면 무조건 -1 이 해당 변수에 담김니다.

10번 라인에는 조건이 붙죠. xxx 이라는 변수가 -1 이 아닌경우!

두번째 li 안의 a 태그에 클래스 on을 넣어라.

이렇게 이프문의 갯수만큼 돕니다.

아니라면 실행을 안하겠죠?

결과는?

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

site(최종).zip

간단하긴 하죠?

하지만 이게 정답인지 어떤지는 저는 잘 모르고

코딩하는 스타일 마다 다르니깐요!

스크립트, 제이쿼리 로는 이렇게 처리할 수 있다. 라는 정도로만 아시면 될꺼 같아요.

이게 서버단에서 이런 작업을 한다면

마크업이 살짝 간결해 집니다.