Vertical 3depth LNB Menu type(세로형 3뎁스 메뉴타입)

Vertical  3depth LNB Menu type

이 포스팅에서는 3depth 타입의 세로형 메뉴에 대해 소개하고자 합니다.

해당 CSS는 프로젝트 환경에 적합하도록 커스텀하여 사용하시기 바랍니다.

HTML

html

<div id="lnb">
  <h1>LNB 타이틀</h1>
  <ul>
    <li><a href="#none">1Depth</a>
      <ul>
        <li><a href="#none">- 2Depth</a>
          <ul>
            <li><a href="#none">- 3Depth</a></li>
            <li><a href="#none">- 3Depth</a></li>
            <li><a href="#none">- 3Depth</a></li>
          </ul>
        </li>
        <li><a href="#none">- 2Depth</a>
          <ul>
            <li><a href="#none">- 3Depth</a></li>
            <li><a href="#none">- 3Depth</a></li>
          </ul>
        </li>
        <li><a href="#none">- 2Depth</a></li>
        <li><a href="#none">- 2Depth</a></li>
      </ul>
    </li>
    
    <li><a href="#none">1Depth</a>
      <ul>
        <li><a href="#none">- 2Depth</a>
          <ul>
            <li><a href="#none">- 3Depth</a></li>
            <li><a href="#none">- 3Depth</a></li>
          </ul>
        </li>
        <li><a href="#none">- 2Depth</a>
          <ul>
            <li><a href="#none">- 3Depth</a></li>
            <li><a href="#none">- 3Depth</a></li>
            <li><a href="#none">- 3Depth</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#none">1Depth</a>
      <ul>
        <li><a href="#none">- 2Depth</a></li>
        <li><a href="#none">- 2Depth</a></li>
      </ul>
    </li>
    <li><a href="#none">1Depth</a>
      <ul>
        <li><a href="#none">- 2Depth</a></li>
        <li><a href="#none">- 2Depth</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS

css

* {margin: 0;padding: 0;}
body {width: 700px;margin: 20px auto;}
li {list-style: none;}
a {}


/* lnb */
#lnb {position: relative;width: 200px;}
#lnb h1 {height: 40px;text-align: center;color: #fff;font-size: 20px;line-height: 1.8;letter-spacing: -2px; background: #d71a21;}
#lnb > ul {}
#lnb > ul > li { border-bottom: 1px solid #dcdcdc;}
#lnb > ul > li > a {display: block;padding: 14px 35px 14px 15px; color: inherit; font-size: 14px;background:#f5f2ec url(https://t1.daumcdn.net/cfile/tistory/2417E04D570C5C0225) no-repeat 95% 15px;}
#lnb > ul > li a:hover {color: #d91c1b; background-color: #f5f2ec;}
#lnb > ul > li.on > a {color: #d91c1b; background: #f5f2ec url('https://t1.daumcdn.net/cfile/tistory/257B794F570C5C0D1A') no-repeat 95% 14px;}
#lnb > ul > li ul {display: none;}
#lnb > ul > li > ul > li > a {display: block;padding: 0 25px 14px 14px;color: #inherit; font-size: 12px;background: #f5f2ec url('https://t1.daumcdn.net/cfile/tistory/2417E04D570C5C0225') no-repeat 95% 1px;}
#lnb > ul > li > ul > li > a {color: #d91c1b; background-color: #f5f2ec; }
#lnb > ul > li > ul > li.on a {color: #d91c1b; background: #f5f2ec url('https://t1.daumcdn.net/cfile/tistory/257B794F570C5C0D1A') no-repeat 95% 3px; }
#lnb > ul > li > ul li ul {display: none;padding-bottom: 8px;background-color: #f5f2ec;}
#lnb > ul > li > ul li li a {display: block;padding: 0 25px 10px 22px; color: #666; font-size: 12px;background-color: #f5f2ec;}
#lnb > ul > li > ul > li li a:hover {color: #d91c1b;}
#lnb > ul li.noDepth a {background-image: none !important; }

javaScript

javascript

/* lnb */
(function($){
  
  var lnbUI = {
    click : function (target, speed) {
      var _self = this,
          $target = $(target);
      _self.speed = speed || 300;
      
      $target.each(function(){
        if(findChildren($(this))) {
          return;
        }
        $(this).addClass('noDepth');
      });
      
      function findChildren(obj) {
        return obj.find('> ul').length > 0;
      }
      
      $target.on('click','a', function(e){
          e.stopPropagation();
          var $this = $(this),
              $depthTarget = $this.next(),
              $siblings = $this.parent().siblings();
        
        $this.parent('li').find('ul li').removeClass('on');
        $siblings.removeClass('on');
        $siblings.find('ul').slideUp(250);
        
        if($depthTarget.css('display') == 'none') {
          _self.activeOn($this);
          $depthTarget.slideDown(_self.speed);
        } else {
          $depthTarget.slideUp(_self.speed);
          _self.activeOff($this);
        }
        
      })
      
    },
    activeOff : function($target) {
      $target.parent().removeClass('on');
    },
    activeOn : function($target) {
      $target.parent().addClass('on');
    }
  };
  
  // Call lnbUI
  $(function(){
    lnbUI.click('#lnb li', 300)
  });
  
}(jQuery));

Result View

Jaehee's WebClub