태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

셀렉트박스를 div+css 로 변경하기

12년 전

그누보드 기준

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');":"";?>>

첨부 :

img(2).zip (1.1 KB) (7) 파일 2

2009718857_gpvZQLhs_jy_selectbox.gif (1.2 KB) (3)

추천 목록

번호	제목
2,285	<![CDATA[ ]]> 이 구문은 무엇을 뜻하는 것일까요?
2,284	input 자릿수 체크로 포커스 이동
2,283	왼쪽 / 오른쪽 / 전체 공백 제거 스트립트 - Trim / LTrim / RTrim
2,282	웹표준 모든 애트리뷰트에는 값이 필요
2,281	웹표준으로 퍼블리싱할때 꼭 지켜야 할 사항들
2,280	dl dt dd 에 대해
2,279	자바스크립으로 플래쉬 메뉴처럼...
2,278	div 세로정렬
2,277	다중카테고리
2,276	다중 셀렉트
2,275	평 => m2
2,274	평수 구하기 (가로 x 세로)
2,273	텍스트 박스의 입력글자수 제한
2,272	제이쿼리 탭메뉴
2,271	PHP 자료형 비교표
2,270	PHP 비교 연산자
2,269	HTML5 elements
2,268	[MySQL]UNION과 UNION ALL 의 차이 및 주의 사항
2,267	[MySQL] Union 사용법. 여러 테이블의 같은 값을 한번 쿼리로 추출하기
2,266	ie6 css 롤링 이미지 깜빡임 문제 해결법
2,265	float을 clear하는 방법
2,264	페이지 새로고침
2,263	div 마지막 내용 복제/반복 현상(Duplicate Characters Bug)
2,262	strstr:문자열 시작되는부분부터 출력
2,261	썸네일개요 및 함수정리
2,260	strtotime() 를 이용한 날짜계산
2,259	팝업창으로 폼값 전송하기
	셀렉트박스를 div+css 로 변경하기
2,257	파일첨부를 div+css 로 변경하기
2,256	페이징 네이버 스타일 따라하기