웹마스터 팁

  2. Support
  3. 웹마스터 팁

셀렉트박스 트리메뉴인데 참 이뻐요(링크타켓 - top)

2006.09.19 14:14

뽀因㉦ㅓо Ø Γ

http://sunga.ivyro.net/test/tag.html저희홈 회원님이 예전에 세이클럽에서 쓰던 셀렉트메뉴라고 퍼왔는데
일반 파란 박스와는 달리 룰오브로 효과를 준 이뿐 박스라서 혼자쓰려다
좋은건 다같이 쓰는게 좋을듯 해서 올려드립니다.

이것은 링크 타켓 설정이 top 으로 설정된겁니다
새창뜨기는 위에 올리겠습니다.
소스가 너무 길다 보니 ㅎㅎ

소스가 좀 깁니다만 아래 소스를 몽창 다 복사해서 링크에 걸린 제 태그연습장에 넣고
한번 실행해보시고 사용하세요

아래 예제소스와 같이 스크립터소스는 해드 문서안에 넣어주고 나머지 메뉴부분은
바디안에 넣어주면 됩니다.

태그연습장 주소 :  http://sunga.ivyro.net/test/tag.html

======================= 소스 시작 ===  끝까지 복사하세요 =================================

<HTML>
<HEAD>
    <TITLE>BLUE-B</TITLE>
<script>
var SS_ENV = new Object();
SS_ENV.IE_Version = new Number(((window.navigator.appVersion.split('; '))[1].split(' '))[1]);
SS_ENV.CR = new Object();
SS_ENV.CR.ReverseBackground = '#FF3300';      //목록 마우스 오버 색상
SS_ENV.CR.ReverseText = 'white';              //목록선택시 텍스트 색상
SS_ENV.CR.Border = '#cccccc';                 //셀렉트 메뉴 테두리 색상
SS_ENV.CR.BorderActive = '#FF0000';              //셀렉트 메뉴에 마우스 오버 색상
SS_ENV.ImgPrefix = 'http://www.blueb.co.kr/SRC/javascript/image1/';  //이미지 경로
SS_ENV.DefaultHeight = 20;                   //셀렉트 메뉴 높이
SS_ENV.ButtonWidth = 13;                     //버튼 가로크기  
SS_ENV.OptionsDivStyle = ''
  + ' display:none;'
  + ' z-index:10;'
  + ' position:absolute;'
  + ' border:1 solid '+ SS_ENV.CR.Border+';'
  + ' background-color:white;'
  + ' scrollbar-face-color:#D4D0C8;'
  + ' scrollbar-shadow-color:white;'+ '
  + ' scrollbar-highlight-color:#F6F5F4;'
  + ' scrollbar-3dlight-color:white'
  + ' scrollbar-darkshadow-color:#86837E;'
  + ' scrollbar-track-color:#F6F5F4;'
  + ' scrollbar-arrow-color:#86837E;';
SS_ENV.OptionNobrStyle = ''
  + ' font-size:9pt;'
  + ' font-family:굴림;';

var SS_VAR = new Object();
SS_VAR.DivDummy = document.createElement("DIV");
SS_VAR.SelectList = new Array();
SS_VAR.bEventAttached = false;

var SS_CreatedElements = new Object();

function unloadObjects() {
    try {
        if (SS_VAR && SS_VAR.SelectList) {
            for (key in SS_VAR.SelectList) {
                if (SS_VAR.SelectList[key]) {
                    try {
                        SS_VAR.SelectList[key].select.setAttribute('SS', 0);
                    } catch (e) {};
                    delete SS_VAR.SelectList[key];
                }
            }
        }
    } catch (e) {};
}

attachEvent("onunload", unloadObjects);

function SS_create (srcHTML, ListMax, bAutoDetect) {
    this.ssID = SS_VAR.SelectList.length;
    this.bOriginalSelect = (bAutoDetect && SS_ENV.IE_Version < 5.5);
    this.select = SS_createElement(srcHTML);
    this.selectedIndex = this.select.selectedIndex;
    this.options = this.select.options;
    this.width = parseInt(this.select.style.width);
    this.height = (this.select.style.height) ? parseInt(this.select.style.height) : SS_ENV.DefaultHeight;
    this.OptionHeight = this.height - 4;
    this.bListDown = (ListMax && '-'==ListMax.toString().substr(0, 1)) ? false : true;
    this.ListMax = (!isNaN(parseInt(ListMax))) ? Math.abs(ListMax) : 100;

    this.Table;
    this.TitleDiv;
    this.TitleTable;
    this.TitleWrapper;
    this.OptionsDiv;
    this.OptionsWrapper;
    this.OptionsTable;
    this.bFocused = false;
    this.bExpanded = false;
    this.bReverse = false;

    // private method
    this.isThisEventToBeCanceled = SS_isThisEventToBeCanceled;
    this.toggleTitle = SS_toggleTitle;
    this.syncSelectedIndex = SS_syncSelectedIndex;
    this.toggleOptions = SS_toggleOptions;
    this.turnOnOption = SS_turnOnOption;
    this.turnOffOption = SS_turnOffOption;
    this.handleMousewheel = SS_handleMousewheel;
    this.handleOverTitle = SS_handleOverTitle;
    this.handleOutTitle = SS_handleOutTitle;
    this.handleOverOption = SS_handleOverOption;
    this.createTable = SS_createTable;
    this.createTitleDiv = SS_createTitleDiv;
    this.createOptionsDiv = SS_createOptionsDiv;
    this.createOptionTr = SS_createOptionTr;
    this.adjustOptionsDiv = SS_adjustOptionsDiv;
    this.syncOptions = SS_syncOptions;
    this.pressOption = SS_pressOption;
    this.moveOption = SS_moveOption;
    this.releaseOption = SS_releaseOption;
    this.pressTitle = SS_pressTitle;
    this.releaseTitle = SS_releaseTitle;

    // public method
    this.display = SS_display;
    this.insertOption = SS_insertOption;
    this.deleteOption = SS_deleteOption;
    this.changeOption = SS_changeOption;

    // initiate
    this.createTable();
    this.select.setAttribute('SS', this);
    if (!this.bOriginalSelect)
        this.select.onpropertychange = SS_handlePropertychange;
    SS_VAR.SelectList[this.ssID] = this;
}

function SS_display() {
    document.write("<div id=SS_TempDiv></div>n");
    document.all.SS_TempDiv.appendChild(this.Table);
    document.all.SS_TempDiv.removeNode();
}

function SS_write (srcHTML, ListMax, bAutoDetect) {
    var oSS = new SS_create(srcHTML, ListMax, bAutoDetect);
    oSS.display();
    return oSS;
}

function SS_insertOption (value, innerText, idx) {
    var NewOption = document.createElement("OPTION");
    SS_CreatedElements[SS_CreatedElements.length] = NewOption;
    this.options.add(NewOption, idx);
    NewOption.innerText = innerText;
    NewOption.value = value;

    if (!this.bOriginalSelect) this.createOptionTr(idx);
    this.syncOptions();
    this.adjustOptionsDiv();
    this.syncSelectedIndex();
}

function SS_deleteOption (idx){
    this.options.remove(idx);
    if (!this.bOriginalSelect) this.OptionsTable.deleteRow(idx);
    this.syncOptions();
    this.adjustOptionsDiv();
    this.syncSelectedIndex();
}

function SS_changeOption (idx, value, innerText) {
    this.options[idx].value = value;
    this.options[idx].innerText = innerText;
    this.syncOptions();
    this.syncSelectedIndex();
}

function SS_cancelEvent (event) {
  event.cancelBubble = true;
  event.returnValue = false;
}

function SS_isThisEventToBeCanceled (event) {
    if ('object' == typeof(event)) {
        switch(event.type) {
            case 'mousedown'+ ':
            if (!(event.button & 1)) return true;
            break;
            
            case 'mouseup':
            if (!(event.button & 1)) return true;
            if (SS_ENV.IE_Version >= 5.5 && event.srcElement != this.srcElementOfLastMousedown && this.srcElementOfLastMousedown != null) {
                this.srcElementOfLastMousedown = null;
                return true;
            }
            break;
        
            case 'mouseout':
                if (!(SS_ENV.IE_Version < 5.5 && event.srcElement == this.srcElementOfLastMousedown))
                    return true;
            break;
      
            case 'mousemove':
            if (SS_ENV.IE_Version >= 5.5 && event.srcElement != this.srcElementOfLastMousedown && this.srcElementOfLastMousedown != null)
                return true;
            break;
        }
    }
    return false;
}

function SS_createElement(html) {
    SS_VAR.DivDummy.insertAdjacentHTML('afterBegin', html);
    var oEl = SS_VAR.DivDummy.children(0);
    while (SS_VAR.DivDummy.children.length > 0) {
        SS_VAR.DivDummy.removeChild(SS_VAR.DivDummy.children(0));
    }
    return oEl;
}

function SS_blurExcept(except) {
    SS_cancelEvent(window.event);
    except = ('number'==typeof(except)) ? except : -1;
    var bHasToDetachEvent = true;

    for (var i=0; i < SS_VAR.SelectList.length; i++) {
        if (-1==except && SS_VAR.SelectList[i].bFocused && SS_VAR.SelectList[i].bExpanded) {
            SS_VAR.SelectList[i].toggleOptions(false, true);
            SS_VAR.SelectList[i].toggleTitle(true);
            bHasToDetachEvent = false;
        }
        else if (i!=except) {
            if (SS_VAR.SelectList[i].bExpanded)
                SS_VAR.SelectList[i].toggleOptions(false, true);

            if (SS_VAR.SelectList[i].bReverse)
                SS_VAR.SelectList[i].toggleTitle(false);
            SS_VAR.SelectList[i].bFocused = false;
        }
    }

    if (SS_VAR.bEventAttached && bHasToDetachEvent) {
        document.detachEvent('onmousedown', SS_blurExcept);
        document.detachEvent('ondblclick', SS_blurExcept);
        SS_VAR.bEventAttached = false;
    }
}

function SS_syncSelectedIndex() {
    this.selectedIndex = this.select.selectedIndex;

    if (this.bOriginalSelect) return;

    if (this.TitleTable.cells(0).childNodes(0).innerText != this.options[this.selectedIndex].innerText)
        this.TitleTable.cells(0).childNodes(0).innerText = this.options[this.selectedIndex].innerText;
    if (this.bExpanded)
        this.toggleOptions(false);
}

function SS_toggleTitle(bReverse){
    this.bReverse = ('undefined'!=typeof(bReverse)) ? bReverse: (!this.bReverse);
    this.TitleTable.cells(0).style.backgroundColor = this.bReverse ? SS_ENV.CR.ReverseBackground : '';
    this.TitleTable.cells(0).style.color = this.bReverse ? SS_ENV.CR.ReverseText : '';
}

function SS_toggleOptions (bExpanded, bStrict) {
    if (!bStrict && !this.bFocused) {
        SS_blurExcept(this.ssID);
    }
    this.bExpanded = ('undefined'!=typeof(bExpanded)) ? bExpanded: (!this.bExpanded);

    if (this.bExpanded) {
        this.adjustOptionsDiv();
        this.OptionsDiv.style.display = '+ 'block';
        if (!bStrict) {
            this.toggleTitle(false);
            this.handleOverOption(this.selectedIndex);
        }
        this.handleOutTitle();
    }
    else {
        this.OptionsDiv.style.display = 'none';
        if (!bStrict) {
            this.toggleTitle(true);
        }
    }
    if (!bStrict) {
        this.bFocused = true;

        if (!SS_VAR.bEventAttached) {
            document.attachEvent('onmousedown', SS_blurExcept);
            document.attachEvent('ondblclick', SS_blurExcept);
            SS_VAR.bEventAttached = true;
        }
    }
}

function SS_handlePropertychange ()
{
  if ('propertychange'==window.event.type && 'selectedIndex'==window.event.propertyName) {
    var oSS = window.event.srcElement.SS;
    oSS.syncSelectedIndex();

    if (null != oSS.select.onchange)
      oSS.select.onchange();
  }
}

function SS_handleMousewheel (event) {
    var idx = this.selectedIndex;
    if ('mousewheel'==event.type && this.bFocused && this.bReverse) {
        for (var i=0; i < event.wheelDelta; i += 120) idx--;
        for (var i=0; i > event.wheelDelta; i -= 120) idx++;
    }
    idx = Math.max(idx, 0);
    idx = Math.min(idx, this.options.length - 1);
    this.select.selectedIndex = idx;
}

function SS_handleOverTitle() {
    if (this.bExpanded) return;

    this.TitleTable.style.borderColor = SS_ENV.CR.BorderActive;
    this.TitleTable.cells(1).style.display = 'none';
    this.TitleTable.cells(2).style.display = 'block';
}

function SS_handleOutTitle() {
    this.TitleTable.style.borderColor = SS_ENV.CR.Border;
    this.TitleTable.cells(2).style.display = 'none';
    this.TitleTable.cells(1).style.display = 'block';
}

function SS_handleOverOption(idx) {
    for (var i=0; i < this.options.length; i++) {
        if (i==idx) this.turnOnOption(i);
        else this.turnOffOption(i);
    }
}

function SS_turnOnOption(idx) {
    this.OptionsTable.cells(idx).style.color = SS_ENV.CR.ReverseText;
    this.OptionsTable.cells(idx).style.backgroundColor = SS_ENV.CR.ReverseBackground;
}

function SS_turnOffOption(idx) {
    this.OptionsTable.cells(idx).style.color = '+ '';
    this.OptionsTable.cells(idx).style.backgroundColor = '';
}

function SS_adjustOptionsDiv() {
    if (this.bOriginalSelect) return;

    this.OptionsDiv.style.width = this.width;
    this.OptionsDiv.style.height = Math.min(this.options.length, this.ListMax) * this.OptionHeight + 2;
    this.OptionsWrapper.style.height = this.options.length * this.OptionHeight;
    this.OptionsDiv.style.overflowY = (this.options.length > this.ListMax) ? 'scroll' : '';

    var top = this.Table.offsetTop;
    var left = this.Table.offsetLeft;

    for (var El = this.Table.offsetParent; 'BODY'!=El.tagName && 'absolute'!=El.style.position && 'relative'!=El.style.position; El = El.offsetParent) {
        if ('TABLE' != El.tagName) {
            top += El.clientTop;
            left += El.clientLeft;
        }
        top += El.offsetTop;
        left += El.offsetLeft;
    }
    this.OptionsDiv.style.top = (this.bListDown) ? (top + this.height) : (top - parseInt(this.OptionsDiv.style.height));
    this.OptionsDiv.style.left = left;

    this.TitleWrapper.style.top = 0;
    this.TitleWrapper.style.left = 0;
}

function SS_syncOptions(){
    if (this.bOriginalSelect) return;

    for (var i=0; i < this.options.length; i++) {
        this.OptionsTable.cells(i).setAttribute('index', i);
        if (this.OptionsTable.cells(i).childNodes(0).innerText != this.options[i].innerText)
        this.OptionsTable.cells(i).childNodes(0).innerText = this.options[i].innerText;
    }
}

function SS_pressTitle(event){
    SS_cancelEvent(event);
    this.srcElementOfLastMousedown = event.srcElement;
    this.toggleOptions();
}

function SS_releaseTitle(event) {
    SS_cancelEvent(event);
    if (this.isThisEventToBeCanceled(event)) return;
    this.srcElementOfLastMousedown = null;
}

function SS_pressOption(event) {
    SS_cancelEvent(event);
    this.srcElementOfLastMousedown = event.srcElement;
}

function SS_moveOption(event) {
    SS_cancelEvent(event);
    if (this.isThisEventToBeCanceled(event)) return;
    if (!(event.offsetX >= 0 && event.offsetX <= this.OptionsTable.offsetWidth)) return;

    this.handleOverOption(Math.floor(event.offsetY / this.OptionHeight));
}

function SS_releaseOption(event){
    SS_cancelEvent(event);

    if (this.isThisEventToBeCanceled(event)) return;

    this.srcElementOfLastMousedown = null;

    if (event.offsetX >= 0 && event.offsetX <= this.OptionsTable.offsetWidth) {
        this.toggleOptions(false);
        this.select.selectedIndex = Math.floor(event.offsetY / this.OptionHeight);
    }
}

function SS_createTable() {
    this.Table = SS_createElement(""
        + "<table border=0 cellpadding=0 cellspacing=0 style='table-layout:fixed; cursor:default'>"
        + "<tr><td></td></tr>"
        + "</table>"
    );
    
    if (!isNaN(this.width)) this.Table.style.width = this.width;
    this.Table.style.height = this.height;

    if (!this.bOriginalSelect) {
    this.createTitleDiv();
    this.createOptionsDiv();
    this.Table.cells(0).appendChild(this.TitleDiv);
    this.Table.cells(0).appendChild(this.OptionsDiv);
    }
    else {
        this.Table.cells(0).appendChild(this.select);
    }
}

function SS_createTitleDiv() {
    this.TitleDiv = SS_createElement(""
        + "<div style='position:relative; top:0; left:0;'>"
        + "  <table border=0 cellpadding=0 cellspacing=1"
        + "    height="+this.height
        + "    bgcolor=white"
        + "    style='table-layout:fixed; border:1 solid "+SS_ENV.CR.Border+";'"
        + "    onmouseover='SS_VAR.SelectList["+this.ssID+"].adjustOptionsDiv()'"
        + "  >"
        + "  <tr>"
        + "    <td><nobr style='text-oveflow:hidden;"+SS_ENV.OptionNobrStyle+"'></nobr></td>"
        + "    <td width="+SS_ENV.ButtonWidth+" align=center style='word-wrap:normal'></td>"
        + "    <td style='display:none' width="+SS_ENV.ButtonWidth+" align=center style='word-wrap:normal'></td>"
        + "    <td style='display:none'></td>"
        + "  </tr>"
        + "  </table>"
        + "</div>"
    );
    this.TitleTable = this.TitleDiv.childNodes(0);
    this.TitleTable.cells(0).childNodes(0).innerText = this.options[this.selectedIndex].innerText;
    this.TitleTable.cells(1).innerHTML = "<img src='"+SS_ENV.ImgPrefix+"/down.gif' border=0 align=absmiddle>";
    this.TitleTable.cells(2).innerHTML = "<img src='"+SS_ENV.ImgPrefix+"/down_s.gif' border=0 align=absmiddle>";
    this.TitleTable.cells(3).appendChild(this.select);
    this.TitleWrapper = document.createElement(""
        + "<img src='"+SS_ENV.ImgPrefix+"/blank.gif'"
        + "  style='position:absolute; top:0; left:0; z-index:2; width:100%; height:"+this.height+";'"
        + "  onmouseover='SS_VAR.SelectList["+this.ssID+"].handleOverTitle()'"
        + "  onmouseout='SS_VAR.SelectList["+this.ssID+"].handleOutTitle(); SS_VAR.SelectList["+this.ssID+"].releaseTitle(window.event);'"
        + "  onmousedown='SS_VAR.SelectList["+this.ssID+"].pressTitle(window.event)'"
        + "  ondblclick='SS_VAR.SelectList["+this.ssID+"].pressTitle(window.event); SS_VAR.SelectList["+this.ssID+"].releaseTitle(window.event);'"
        + "  onmouseup='SS_VAR.SelectList["+this.ssID+"].releaseTitle(window.event)'"
        + "  onmousewheel='SS_VAR.SelectList["+this.ssID+"].handleMousewheel(window.event)'"
        + "  ondragstart='SS_cancelEvent(window.event)'"
        + ">"
    );
    SS_CreatedElements[SS_CreatedElements.length] = this.TitleWrapper;
    this.TitleDiv.appendChild(this.TitleWrapper);
}

function SS_createOptionsDiv() {
    this.OptionsDiv = SS_createElement(""
        + "<div style='"+SS_ENV.OptionsDivStyle+"'"
        + "  onscroll='+ 'SS_VAR.SelectList["+this.ssID+"].moveOption(window.event)'"
        + "  onmousedown='SS_cancelEvent(window.event)'"
        + ">"
        + "  <table border=0 cellpadding=0 cellspacing=0 width=100% style='table-layout:fixed'>"
        + "  </table>"
        + "</div>"
    );
    this.OptionsTable = this.OptionsDiv.childNodes(0);
    for (var i=0; i < this.options.length; i++) {
        this.createOptionTr(i);
    }
    this.syncOptions();
    this.OptionsWrapper = document.createElement(""
        + "<img src='"+SS_ENV.ImgPrefix+"/blank.gif'"
        + "  style='position:absolute; top:0; left:0; width:100%;'"
        + "  onmousedown='SS_VAR.SelectList["+this.ssID+"].pressOption(window.event)'"
        + "  onmousemove='SS_VAR.SelectList["+this.ssID+"].moveOption(window.event)'"
        + "  onmouseup='SS_VAR.SelectList["+this.ssID+"].releaseOption(window.event)'"
        + "  onmouseout='SS_VAR.SelectList["+this.ssID+"].releaseOption(window.event)'"
        + "  ondragstart='SS_cancelEvent(window.event)'"
        + ">"
    );
    SS_CreatedElements[SS_CreatedElements.length] = this.OptionsWrapper;
    this.OptionsDiv.appendChild(this.OptionsWrapper);
}

function SS_createOptionTr(idx) {
    idx = ('undefined'!=typeof(idx)) ? idx : this.options.length - 1;
    var OptionTr = this.OptionsTable.insertRow(-1);
    var OptionTd = document.createElement("<td height="+this.OptionHeight+"></td>");
    SS_CreatedElements[SS_CreatedElements.length] = this.OptionsTd;
    OptionTd.appendChild(document.createElement("<nobr style='"+SS_ENV.OptionNobrStyle+"'></nobr>"));
    OptionTr.appendChild(OptionTd);
}

function Menu_Change(Obj) {
    var f=document.form1;
    var _Obj=Obj.selectedIndex;

    if(Obj.options[_Obj].value) document.location.replace(Obj.options[_Obj].value);
    else return false;
}

</script>
</head>
<body>

<Script>
    SS_write("<select name='selemail' onChange='Menu_Change(this)' STYLE='width : 110px'>n"
                    +"<option selected value=''>선택하세요</option>"
                    +"<option value='http://www.hanmail.net'>한메일(다음)</option>"
                    +"<option value='http://www.yahoo.co.kr'>야후</option>"
                    +"<option value='http://www.netian.com'>네띠앙</option>"
                    +"<option value='http://www.chollian.net'>천리안</option>"
                    +"<option value='http://www.naver.com'>네이버</option>"
                    +"<option value='http://www.blueb.co.kr'>블루비</option>"
                    +"<option value='http://www.hotmail.com'>hotmail</option>"
            +"</select>");
</Script>

</body>
</html>

이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
주소고정 안되는분들~! [3] 순뎅 2006.07.04
날씨/운세/뉴스/달력/검색등 메인용 귀연 정보박스[미리보기] [12] 뽀因㉦ㅓо Ø Γ 2006.07.19
list , menu form 문에서 select할때 캘리 2006.08.18
슬라이드 배너및 메뉴가 익스플러 창 조절시 좌표값 변할때 사용 하는 구문!! 천문길 2006.08.21
ip추적&감추기 [2] 인테리어뱅크 2006.09.11
HTML 개념잡기 인테리어뱅크 2006.09.11
HTML 기초강좌 [1] 인테리어뱅크 2006.09.11
별거아니지만... form 태그 공백같이 밀려나는것 막기? [3] ReloadMax 2006.09.16
셀렉트박스 트리메뉴인데 참 이뻐요(링크타켓 - top) [3] 뽀因㉦ㅓо Ø Γ 2006.09.19
셀렉트박스 트리메뉴인데 참 이뻐요(링크타켓 - new/blank) [8] file 뽀因㉦ㅓо Ø Γ 2006.09.19
문법적으로 이상이 없는데 빈틈이 생길 때...해결 방법 [5] file 이명우 2006.12.16
프레임속성을 이용해 여러가지 형태로 테이블만들기. [1] 슬비 2007.01.04
각종 이~~~뿐!!! 메인 컨텐츠 모음 [6] 뽀因㉦ㅓо Ø Γ 2007.01.05
간지님 faq 따라하기.... [1] 이진수 2007.01.11
fieldset태그 [1] Dredroad[炫] 2007.01.24
CSS로 바꾸어 쓰는 HTML태그!.. [XHTML약간^^;] [2] 박종훈 2007.02.10
프레임 홈페이지 만들때 유용한 팁 [2] 지오 2007.03.24
[초간단 팁] 글씨에 음영효과를 주는 태그 [2] file 이유 2007.05.02
html 웹자료제작,교과목제작[사용법 동영상강좌] [3] parkys 2007.05.11
메시지 안뜨는 오른쪽 마우스 금지소스 [14] 푸름[poorum] 2007.06.13
태그 쓰기