네비게이션 드롭다운 메뉴 수정 #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>
 
이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기 이 글을 내 구글플러스 계정으로 보내기

이 질문에 댓글 쓰기 :

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

회원로그인

진행중 포인트경매

  1. 관리자가 승인한 글만 목록에 노출하는 게시판 스킨

    참여9 회 시작19.01.18 15:18 종료19.01.25 15:18
  2. 그누보드5 배너관리 솔루션

    참여3 회 시작19.01.18 15:09 종료19.01.23 15:09

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

© SIRSOFT