태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

셀렉트박스를 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)

추천 목록

번호	제목
275	자바스크립트 XHTML DTD STRICT 유효성에 통과하기
274	크로스브라우징 input 박스
273	IE6,IE7 ,FireFox 에 대해 CSS 맞추기
272	IE 조건부 주석의 적절한 사용법
271	웹표준 준수사항 22가지
270	internet Explorer8 에서 기존 사이트를 정상적으로 나오게 하는 메타태그
269	각 HTML버전별 DTD(Document Type Definition)
268	XHTML1.1 에서 일반적으로 범하기 쉬운 오류
267	웹표준에서 더이상 사용할수 없는 태그&속성
266	웹표준 모든 애트리뷰트에는 값이 필요
265	웹표준으로 퍼블리싱할때 꼭 지켜야 할 사항들
264	평 => m2
263	평수 구하기 (가로 x 세로)
262	제이쿼리 탭메뉴
261	HTML5 elements
260	[MySQL]UNION과 UNION ALL 의 차이 및 주의 사항
259	[MySQL] Union 사용법. 여러 테이블의 같은 값을 한번 쿼리로 추출하기
258	ie6 css 롤링 이미지 깜빡임 문제 해결법
257	div 마지막 내용 복제/반복 현상(Duplicate Characters Bug)
	셀렉트박스를 div+css 로 변경하기
255	파일첨부를 div+css 로 변경하기
254	페이징 네이버 스타일 따라하기
253	마우스오버 롤링이미지를 jQuery로 변경하기
252	css background sprites
251	Jquery 모음
250	배경이미지 제어하기(고정하기)
249	글자 줄바꿈과 줄바꿈 금지
248	텍스트 overflow
247	border-style속성의 값
246	Input 박스에 포커스 되었을때 스타일 변경