gnb, lnb, 타이틀 자동으로 제어하기

 //gnb, lnb 자동으로 제어하기

 

    var page   = $navi.split("_"); // _ 단위로 잘라 배열에 넣는다

 

   var depth1 = page[0] - 1;

    var depth2 = page[1] - 1;

    var depth3 = page[2] - 1; 

    var sub1   = depth1 + 1;

    var sub2   = depth2 + 1;

    var sub3   = depth3 + 1;

    

    var gnbImg1 = $('#gnb > ol > li:eq(' + depth1 + ') > a > img');  // gnb 이미지

    var gnbImg2 = $('#gnb > ol > li:eq(' + depth1 + ') > ul > li:eq(' + depth2 + ') > a > img'); // gnb하위 메뉴 이미지

    var gnbD1   = $('#gnb > ol > li:eq(' + depth1 + ')'); // gnb li

    var gnbD2   = $('#gnb > ol > li:eq(' + depth1 + ') > ul > li:eq(' + depth2 + ')'); // gnb 하위 li

    var lnbTit  = $('#lnb > h2'); //lnb타이틀

    var lnbImg1 = $('#lnb > ol > li:eq(' + depth2 + ') > a > img'); //lnb 이미지

    var lnbImg2 = $('#lnb > ol > li:eq(' + depth2 + ') > ul > li:eq(' + depth3 + ') > a > img'); //lnb하위 메뉴 이미지

    var lnbD3   = $('#lnb > ol > li:eq(' + depth2 + ') > ul'); //lnb 

    

    var scrumb = "Home";

    var scrumb1 = gnbImg1.attr('alt'); // gnb 이미지 alt속성 값(gnb 이름)

   var scrumb2 = gnbImg2.attr('alt'); // gnb하위메뉴 이미지 alt속성 값(하위gnb 이름)

    var scrumb3 = lnbImg2.attr('alt'); // lnb 이미지 alt속성 값(lnb 이름)

    var link1 = $('#gnb > ol > li:eq(' + depth1 + ') > a').attr('href');

    var link2 = $('#gnb > ol > li:eq(' + depth1 + ') > ul > li:eq(' + depth2 + ') > a').attr('href');

    var scrumb = scrumb + ' &gt; ' + '<a href="'+link1+'">' + scrumb1 + '</a>'; //Home > 해당 gnb 이름

    var scrumb = scrumb + ' &gt; ' + '<em>' + scrumb2 + '</em>'; //Home > 해당 gnb 이름 > 해당 하위gnb이름

    var conTit  = $('#title');

    var conTit2  = $('h5.title'); 

 

 

     if (page[1] != 0) {  //page[1]이 0이 아니면, (0이 될 수가 없음. 무조건 실행)

        gnbD1.addClass('current'); //gnb li에 current클래스 삽입

        gnbD2.addClass('current'); //gnb 하위 li에 current클래스 삽입

        lnbD3.parent().addClass('current'); //lnb li에 current클래스 삽입

        gnbImg1.attr('src', gnbImg1.attr('src').replace('_off', '_on')); //gnb img속성 src에 _off를 _on으로 교체

        gnbImg1.parent().siblings().show(); //gnb img의 부모의 형제들(ul을 가르킴. lnbD3)를 보여준다

        gnbImg2.attr('src', gnbImg2.attr('src').replace('_off', '_on'));

        lnbTit.empty();

        lnbTit.append('<img src="../img/custom/h2_' + sub1 + '.gif" alt="" />');

        lnbImg1.attr('src', lnbImg1.attr('src').replace('_off', '_on'));

        conTit.empty();

        conTit.append('<img src="../img/custom/h3_' + sub1 + '_' + sub2 + '.gif" alt="" />');

    }else if(page[1] == 0) {

        lnbTit.empty();

        lnbTit.append('<img src="../img/custom/h2_' + sub1 + '.gif" alt="" />');

        conTit.empty();

        conTit.append('<img src="../img/custom/h3_' + sub1 + '.gif" alt="" />');

        if (sub1 == "5") {

            var scrumb1 = 'notice';

        }if(sub1 == "6"){

            var scrumb1 = 'Sitemap';

  }

  scrumb = ' Home ' + ' &gt; ' + '<em>' + scrumb1 + '</em>';

        scrumb2 = scrumb1

    }

    

 if (page[2] != 0) {

  scrumb = 'Home' + ' &gt; ' + '<a href="'+link1+'">' + scrumb1 + '</a>' + ' &gt; ' + '<a href="'+link2+'">' + scrumb2 + '</a>' + ' &gt; ' + '<em>' + scrumb3 + '</em>';

        conTit2.empty();

        conTit2.append('<img src="../img/custom/h3_' + sub1 + '_' + sub2 + '_' + sub3 + '.gif" alt="" />');

        lnbImg2.attr('src', lnbImg2.attr('src').replace('_off', '_on'));

        lnbD3.slideDown(400);

    }

    

    $('#scrumb').html(scrumb); //scrumb를  id명 scrumb에 뿌려준다.

 

 

 

//gnb

    $('#gnb > ol > li').mouseover(function(event){

        $('#gnb > ol > li:has(a)').each(function() {

            $(this).children().children().attr('src', $(this).children().children().attr('src').replace('_on', '_off'));

        });

  $('#gnb > ol > li:has(ul)').each(function() {

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

        });

  //$(this).parent().siblings().hide();

        $(this).siblings().children().children('img:first').attr('src', $(this).siblings().children().children('img:first').attr('src').replace('_on', '_off'));

  if( gnbImg1.length > 0 ) gnbImg1.attr('src', gnbImg1.attr('src').replace('_off', '_on'));

        $(this).children().children().attr('src', $(this).children().children().attr('src').replace('_off', '_on'));

        $(this).children('ul').show();

 });

    $('#gnb > ol > li').mouseout(function(event){

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

  $(this).children().children().attr('src', $(this).children().children().attr('src').replace('_on', '_off'));

  if(page[1] != 0) {

   if( gnbImg1.length > 0 ){

    gnbImg1.attr('src', gnbImg1.attr('src').replace('_off', '_on'));

    gnbImg1.parent().siblings().show();

   }

  }

    });

 $('#gnb > ol > li > ul > li').mouseover(function(event){

        $(this).children().children().attr('src', $(this).children().children().attr('src').replace('_off', '_on'));

 });

 $('#gnb > ol > li > ul > li').mouseout(function(event){

        $(this).children().children().attr('src', $(this).children().children().attr('src').replace('_on', '_off'));

  if(page[1] != 0) {

   gnbImg2.attr('src', gnbImg2.attr('src').replace('_off', '_on'));

  }

 });

    //lnb

    $('#lnb > ol > li:has(ul)').click(function(event){

        $('#lnb > ol > li:has(ul)').each(function() {

            if ($(this).hasClass('current')){

                $(this).removeClass('current');

                $(this).children('ul').slideUp(400);

                $(this).children().children().attr('src', $(this).children().children().attr('src').replace('_on', '_off'));

            }

        });

        $(this).children().children().attr('src', $(this).children().children().attr('src').replace('_off', '_on'));

        $(this).children().children().mouseout(function() {

            $(this).attr('src', $(this).attr('src').replace('_off', '_on'));

        });

        $(this).addClass('current');

        $(this).children('ul').slideDown(400);

    });

 $('#lnb ol li ul li').click(function(event){

  $('#lnb ol li ul li').each(function() {

   if ($(this).hasClass('current')) {

       $(this).removeClass('current');

                $(this).children().children().attr('src', $(this).children().children().attr('src').replace('_on', '_off'));

   }

  });

  $(this).addClass('current');

        $(this).children().children().attr('src', $(this).children().children().attr('src').replace('_off', '_on'));

        $(this).children().children().mouseout(function() {

            $(this).attr('src', $(this).attr('src').replace('_off', '_on'));

        });

        lnbImg2.attr('src', lnbImg2.attr('src').replace('_on', '_off'));

 });

[출처] gnb, lnb, 타이틀 자동으로 제어하기 |작성자 혜벙벙