메뉴 건너뛰기

2016.09.21 18:14

간단한 세로 메뉴

조회 수 7305 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
<!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>

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

 

 

실행화면





List of Articles
번호 제목 날짜 조회 수
179 jquery selector / jquery 선택자 / 자주 사용하는 jquery selector 선택자 / selecter 2016.09.09 8149
178 ajax 아작스 통신 2016.09.09 8040
177 강제 click 이벤트 발생 2016.09.09 7733
176 벨리데이션 체크 / validator / 자동 입력 제한 2016.09.09 7142
175 각종 다이어그램 플러그인 / 차트 / 관계 플러그인 2016.09.09 9478
174 jqGrid / custom pager / custom paging / 그리드 / 페이징 file 2016.09.09 12479
173 [jQuery Plugin] FCKeditor 2.6.5 사용법 2016.09.11 7179
172 jquery 이용한 이미지 변환 2016.09.11 7360
171 jquery function 생성 2016.09.11 6963
170 [jQuery] 이용 아이디 중복체크 실시간 2016.09.11 8874
169 jQuery Quick API file 2016.09.13 6933
168 이미지 클릭시 확대하기 file 2016.09.21 12639
167 Get방식 파라미터 전송 & 탭 메뉴 선택 2016.09.21 8566
» 간단한 세로 메뉴 file 2016.09.21 7305
165 Input TYPE=“File” 을 히든으로 하고 외부 버튼을 눌러서 파일을 선택 2016.09.21 6801
164 document.getElementById() 처럼 DOM 객체 얻기 2016.09.21 6810
163 select box 값 변경, 목록 변경 2016.09.21 9065
162 슬라이드 쇼 file 2016.09.21 6611
161 jQuery Cookie 2016.09.21 6864
160 체크박스 또는 라디오 버튼의 체크여부 변경하기 2016.09.21 6667
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved