반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
#gnb {width:500px; background:#ccc;}
#gnb > li {display:inline-block; }
#gnb > li > a {display:block; line-height:25px; width:80px; text-align:center;}
#gnb > li.on a {background:#777; color:#fff;}
#gnb li ul {position:absolute; width:80px; height:0; overflow:hidden;}
#gnb li.on ul {height:auto; background:#777;}
#gnb li.on li {margin-bottom:5px;}
#gnb li ul li a {margin:3px 0 3px 10px; color:#fff;}
</style>
</head>
<body>
<ul id="gnb">
<li>
<a href="">Menu1</a>
<ul>
<li><a href="">Menu1-1</a></li>
<li><a href="">Menu1-2</a></li>
<li><a href="">Menu1-3</a></li>
</ul>
</li>
<li>
<a href="">Menu2</a>
<ul>
<li><a href="">Menu2-1</a></li>
<li><a href="">Menu2-2</a></li>
</ul>
</li>
<li>
<a href="">Menu3</a>
<ul>
<li><a href="">Menu3-1</a></li>
<li><a href="">Menu3-2</a></li>
<li><a href="">Menu3-3</a></li>
<li><a href="">Menu3-4</a></li>
</ul>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
(function(){
$("#gnb > li").bind("mouseenter focusin", function() {
$(this).addClass("on").siblings().removeClass("on");
});
$("#gnb > li").bind("mouseleave focusout", function() {
$(this).removeClass("on");
});
})();
</script>
</body>
</html>
728x90
반응형
'web > 완성소스' 카테고리의 다른 글
| 삼성 드레그 메뉴 소스 ( 자작 ) (0) | 2020.09.14 |
|---|---|
| 핀터레스트 형태 sort 기능 추가 (0) | 2019.03.27 |
| gnb 접근성 tab 이동 2번째 (0) | 2019.02.08 |