제이쿼리 셀렉트메뉴

by hlee0126

HTML

<div id="sel_utility">	<a href="#" > 전체 보기</a>

    <ul id="list">
        <li><a href="#"><b class="st1">[모집중]&nbsp;</b>리스트</a>
        </li>
        <li><a href="#"><b class="st2">[당첨완료]&nbsp;</b>리스트</a>
        </li>
        <li><a href="#"><b class="st3">[후기작성]&nbsp;</b>리스트</a>
        </li>
        <li><a href="#"><b class="st0">[완료]&nbsp;</b>리스트</a>
        </li>
    </ul>
</div>

CSS

#sel_utility{width:261px;border:1px solid #dedede;padding:6px 12px;position: relative;}
#sel_utility a{font-size:12px;color:#636363;text-decoration: none;  display: block;}
#list{display:none;position: absolute;  border: 1px solid #dedede;top: 24px;left: -1px; width: 265px; padding: 10px;}
#list li{margin-top: 10px;}
#list li:first-child{margin-top: 0;}
b.st0{color:#636363;}
b.st1{color:#ff744f;}
b.st2{color:#7286ff;}
b.st3{color:#60c2bc;}

JavaScript

$("#sel_utility > a").on("click", function () {
    $("#list").stop().slideToggle(500);
});

$("#list").mouseleave(function () {
    $(this).hide();
});

$('#list').focusout(function () {
    setTimeout(function () {
        var list = false;
        var activeObj = document.activeElement;

        $("#list > li > a", "#sel_utility").each(function (index, obj) {
            if (obj == activeObj) {
                list = true;
                return false;
            }
        });

        if (list == false) {
            $('#list').slideUp();
        }

    }, 200);
});