jQuery 내비게이션바 + 멀티컬럼 드롭다운

1 개요[ | ]

pure jQuery navagation bar + multicolumn dropdown
jQuery 내비게이션바 + 멀티컬럼 드롭다운

순수 jQuery로 구현한 내비게이션바 + 멀티컬럼 드롭다운
CSS는 normalize.css 기반으로 작성
확장가능표식 자동 추가
header, divider 사용 가능

2 예시[ | ]

예제: http://zetawiki.com/ex/jquery/navbar-dropdown-multicolumn.html

<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css'>
<style>
.zeta-menu-bar {
  background: hotpink;
  width: 100%;
  display: inline-block;
}
.zeta-menu { padding: 0; margin: 0; }
.zeta-menu li { float: left; list-style:none; }
.zeta-menu>li:hover { background: white; position: relative; }
.zeta-menu>li:hover a { color: black; }
.zeta-menu a {
  text-decoration: none;
  display: block;
  padding: 10px 20px;
  color: white;
}
.zeta-menu div {
  background: white;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 3px 6px #ccc;
  display: table;
  position: absolute;
  left: 0;
  top: 100%;
  padding: 0;
  margin: 0;
  min-width: 150px;
}
.zeta-menu div a { color: black; padding: 5px 10px; }
.zeta-menu ul {
  padding: 0;
  margin: 0;
  display: table-cell;
}
.zeta-menu div li {
  color: #000;
  float: none;
  padding: 3px 10px;
}
.zeta-menu div li:hover { background: #eee; }
.zeta-menu div li:hover a { color: black; }
.zeta-menu div ul:not(:first-child) { border-left: 1px solid silver; }
.zeta-menu .dropdown-header {
  padding: 3px 20px;
  font-size: 12px;
  color: #999 !important;
  background: white !important;
}
.zeta-menu .divider {
  height: 1px;
  margin: 4px 2px;
  padding: 0;
  background: #ddd !important;
}
</style>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
  $(".zeta-menu>li:has(ul)>a").each( function() {
    $(this).html( $(this).html()+' &or;' );
  });
  $(".zeta-menu li").hover(function(){
    $('div',this).show();
  }, function(){
    $('div',this).hide();
  });
});
</script>

<div class='zeta-menu-bar'>
  <ul class="zeta-menu">
    <li><a href="#">홈</a></li>
    <li><a href="#">1번 메뉴</a></li>
    <li><a href="#">2번 메뉴</a>
      <div style='width:300px;'>
        <ul>
          <li class='dropdown-header'>헤더 2A</li>
          <li><a href="#">2A-1 메뉴</a></li>
          <li><a href="#">2A-2 메뉴</a></li>
          <li><a href="#">2A-3 메뉴</a></li>
          <li><a href="#">2A-4 메뉴</a></li>
        </ul>
        <ul>
          <li><a href="#">2B-1 메뉴</a></li>
          <li><a href="#">2B-2 메뉴</a></li>
         
        </ul>
      </div>
    </li>
    <li><a href="#">3번 메뉴</a>
      <div>
        <ul>
          <li><a href="#">3-1 메뉴</a></li>
          <li class="divider"></li>
          <li><a href="#">3-2 메뉴</a></li>
          <li><a href="#">3-3 메뉴</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">4번 메뉴</a></li>
  </ul>
</div>

3 같이 보기[ | ]