Jyrlg

index.html

<div>
    <ul>
        <li class="menu">
            <a>상위메뉴이미지1</a>
            <ul class="hide">
                <li>메뉴1-1</li>
                <li>메뉴1-2</li>
                <li>메뉴1-3</li>
                <li>메뉴1-4</li>
                <li>메뉴1-5</li>
                <li>메뉴1-6</li>
            </ul>
        </li>
 
        <li class="menu">
            <a>상위메뉴이미지2</a>
            <ul class="hide">
                <li>메뉴2-1</li>
                <li>메뉴2-2</li>
                <li>메뉴2-3</li>
                <li>메뉴2-4</li>
                <li>메뉴2-5</li>
                <li>메뉴2-6</li>
            </ul>
        </li>
    </ul>
</div>

Jyrlg.markdown

Jyrlg

A Pen by Jeong Inyoung on CodePen.

License.

script.js

// html dom 이 다 로딩된 후 실행된다.
    $(document).ready(function(){
        // menu 클래스 바로 하위에 있는 a 태그를 클릭했을때
        $(".menu>a").click(function(){
            var submenu = $(this).next("ul");
 
            // submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
            if( submenu.is(":visible") ){
                submenu.slideUp();
            }else{
                submenu.slideDown();
            }
        });
    });

style.css

ul, li {list-style: none;}

.menu a{cursor:pointer; display:block; width: 200px; height: 60px; line-height: 60px; background: #333; color: #cfcfcf; text-align: center; margin-bottom: 10px;}
.menu .hide{display:none;}