안녕하세요.

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;}





안녕하세요~