대 메뉴별로 스타일을 다르게 줄려고 합니다. 타이틀 백그라운드 이미지를 다르게.. 채택완료
http://bbuldduk.com/sub/sub_01_01.php">http://bbuldduk.com/sub/sub_01_01.php
http://bbuldduk.com/bbs/board.php?bo_table=03_01">http://bbuldduk.com/bbs/board.php?bo_table=03_01
http://bbuldduk.com/sub/sub_04_01.php">http://bbuldduk.com/sub/sub_04_01.php
http://bbuldduk.com/bbs/board.php?bo_table=02_01">http://bbuldduk.com/bbs/board.php?bo_table=02_01
상단에 이렇게 4가지 대메뉴가 있습니다. 4개의 대메뉴에 또 서브메뉴가 2~4개씩 들어 있습니다.
대메뉴마다 다르게 상단 타이틀에 4가지의 백그라운드 스타일을 주려고 합니다.
지금현재 모든 페이지가 이렇게 id와 class로 구성되어있습니다.
<div id="sub_area" class="bd_area" >
<div class="top_area"> <=백그라운드 들어가는 부분
<div class="title">
<h1>메뉴안내</h1>
<p>맛있는 뻘떡낙지의 메뉴들을 소개합니다.</p>
</div><!-- //end. title -->
<div class="tnb">
<table width="1060px" height="50px" border="0" cellspacing="0" cellpadding="0" align="center" class="tabmenu">
<tr align="center">
<td width='25%' class="here1"><a href="../bbs/board.php?bo_table=03_01">볶음류</a></td>
<td width='25%' class=""><a href="../bbs/board.php?bo_table=03_02">탕류</a></td>
<td width='25%' class=""><a href="../bbs/board.php?bo_table=03_03">식사류</a></td>
<td width='25%' class=""><a href="../bbs/board.php?bo_table=03_04">기타</a></td>
</tr>
</table>
</div><!-- //end. tnb -->
</div>
<!-- //end.to
11개의 01_01 / 01_02 / 02_01 ~ 04_03 / 04_04.php 가 있습니다.
쉽게 아무것도 생각안하고 11개의 페이지마다 style을 줘도 무방합니다.
하지만 단순하게 보단 최대한 효율적으로 4개의 대메뉴에
각각 다르게 타이틀 4종류의 백그라운드를 바꿀수 있는 css가 어떻게 들어가는지 궁금합니다.
답변 1개
하나의 GNB만 인크루드 할 경우
.type01 (백그라운드)
.type02 (백그라운드)
.type03 (백그라운드)
.type04 (백그라운드)
CSS 만들어 놓구요
제이쿼리로
<script>
$(document).ready(function(){
$(".top_area").addClass("type01");
});
</script>
아이디 top_area에 클래스 type01을 추가 하라는 것입니다.
<div class="top_area type01">
이것을 원하는 서브페이지마다 넣어 주면 해결될듯 합니다.
아니면
$(".top_area").css("background-image","경로");
이것두 되겠네요
게시판 설정 부분에 html로 바꿔 주시고 위 제이쿼리 넣으셔도 작동 합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인