셀렉트박스를 div+css 로 변경하기 정보
셀렉트박스를 div+css 로 변경하기첨부파일
본문
미리보기 : http://jysoft.co.kr/bbs/board.php?bo_table=notice
※ 게시판 카테고리 변경법입니다.
1. 이미지(첨부) 를 ../skin/board/스킨폴더/ 에 폴더채로 업로드
2. php 코드 추가
skin/게시판/list.skin.php 15줄의 ?> 위에 아래 코드 추가// 카테고리 div
$category_location = "./board.php?bo_table=$bo_table$sty&sca=";
if ($board[bo_use_category]) {
if($sca) $option = "<li><a href=\"$category_location\">전체</a></li>";
$arr = explode("|", $board[bo_category_list]);
for ($i=0; $i<count($arr); $i++) {
if(trim($arr[$i])) {
if($sca == $arr[$i]) $jy_class = "class=\"_ed\"";
else $jy_class = "";
$option .= "<li $jy_class><a href=\"$category_location{$arr[$i]}\">$arr[$i]</a></li>";
}
}
}
if(!$sca) $jy_sca = "전체";
else $jy_sca = $sca;
3. style 추가
스타일 시트에 아래코드를 추가스킨폴더글자를 폴더이름으로 변경
/* 셀렉트박스 */
.jy_select {position:relative; float:left; width:120px; margin-left:5px;}
.jy_select * {margin:0; padding:0;}
.jy_select p {float:left; width:113px; height:20px; line-height:20px; padding-left:5px; border:1px solid #BDBDBD; background:#F6F9F5 url(../skin/board/스킨폴더/img/btn_category.gif) no-repeat right top; font-size:11px; cursor:pointer;}
.jy_select p.ed {background-position:bottom right;}
.jy_select ul {position:absolute; top:21px; left:0; list-style-type:none; border:1px solid #BDBDBD;}
.jy_select ul li {display:inline; height:20px; line-height:20px;}
.jy_select ul li a {width:113px; padding-left:5px; display:block; text-decoration:none; font-size:11px; background-color:#F6F9F5; color:#666666; font-size:11px;}
.jy_select ul li._ed a,
.jy_select ul li a:hover {background-color:#60686E; color:#FFFFFF !important;}
4. 스크립트 추가
적당한 위치에 스크립트를 추가<script type="text/javascript" language="javascript">
// div 샐랙트 펼치기
function jySelectOpen(option, selected)
{
var selectDisplay = document.getElementById(option).style.display;
if(selectDisplay == "none"){
document.getElementById(option).style.display = "";
document.getElementById(selected).className = "ed";
} else {
jySelectClose(option, selected);
}
}
// div 샐랙트 닫기
function jySelectClose(option, selected)
{
document.getElementById(option).style.display = "none";
document.getElementById(selected).className = selected;
}
</script>
5. html 추가
카테고리박스를 나타낼 부분에 추가<div class="jy_select">
<p id="sed" onclick="jySelectOpen('jy_select', 'sed')"><?=$jy_sca?></p>
<ul id="jy_select" style="display:none;"><?=$option?></ul>
</div>
6. 기존 셀렉트박스 감추기
style="display:none;" 를 추가<select name=sca onchange="location='<?=$category_location?>'+this.value;" style="display:none;">
7. 리스트에 마우스오버시 div 닫히기
skin/게시판/list.skin.php 89줄에 onmouseover="<?=$is_category?"jySelectClose('jy_select', 'sed');":"";?> 추가<table cellspacing="0" cellpadding="0" class="board_list" onmouseover="<?=$is_category?"jySelectClose('jy_select', 'sed');":"";?>>
도움 ㅤㄷㅚㅆ으면 추천추천 부탁드려요~~~~~~!!!
추천
11
11
댓글 5개
추천드려요 ~ 게시판스킨도 공개해주시면 짱이겠는데요 ^^
추천 댓글 감사합니다~
게시판 공개예정이구요.. 다듬고 다듬어서 공개할게요. ^^
게시판 공개예정이구요.. 다듬고 다듬어서 공개할게요. ^^
게시판 공개 해주시길 손꼽아 기다리고 있는 1인 감사합니다.
jy소프트님이 제작하신 게시판은 웹표준에 맞게 제작되어
정상적으로 적용이 된것 같더라구요
그러나 그누보드 베이직 게시판에 적용해 보니
스타일이 제대로 적용이 안되네요 ^^
정상적으로 적용이 된것 같더라구요
그러나 그누보드 베이직 게시판에 적용해 보니
스타일이 제대로 적용이 안되네요 ^^
웹표준...감사합니다^^