JQuery 내비게이션바 + 마우스클릭 드롭다운

1 개요

jQuery 내비게이션바 + 마우스클릭 드롭다운

• 마우스클릭으로 메뉴 펼침
• 터치 환경에서도 잘 작동함
• 외부 클릭시(blur) 메뉴 비활성화 가능

2 예시

<style>
body { margin: 0; }
.zeta-menu-bar {
  background: white;
  display: white;
  width: 100%;
}
.zeta-menu { margin: 0; padding: 0; }
.zeta-menu li {
  float: left;
  list-style:none;
  position: relative;
}
.zeta-menu li:hover { background: pink; }
.zeta-menu li.expand { background: white; }
.zeta-menu li.expand>a { color: hotpink; }
.zeta-menu a {
  color: white;
  display: block;
  padding: 10px 20px;
  text-decoration: none;
}
.zeta-menu ul {
  background: #eee;
  border: 1px solid silver;
  display: none;
  padding: 0;
  position: absolute;
  left: 0;
  top: 100%;
  width: 180px;
}
.zeta-menu ul li { float: none; }
.zeta-menu ul li.expand { background: #ddd; }
.zeta-menu ul li.expand a { color: black; }
.zeta-menu ul a { color: black; }
.zeta-menu ul ul { left: 100%; top: 0; }
</style>
 
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
	$(document).mouseup(function(e) {
		if ($(e.target).parents('.zeta-menu').length == 0) {
			$('.zeta-menu li').removeClass('expand');
			$('.zeta-menu ul').hide();
		}
	});
	$(".zeta-menu>li:has(ul)>a").each( function() {
		$(this).html( $(this).html()+' &or;' );
	});
	$(".zeta-menu ul li:has(ul)")
		.find("a:first")
		.append("<p style='float:right;margin:-3px'>&#9656;</p>");

	$(".zeta-menu li>a").click(function(){
		var li = $(this).parent();
		var ul = li.parent()
		ul.find('li').removeClass('expand');
		ul.find('ul').not(li.find('ul')).hide();
		li.children('ul').toggle();
		if( li.children('ul').is(':visible') || li.has('ul')) {
			li.addClass('expand');
		}
	});
});
</script>
 
<div class='zeta-menu-bar'>
  <ul class="zeta-menu">
    <li><a href="#0">홈</a></li>
    <li><a href="#1">1번 메뉴</a></li>
    <li><a href="#2">2번 메뉴</a>
      <ul>
        <li><a href="#2A">2-A 메뉴</a></li>
        <li><a href="#2B">2-B 메뉴</a>
          <ul>
            <li><a href="#2B1">2-B-1 메뉴</a></li>
            <li><a href="#2B2">2-B-2 메뉴</a></li>
          </ul>
        </li>
        <li><a href="#2C">2-C 메뉴</a></li>
        <li><a href="#2D">2-D 메뉴</a>
          <ul>
            <li><a href="#2D1">2-D-1 메뉴</a></li>
            <li><a href="#2D2">2-D-2 메뉴</a></li>
            <li><a href="#2D3">2-D-3 메뉴</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#3">3번 메뉴</a>
      <ul>
        <li><a href="#3A">3-A 메뉴</a></li>
        <li><a href="#3B">3-B 메뉴</a></li>
      </ul>
    </li> 
    <li><a href="#4">4번 메뉴</a></li> 
  </ul>
</div>

3 같이 보기

• jQuery 내비게이션바 + 마우스오버 드롭다운