네비게이션 드롭다운 메뉴 수정 #breadcrumbs .depth3

네비게이션 드롭다운 메뉴 수정 #breadcrumbs .depth3

QA

SIR 제작의뢰 - 견적무료/익명보정/호스팅, DB 이전/단기개발. 이젠 ' 의뢰인'이 원하는 '제작자'에게만 연락처를 알릴 수 있습니다.

네비게이션 드롭다운 메뉴 수정 #breadcrumbs .depth3

본문

테마사용중에 아래와 같이 로케이션에 네비게이션 드론다운 메뉴를 3단계까지 출력하고 싶은데요.

현재 2단계까지만 출력이 되도록 나와 있어서 

 

제이쿼리를 소스는 갖다가 쓰기는 하는데 이렇게 수정하려니 좀 난감하네요 ㅜㅜ

3단계 추가하려면 어떻게 코드를 수정해야 할지

고수님들께 조언좀 부탁드리겠습니다~ 

 

31971226_1533002912.8131.png

jQuery CODE >> 

$(document).ready(function () {
            $('.animate').scrolla({
                mobile: true
            });
    $(".depth1").hover(function () {
                $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("400");
                $(this).toggleClass('open');
            }, function () {
                $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("400");
                $(this).toggleClass('open');
            });
           $(".depth2").hover(function () {
                $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("400");
                $(this).toggleClass('open');
            }, function () {
                $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("400");
                $(this).toggleClass('open');
            });
        });
$(document).ready(function () {
var depthActive = function() {
  var topCount = $("#nav_wrap > .lnb > li").length,
   subCount = 0;
   topName = [],
   subName = [],
   topURL = [],
   subURL = [],
   topHTML = "",
   subHTML = ""; 
  $("#nav_wrap > .lnb  > li").each(function(i) {
   topName[i] = $(this).children('a').text();
   topURL[i] = $(this).children('a').attr('href');
   i++;
  });
  topHTML += '<ul class="dropdown-menu" role="menu">'; 
  for(i=0; i<topCount; i++) {
   topHTML += '<li><a href="' + topURL[i] + '">' + topName[i] + '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></li>';
  }
  topHTML += '</ul>';
  $("#breadcrumbs .depth1").append(topHTML);
  if(topDepth !== -1 && subDepth !== -1) {
   subCount = $("#nav_wrap > .lnb  > li:eq(" + topDepth + ")").find('ul').children().length;
   $("#nav_wrap > .lnb  > li:eq(" + topDepth + ")").find('ul').children().each(function(i) {
    subName[i] = $(this).find('a').text();
    subURL[i] = $(this).find('a').attr('href');
    i++;
   });
   subHTML += '<ul class="dropdown-menu" role="menu">'; 
   for(i=0; i<subCount; i++) {
    subHTML += '<li><a href="' + subURL[i] + '">' + subName[i] + '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></li>';
   }
   subHTML += '</ul>';
   $("#breadcrumbs .depth2").append(subHTML);
   $("#breadcrumbs .depth1 > a").text($("#nav_wrap > .lnb > li:eq(" + topDepth + ")").find('a:first').text());
   $("#breadcrumbs .depth2 > a").text($("#nav_wrap > .lnb  > li:eq(" + topDepth + ")").find('ul').children().eq(subDepth).find('a').text());
 $("#navbar > .navbar-nav > li:eq(" + topDepth + ")").addClass('on open');
   $("#navbar > .navbar-nav > li:eq(" + topDepth + ")").find('ul').children().eq(subDepth).addClass('on');
   */
  }
 };
    
depthActive();
});
 

 

 

 

 

 

HTML CODE >> 

 

gnb 메뉴


<nav id="nav_wrap">
    <ul class="lnb">
        <li> <a href="#">회사소개</a>
            <ul class="subnav">
                <li><a href="#">회사소개</a>
                    <ul>
                        <li><a href="/">menu3-1</a></li>
                        <li><a href="/">menu3-2</a></li>
                    </ul>                                        
                </li>
                <li><a href="#">CEO인사말</a></li>
                <li><a href="#">찾아오시는 길</a></li>
            </ul>
        </li>
    </ul>
</nav>
 

 

 

 

로케이션 네비게이션 뿌려지는 부분


<div id="breadcrumbs" class="breadcrumb_wrap">
    <div class="container">
    <div class="sub_tab pull-left">
        <li><a href="<?php echo G5_URL?>"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a></li>
        <li class="depth1 btn-group" role="group">
        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></a>
        </li>
        <li class="depth2 btn-group" role="group">
        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></a> <span class="caret hidden"></span> </li>
        <li class="depth3 btn-group" role="group">
        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></a> <span class="caret hidden"></span> </li>
    </div>
    <ol class="breadcrumb pull-right">
        <li><a href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> </a></li>
        <li class="depth1">
        <a></a>
        </li>
        <li class="depth2 active">
        <a></a>
        </li>
    </ol>
    </div>
</div>
 
이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기 이 글을 내 구글플러스 계정으로 보내기

이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
전체 72,212 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

진행중 포인트경매

  1. @멘션 알림 플러그인

    참여9 회 시작19.03.18 09:33 종료19.03.25 09:33

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT