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

1 개요[ | ]

pure jQuery navagation bar + dropdown
jQuery 내비게이션바 + 드롭다운
순수 jQuery로 구현한 내비게이션바 + 드롭다운
계층형 메뉴 가능 (2단계 이상 가능)
확장가능표식 자동 추가
마우스오버로 메뉴 전개
2 예시[ | ]

JavaScript
Copy
<style>
body { margin: 0; }
.zeta-menu-bar {
  background: hotpink;
  display: inline-block;
  width: 100%;
}
.zeta-menu { margin: 0; padding: 0; }
.zeta-menu li {
  float: left;
  list-style:none;
  position: relative;
}
.zeta-menu li:hover { background: white; }
.zeta-menu li:hover>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:hover { background: #ddd; }
.zeta-menu ul li:hover a { color: black; }
.zeta-menu ul a { color: black; }
.zeta-menu ul ul { left: 100%; top: 0; }
.zeta-menu ul ul li {float:left; margin-right:10px;}
</style>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
  $(".zeta-menu li").click(function(){
    $('ul:first',this).show();
  }, function(){
    $('ul:first',this).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>");
});
</script>

<div class='zeta-menu-bar'>
  <ul class="zeta-menu">
    <li><a href="">대표작</a>
                                <ul>
                                    <li><a href="">해외 건축물</a></li>
                                    <li><a href="">교육 및 의료시설</a></li>
                                    <li><a href="">주거시설</a></li>
                                    <li><a href="">공공 및 업무시설</a></li>
                                    <li><a href="">복합 및 상업시설</a></li>
                                    <li><a href="">공장 및 산업시설</a></li>
                                    <li><a href="">군,병영시설</a></li>
                                    <li><a href="">대공간 건축물</a></li>
                                    <li><a href="">초고층 건축물</a></li> 
                                </ul>
                            </li>
                            <li><a href="">시설물 종류</a>
                                <ul>
                                    <li><a href="">해외 건축물</a></li>
                                    <li><a href="">교육 및 의료시설</a></li>
                                    <li><a href="">주거시설</a></li>
                                    <li><a href="">공공 및 업무시설</a></li>
                                    <li><a href="">복합 및 상업시설</a></li>
                                    <li><a href="">공장 및 산업시설</a></li>
                                    <li><a href="">군,병영시설</a></li>
                                    <li><a href="">대공간 건축물</a></li>
                                    <li><a href="">초고층 건축물</a></li> 
                                </ul>
                            </li>
                            <li><a href="">연도별</a>
                                <ul>
                                    <li><a href="">2020년</a></li>
                                    <li><a href="">2019년</a></li>
                                    <li><a href="">2018년</a></li>
                                    <li><a href="">2017년</a></li>
                                    <li><a href="">2016년</a></li>
                                    <li><a href="">2015년</a></li>
                                </ul>
                            </li>
                            <li><a href="">수행방식</a>
                                <ul>
                                    <li><a href="">해외 건축물</a></li>
                                    <li><a href="">교육 및 의료시설</a></li>
                                    <li><a href="">주거시설</a></li>
                                    <li><a href="">공공 및 업무시설</a></li>
                                    <li><a href="">복합 및 상업시설</a></li>
                                    <li><a href="">공장 및 산업시설</a></li>
                                    <li><a href="">군,병영시설</a></li>
                                    <li><a href="">대공간 건축물</a></li>
                                    <li><a href="">초고층 건축물</a></li> 
                                </ul>
</li>
  </ul>
</div>
3 같이 보기[ | ]
