안녕하세요.

Classic ASP 기반 사이트에서 jQuery와 CSS를 이용해 이번에 메뉴를 구성하였습니다.

메뉴는 일반적인 DropDown 방식의 메뉴이며

마우스를 가져다 대면 background image가 바뀌는 형식입니다.


menu1    |    menu2    |    menu3    |    menu4    |    menu5    

sub1-1         sub2-1         sub3-1          sub4-1         sub5-1

sub1-2         sub2-2         sub3-2          sub4-2         sub5-1

sub1-3                            sub3-3                                      


메뉴 구성은 위와 같습니다.

menu1에 마우스를 가져다 대면 background-image가 바뀌면서 선택된 상태의 이미지가 나타나며

sub로 마우스를 이동시키면 마우스 위치에 따라 menu1의 선택된 이미지가 유지된 상태로 sub1-1 ~ sub1-3까지의 하위 메뉴도

background가 바뀌게 됩니다.


문제는 sub 메뉴를 클릭했을 때 해당 페이지로 이동을 하면 그 페이지에서는 menu1~5 의 background-image 가

페이지에 따라 선택된 상태로 유지되어야 하는데 아시다시피 페이지를 이동하면 menu의 background는 마우스를 가져다 대기 전의

이미지로 돌아가버립니다.


jQuery에서는 menu의 background 이미지가 선택된 상태로 초기 값을 가지도록 하려면 어떻게 처리를 해야 할까요?
jQuery 초보자라서 책을 보고 있긴 한데 방법을 모르겠네요...


asp에서 처리하라고 한다면 각 페이지마다 구분을 할 수 있는 값을 QueryString으로 지정해 전달한 뒤 해당 위치 값에 따라

background-image를 asp 변수로 처리하면 될 것 같긴 한데... 이렇게 하려면 css 파일을 asp파일로 만든 뒤

css 스크립트 처리를 해줘야 하는 변칙적인 방법을 써야 해서 이건 좀 아닌 것 같고...

분명 jQuery에서 문서 로딩 이벤트를 통해 할 수 있는 방법이 있을 것 같은데 조언좀 부탁드립니다.


아래는 제가 사용한 jQuery와 CSS 소스 입니다.


--------------------------------------   jQuery   -------------------------------------

var maxHeight = 400;


$(function(){


    $(".dropdown > li").hover(function() {

    

         var $container = $(this),

             $list = $container.find("ul"),

             $anchor = $container.find("a"),

             height = $list.height() * 1.1,       // make sure there is enough room at the bottom

             multiplier = height / maxHeight;     // needs to move faster if list is taller

        

        // need to save height here so it can revert on mouseout            

        $container.data("origHeight", $container.height());

        

        // so it can retain it's rollover color all the while the dropdown is open

        $anchor.addClass("hover");

        

        // make sure dropdown appears directly below parent list item    

        $list

            .show()

            .css({

                paddingTop: $container.data("origHeight")

            });

        

        // don't do any animation if list shorter than max

        if (multiplier > 1) {

            $container

                .css({

                    height: maxHeight,

                    overflow: "hidden"

                })

                .mousemove(function(e) {

                    var offset = $container.offset();

                    var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);

                    if (relativeY > $container.data("origHeight")) {

                        $list.css("top", -relativeY + $container.data("origHeight"));

                    };

                });

        }

        

    }, function() {

    

        var $el = $(this);

        

        // put things back to normal

        $el

            .height($(this).data("origHeight"))

            .find("ul")

            .css({ top: 0 })

            .hide()

            .end()

            .find("a")

            .removeClass("hover");

    

    });

    

    // Add down arrow only to menu items with submenus

    $(".dropdown > li:has('ul')").each(function() {

        //$(this).find("a:first").append("<img src='images/down-arrow.png' />");

    });

    

    

});





----------------------------------- CSS ------------------------------------------

#menu-wrap * { margin: 0; padding: 0; }

#menu-wrap { position:relative; width: 900px; margin: 0px auto; display:block; border:0px solid #F00; } 

#menu-wrap a { text-decoration: none; }

#menu-wrap img { vertical-align: middle; }

#menu-wrap a img { border: 0;}

#menu-wrap ul { list-style: none; }

#menu-wrap span { display:none;}


/* 

LEVEL ONE

*/

#menu-wrap ul.dropdown { position: relative; width:900px;}

#menu-wrap ul.dropdown li { font-weight: bold; float: left; width: 180px; position: relative;}

#menu-wrap ul.dropdown a:hover { }

#menu-wrap ul.dropdown li a { display: block; padding: 0px 0px; color: #FFF; position: relative; z-index: 2000; text-align:center; height:42px;}

#menu-wrap ul.dropdown li a:hover,

#menu-wrap ul.dropdown li a.hover { position: relative;}



/* 

LEVEL TWO

*/

#menu-wrap ul.dropdown ul { display: none; position: absolute; top: 0; left: 0; width: 180px; z-index: 1000; }

#menu-wrap ul.dropdown ul li { font-weight: normal; color: #000;}

#menu-wrap ul.dropdown ul li a { display: block; width:179px; height:42px;} 

#menu-wrap ul.dropdown ul li a:hover { display: block; } 



#T01 a {background-image:url(/images/top_menu_img/mnu_01.jpg);}   <---- 페이지 위치에 따라 mnu_01_on.jpg 값 설정

#T01 a:hover, #T01 a.hover {background-image:url(/images/top_menu_img/mnu_01_on.jpg);}

#T01_01 a {background-image:url(/images/top_menu_img/mnu_01_01.jpg) !important;}

#T01_01 a:hover {background-image:url(/images/top_menu_img/mnu_01_01_on.jpg) !important;}

#T01_02 a {background-image:url(/images/top_menu_img/mnu_01_02.jpg) !important;}

#T01_02 a:hover {background-image:url(/images/top_menu_img/mnu_01_02_on.jpg) !important;}

#T01_03 a {background-image:url(/images/top_menu_img/mnu_01_03.jpg) !important;}

#T01_03 a:hover {background-image:url(/images/top_menu_img/mnu_01_03_on.jpg) !important;}

#T01_04 a {background-image:url(/images/top_menu_img/mnu_01_04.jpg) !important;}

#T01_04 a:hover {background-image:url(/images/top_menu_img/mnu_01_04_on.jpg) !important;}

#T01_05 a {background-image:url(/images/top_menu_img/mnu_01_05.jpg) !important;}

#T01_05 a:hover {background-image:url(/images/top_menu_img/mnu_01_05_on.jpg) !important;}

#T01_06 a {background-image:url(/images/top_menu_img/mnu_01_06.jpg) !important;}

#T01_06 a:hover {background-image:url(/images/top_menu_img/mnu_01_06_on.jpg) !important;}

#T02 a {background-image:url(/images/top_menu_img/mnu_02.jpg);}

#T02 a:hover, #T02 a.hover {background-image:url(/images/top_menu_img/mnu_02_on.jpg);}

#T02_01 a {background-image:url(/images/top_menu_img/mnu_02_01.jpg) !important;}

#T02_01 a:hover {background-image:url(/images/top_menu_img/mnu_02_01_on.jpg) !important;}

#T02_02 a {background-image:url(/images/top_menu_img/mnu_02_02.jpg) !important;}

#T02_02 a:hover {background-image:url(/images/top_menu_img/mnu_02_02_on.jpg) !important;}

#T02_03 a {background-image:url(/images/top_menu_img/mnu_02_03.jpg) !important;}

#T02_03 a:hover {background-image:url(/images/top_menu_img/mnu_02_03_on.jpg) !important;}

#T02_04 a {background-image:url(/images/top_menu_img/mnu_02_04.jpg) !important;}

#T02_04 a:hover {background-image:url(/images/top_menu_img/mnu_02_04_on.jpg) !important;}

#T02_05 a {background-image:url(/images/top_menu_img/mnu_02_05.jpg) !important;}

#T02_05 a:hover {background-image:url(/images/top_menu_img/mnu_02_05_on.jpg) !important;}

#T02_06 a {background-image:url(/images/top_menu_img/mnu_02_06.jpg) !important;}

#T02_06 a:hover {background-image:url(/images/top_menu_img/mnu_02_06_on.jpg) !important;}

#T02_07 a {background-image:url(/images/top_menu_img/mnu_02_07.jpg) !important;}

#T02_07 a:hover {background-image:url(/images/top_menu_img/mnu_02_07_on.jpg) !important;}

#T03 a {background-image:url(/images/top_menu_img/mnu_03.jpg);}

#T03 a:hover, #T03 a.hover {background-image:url(/images/top_menu_img/mnu_03_on.jpg);}

#T03_01 a {background-image:url(/images/top_menu_img/mnu_03_01.jpg) !important;}

#T03_01 a:hover {background-image:url(/images/top_menu_img/mnu_03_01_on.jpg) !important;}

#T03_02 a {background-image:url(/images/top_menu_img/mnu_03_02.jpg) !important;}

#T03_02 a:hover {background-image:url(/images/top_menu_img/mnu_03_02_on.jpg) !important;}

#T03_03 a {background-image:url(/images/top_menu_img/mnu_03_03.jpg) !important;}

#T03_03 a:hover {background-image:url(/images/top_menu_img/mnu_03_03_on.jpg) !important;}

#T04 a {background-image:url(/images/top_menu_img/mnu_04.jpg);}

#T04 a:hover, #T04 a.hover {background-image:url(/images/top_menu_img/mnu_04_on.jpg);}

#T04_01 a {background-image:url(/images/top_menu_img/mnu_04_01.jpg) !important;}

#T04_01 a:hover {background-image:url(/images/top_menu_img/mnu_04_01_on.jpg) !important;}

#T04_02 a {background-image:url(/images/top_menu_img/mnu_04_02.jpg) !important;}

#T04_02 a:hover {background-image:url(/images/top_menu_img/mnu_04_02_on.jpg) !important;}


#T05 a {background-image:url(/images/top_menu_img/mnu_05.jpg);}

#T05 a:hover, #T05 a.hover {background-image:url(/images/top_menu_img/mnu_05_on.jpg);}

#T05_01 a {background-image:url(/images/top_menu_img/mnu_05_01.jpg) !important; width:180px !important;}

#T05_01 a:hover {background-image:url(/images/top_menu_img/mnu_05_01_on.jpg) !important;}

#T05_02 a {background-image:url(/images/top_menu_img/mnu_05_02.jpg) !important; width:180px !important;}

#T05_02 a:hover {background-image:url(/images/top_menu_img/mnu_05_02_on.jpg) !important;}

No. Subject Author Date Views
33 prevUnitl 범위에대한 질문 초보코딩초보 2020.11.12 131
32 jquery 자동 슬라이드 가르쳐 주십시요!! 이제배워보자 2020.06.10 679
31 브라우저 control+F 기능이 정상적으로 작동하지 않습니다. Han이 2018.12.27 1967
30 자바스크립트 질문 입니다 답변 부탁드립니다 ㅠㅠ 시간을건다 2017.04.21 5755
29 닫기버튼 도와주세요/`` [2] lizliz 2017.02.05 6937
28 jquery dialog사용법 질문드립니다. CHAVO 2016.08.26 8506
27 li를 remove 시키질 못합니다 [1] 유지니아 2016.06.30 8307
26 혹시 이것 아시는분 있나요 [1] 니징구 2015.05.11 13618
25 check가 됬다 안됬다 하는 이유는 뭘까요? 미치겠슴 ㅜㅜ [1] 무념 2014.07.07 13116
» DropDown 메뉴에서 해당 페이지의 메뉴 이미지 상태 유지 문의 Larry 2013.11.18 13377
23 테이블 자동완성 [1] hururuzz 2013.07.31 16535
22 웹폼에서 자바스크립트 매개변수 보내기 질문입니다. [3] 한바위 2013.07.08 17004
21 jquery 애니메이션 질문 Stream_Pirs 2013.07.02 15785
20 결재메뉴의 조직도처럼 오른쪽 트리에서 선택한 값을 왼쪽트리로 이동하는????? 아더왕 2013.05.15 18402
19 질문드립니다. 하우ㅇ 2013.05.11 13910
18 jQuery 등으로 연간계획표를 만들 수 있을까요? [1] taz2315 2013.04.02 16619
17 뜬금없지만VBscript 관련 질문입니다.!부디 도와주소서 ㅠㅠ [1] 풀내기vber 2012.06.21 14075
16 plugin 안의 function을 어떻게 접근해야 하나요? [1] yahao 2012.05.24 10402
15 JSON.parse() json2.js 질문드립니다. [3] 자유인s 2012.05.18 15888
14 검색후 선택유지되게 할수 없을까요? [1] 오리지널 2012.04.29 16780





XE Login