웹마스터 팁

메뉴에서 페이지 인식 하는 방법은 몇가지가 있지만 이번 소개하는 페이지는 css를 사용해서 페이지를 인식하는 방법입니다.


메뉴의 수에 따라 페이지 수도 늘어 나지만 이번 예제에서는 3개의 페이지를 만들어 사용해 보겠습니다.


sample1.html, sample2.html, sample3.html 이렇게 총 3개의 페이지를 만듭니다.



공통 css에 들어갈 부분입니다.(style.css 로 파일명을 지정 하겠습니다.)


>> 페이지 인식을 위한 부분 - 메뉴별로 페이지 인식을 가능하게 하는 css 소스입니다.


#sample1 #menu_example a.menu1, #sample2 #menu_example a.menu2, #sample3 #menu_example a.menu3{

padding-bottom:10px; /* 여백은 레이아웃에 따라 적절하게 설정해 주세요 */

border-bottom:5px solid #ff3300;/* 레이아웃에 따라 적절하게 설정해 주세요 */

color:#FFF; 

}



>> 메뉴 스타일은 자신의 디자인에 맞게 설정해 주시면 됩니다.


#menu_example{

padding:20px;

}

#menu_example a{

display:block; /* a태그의 display속성을 block으로 설정 */

padding:10px 10px 15px 10px; 

margin-right:1px; 

background-color:#292929;

color:#BBB; 

font:12px Verdana; 

       float:left;

}

#menu_example a:hover{

padding-bottom:10px;

border-bottom:5px solid #ff9900;

color:#FFF; 

}

------- 여기까지가 style.css 파일에 들어갈 부분입니다.-------------



다음으로 각 sample 페이지에 입력해야할 소스입니다.

예로 sample1.html 페이지를 들어보겠습니다.


<html>

<head>

<link rel="stylesheet" media="screen" href="style.css" type="text/css" />

</head>

<body id="sample1"> <!-- sample2.html 파일일 경우 id="sample2"   와 같이 각각의 페이지에 body id를 맞게 지정해 줍니다.-->


<div id="menu_example">

  <a href="sample1.html" title="메뉴1로 이동" class="menu1">menu 1</a>

  <a href="sample2.html" title="메뉴2로 이동" class="menu2">menu 2</a>

  <a href="sample3.html" title="메뉴3로 이동" class="menu3">menu 3</a>

</div><!--//menu-->


</body>

</html>


이외의 css 설정에 관련된 부분은 이 곳 게시판에 잘 정리 되어 있기 때문에 관련 소스를 참조해 주세요 ^^

제목 글쓴이 날짜
[게시판] 이미존재하는 모듈이름 입니다. 오류. [2] 나이스가이212 2008.08.21
로그인 문제 및 첨부파일 안올라가는 문제 해결책(세션 문제일 경우..) [6] file 이홍석295 2008.08.20
한글로 된 이미지 문제 [17] Defy 2008.08.19
[초보팁] 우리말 수정하기(예제: 가입창 이름란 삭제) [3] 블루파티 2008.08.19
인용구 접기기능 링크이름 Underline 없애기 [4] file 똑디 2008.08.19
zbxe에 bgm을 설치하자 [11] file 우리아기 2008.08.16
이미지 좌측 정렬시 내용이 적으면 아래부분 올라오는 문제 해결법 [2] file 대류 2008.08.16
미국 yahoo zbxe 설치 및 mysql 연결 [4] mr007 2008.08.15
zbxe에서 piclens 사용하기 [2] 우정진 2008.08.15
권한 문제 때문에 생길 수 있는 문제 해결 방안 꽃들 2008.08.14
rewrite mod 사용 않될 경우 해결 방법 1가지 블루스카이77 2008.08.13
렙업시 소속그룹 없어지는 문제! 얍실하게 해결.. 쿨럭. [2] file 이슈카ㆀ 2008.08.12
댓글 첨부파일부분 닫기/열기 추가 [1] file Gnee 2008.08.09
오픈 아이디(OpenID)로만 로그인 허용하기 [7] withover.com 2008.08.07
설치시 초기화면으로 돌아가는 현상 해결 [1] spk 2008.08.07
닉네임, 이름 정보변경 못하게 하기. [6] 부엉이 2008.08.06
첨부화일 등록시 사라지는 현상 [2] 0라이트0 2008.08.05
TRAC과 SVN을 참조하여 1.0.5의 애드온 설정 버그 해결하기 Adios 2008.08.04
제로보드 문자열 정교하게 자르기 [11] 젝망치 2008.08.03
1원팁) 톱메뉴를 제거하고 왼쪽 서브메뉴만 출력하는 방법 [2] file Gnee 2008.08.02