간단한 세로 메뉴

by 조쉬 posted Sep 21, 2016
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>


<head>


    <title> New Document </title>


    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>


    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


</head>


<script>


    $(function() {


        $('.hide').hide();


        hide_func();


 


        $('[class^=menu]').hover(


            function() {


                hide_func();


                $('[class^=menu]').css('background', '');


                var nm = $(this).attr('class');


                $(this).css('background', 'red');


                //alert(nm);


                $('#'+nm).show();


            },


            function() {


                var nm = $(this).attr('class');


                //alert(nm);


                if($('#'+nm).is(':hidden'))


                    $('.hide').hide();


            }


        );


 


        $('[class^=submenu]').hover(


            function() {


                $('.submenu').css('background', '');


                var idx = $('.submenu').index(this);


                //alert(idx);


                $('.submenu:eq('+idx+')').css('background', 'pink');


                $('ul.hide').hide();


                $('.submenu:eq('+idx+')>ul.hide').show();


            }, 


            function() {


            }


        );


 


        $('.hide>li').hover(


            function() {


                $('.hide li').css('background', '');


                var idx = $('.hide>li').index(this);


                $('.hide li:eq('+idx+')').css('background', 'gold');


            },


            function() {


                //$('.hide li').css('background', '');


            }


        );


    });


 


    function hide_func() {


        $('[id^=menu]').hide();


        $('ul.hide').hide();


    }


</script>


 


<body>


    <div style='position: absolute;'>


        <ul>


            <li class='menu1'>menu1</li>


            <li class='menu2'>menu2</li>


            <li class='menu3'>menu3</li>


            <li class='menu4'>menu4</li>


            <li class='menu5'>menu5</li>


        </ul>


 


        <div id='menu1' style='position: relative; top: -110px; left: 100px;'>


            <ul>


                <li class='submenu'>submenu1


                    <ul class='hide'>


                        <li>submenu1_1</li>


                        <li>submenu1_2</li>


                        <li>submenu1_3</li>


                    </ul>


                </li>


                <li class='submenu'>submenu2


                    <ul class='hide'>


                        <li>submenu1_1</li>


                        <li>submenu1_2</li>


                        <li>submenu1_3</li>


                    </ul>


                </li>


                <li class='submenu'>submenu3


                    <ul class='hide'>


                        <li>submenu1_1</li>


                        <li>submenu1_2</li>


                        <li>submenu1_3</li>


                    </ul>


                </li>


            </ul>


        </div>


        <div id='menu2' style='position: relative; top: -90px; left: 100px;'>


            <ul>


                <li class='submenu'>submenu1


                    <ul class='hide'>


                        <li>submenu1_1</li>


                        <li>submenu1_2</li>


                        <li>submenu1_3</li>


                    </ul>


                </li>


                <li class='submenu'>submenu2


                    <ul class='hide'>


                        <li>submenu1_1</li>


                        <li>submenu1_2</li>


                        <li>submenu1_3</li>


                    </ul>


                </li>


                <li class='submenu'>submenu3


                    <ul class='hide'>


                        <li>submenu1_1</li>


                        <li>submenu1_2</li>


                        <li>submenu1_3</li>


                    </ul>


                </li>


            </ul>


        </div>


        <div id='menu3' style='position: relative; top: -70px; left: 100px;'>


            <ul>


                <li class='submenu'>submenu1


                    <ul class='hide'>


                        <li>submenu1_1</li>


                        <li>submenu1_2</li>


                        <li>submenu1_3</li>


                    </ul>


                </li>


                <li class='submenu'>submenu2


                    <ul class='hide'>


                        <li>submenu1_1</li>


                        <li>submenu1_2</li>


                        <li>submenu1_3</li>


                    </ul>


                </li>


                <li class='submenu'>submenu3


                    <ul class='hide'>


                        <li>submenu1_1</li>


                        <li>submenu1_2</li>


                        <li>submenu1_3</li>


                    </ul>


                </li>


            </ul>


        </div>


        <div id='menu4' style='position: relative; top: -50px; left: 100px;'>


            <ul>


                <li class='submenu'>submenu1


                    <ul class='hide'>


                        <li>submenu1_1</li>


                        <li>submenu1_2</li>


                        <li>submenu1_3</li>


                    </ul>


                </li>


                <li class='submenu'>submenu2


                    <ul class='hide'>


                        <li>submenu1_1</li>


                        <li>submenu1_2</li>


                        <li>submenu1_3</li>


                    </ul>


                </li>


                <li class='submenu'>submenu3


                    <ul class='hide'>


                        <li>submenu1_1</li>


                        <li>submenu1_2</li>


                        <li>submenu1_3</li>


                    </ul>


                </li>


            </ul>


        </div>


        <div id='menu5' style='position: relative; top: -30px; left: 100px;'>


            <ul>


                <li class='submenu'>submenu1


                    <ul class='hide'>


                        <li>submenu1_1</li>


                        <li>submenu1_2</li>


                        <li>submenu1_3</li>


                    </ul>


                </li>


                <li class='submenu'>submenu2


                    <ul class='hide'>


                        <li>submenu1_1</li>


                        <li>submenu1_2</li>


                        <li>submenu1_3</li>


                    </ul>


                </li>


                <li class='submenu'>submenu3


                    <ul class='hide'>


                        <li>submenu1_1</li>


                        <li>submenu1_2</li>


                        <li>submenu1_3</li>


                    </ul>


                </li>


            </ul>


        </div>


    </div>


</body>


</html>

메뉴에 마우스 오버시 선택된 메뉴 색상 변경

 

 

실행화면