드롭다운 메뉴 적용 예
개별 드롭다운
http://comlearn.co.kr/ex/drop1.html
구조)
<header class="header">
<div class="logo-nav">
<h1 class="logo">
<a href="index.html">
<img src="images/logo.png" alt="로고">
</a>
</h1>
<nav class="nav">
<ul class="main-nav">
<li><a href="#">nav-1</a>
<ul class="drop-down">
<li><a href="#">nav1-1</a></li>
<li><a href="#">nav1-2</a></li>
<li><a href="#">nav1-3</a></li>
</ul>
</li>
<li><a href="#">nav-2</a>
<ul class="drop-down">
<li><a href="#">nav2-1</a></li>
<li><a href="#">nav2-2</a></li>
<li><a href="#">nav2-3</a></li>
</ul>
</li>
<li><a href="#">nav-3</a>
<ul class="drop-down">
<li><a href="#">nav3-1</a></li>
<li><a href="#">nav3-2</a></li>
<li><a href="#">nav3-3</a></li>
</ul>
</li>
<li><a href="#">nav-4</a>
<ul class="drop-down">
<li><a href="#">nav4-1</a></li>
<li><a href="#">nav4-2</a></li>
<li><a href="#">nav4-3</a></li>
</ul>
</li>
<li><a href="#">nav-5</a>
<ul class="drop-down">
<li><a href="#">nav5-1</a></li>
<li><a href="#">nav5-2</a></li>
<li><a href="#">nav5-3</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
그룹 드롭다운1
http://comlearn.co.kr/ex/drop2.html
구조)
<nav class="nav">
<ul class="main-nav">
<li><a href="#">nav-1</a>
<div class="drop-down-wrap">
<ul class="drop-down">
<li>네비1-1</li>
<li><a href="#">nav1-1</a></li>
<li><a href="#">nav1-2</a></li>
<li><a href="#">nav1-3</a></li>
</ul>
<ul class="drop-down">
<li>네비1-2</li>
<li><a href="#">nav1-1</a></li>
<li><a href="#">nav1-2</a></li>
<li><a href="#">nav1-3</a></li>
</ul>
<ul class="drop-down">
<li>네비1-3</li>
<li><a href="#">nav1-1</a></li>
<li><a href="#">nav1-2</a></li>
<li><a href="#">nav1-3</a></li>
</ul>
<ul class="drop-down">
<li>네비1-4</li>
<li><a href="#">nav1-1</a></li>
<li><a href="#">nav1-2</a></li>
<li><a href="#">nav1-3</a></li>
</ul>
<ul class="drop-down">
<li>네비1-5</li>
<li><a href="#">nav1-1</a></li>
<li><a href="#">nav1-2</a></li>
<li><a href="#">nav1-3</a></li>
</ul>
</div>
</li>
<li><a href="#">nav-2</a>
<div class="drop-down-wrap">
<ul class="drop-down">
<li>네비2-1</li>
<li><a href="#">nav2-1</a></li>
<li><a href="#">nav2-2</a></li>
<li><a href="#">nav2-3</a></li>
</ul>
<ul class="drop-down">
<li>네비2-2</li>
<li><a href="#">nav2-1</a></li>
<li><a href="#">nav2-2</a></li>
<li><a href="#">nav2-3</a></li>
</ul>
<ul class="drop-down">
<li>네비2-3</li>
<li><a href="#">nav2-1</a></li>
<li><a href="#">nav2-2</a></li>
<li><a href="#">nav2-3</a></li>
</ul>
<ul class="drop-down">
<li>네비2-4</li>
<li><a href="#">nav2-1</a></li>
<li><a href="#">nav2-2</a></li>
<li><a href="#">nav2-3</a></li>
</ul>
<ul class="drop-down">
<li>네비2-5</li>
<li><a href="#">nav1-1</a></li>
<li><a href="#">nav1-2</a></li>
<li><a href="#">nav1-3</a></li>
</ul>
</div>
</li>
<li><a href="#">nav-3</a>
</li>
<li><a href="#">nav-4</a>
</li>
<li><a href="#">nav-5</a>
</li>
</ul>
</nav>
그룹 드롭다운2
http://comlearn.co.kr/ex/drop3.html
그룹 드롭다운3, jquery
http://comlearn.co.kr/ex/drop4.html
구조)
<nav class="nav">
<ul class="main-nav">
<li><a href="#">nav-1</a>
</li>
<li><a href="#">nav-2</a>
</li>
<li><a href="#">nav-3</a>
</li>
<li><a href="#">nav-4</a>
</li>
<li><a href="#">nav-5</a>
</li>
</ul>
<div class="drop-nav">
<div class="drop-down-wrap">
<ul class="drop-down">
<li>네비1-1</li>
<li><a href="#">nav1-1</a></li>
<li><a href="#">nav1-2</a></li>
<li><a href="#">nav1-3</a></li>
</ul>
<ul class="drop-down">
<li>네비2-1</li>
<li><a href="#">nav2-1</a></li>
<li><a href="#">nav2-2</a></li>
<li><a href="#">nav2-3</a></li>
</ul>
<ul class="drop-down">
<li>네비3-1</li>
<li><a href="#">nav3-1</a></li>
<li><a href="#">nav3-2</a></li>
<li><a href="#">nav3-3</a></li>
</ul>
<ul class="drop-down">
<li>네비4-1</li>
<li><a href="#">nav4-1</a></li>
<li><a href="#">nav4-2</a></li>
<li><a href="#">nav4-3</a></li>
</ul>
<ul class="drop-down">
<li>네비5-1</li>
<li><a href="#">nav5-1</a></li>
<li><a href="#">nav5-2</a></li>
<li><a href="#">nav5-3</a></li>
</ul>
</div>
</div>
</nav>
css
.nav{
width:85%;
height:80%;
border:1px solid black;
float:left;
top:10%;
}
.main-nav{
list-style:none;
margin:0;
padding:0;
width:100%;
height:100%;
text-align:center;
/*inline의 요소를 가운데 정렬 */
/*display:flex;
justify-content:center;
*/
/*display:table; */
}
.main-nav>li{
width:17%;
background:transparent;
display:inline-block;
height:70%;
margin-top:15px;
/* position:relative; */
}
.main-nav>li>a{
height:100%;
display:flex;
justify-content:center;
align-items:center;
background:darkred;
color:white;
font-weight:bold;
transition:0.5s;
}
.main-nav>li>a:hover{
background:red;
box-shadow:2px 2px 2px black;
text-shadow:0px 0px 5px black;
}
.drop-nav{
position:absolute;
top:72px; left:100px;
background:white;
width:85%;
display:none;
text-align:center;
z-index:999999;
}
.drop-down-wrap{
display:inline-block;
width:100%;
}
ul.drop-down{
list-style:none;
padding:0;
margin:0;
position:relative;
top:0;
left:0;
width:17%;
height:auto;
background:transparent;
top:20px;
padding-top:0;
display:inline-block;
}
.drop-down>li{
width:100%;
}
.drop-down>li>a{
background:orange;
padding:10px 10px;
display:block;
/* inline | block | none | table | table-cell | flex | inline-block*/
/* 글자 박스 숨김 테이블 셀 정렬 글자 취급과 박스*/
border-bottom:1px dotted black;
}
.drop-down>li:last-child >a{
border-bottom:none;
}
.drop-down>li:first-child{
background:white;
padding:15px 0;
}
.main-nav>li:hover .drop-down-wrap{
display:block;
}
jquery
$(document).mouseover(function(event){
if($(event.target).parents(".nav").length==0){
$(".drop-nav").hide();
}
});
$(".main-nav>li").each(function(index){
$(this).mouseenter(
function(){
$(".drop-down>li>a").css({
background:"orange"
});
console.log(index);
$(".drop-nav").show();
$(".drop-down").eq(index).find("a").css({
background:"red"
});
});
});
$(".drop-down").each(function(index){
$(this).hover(
function(){
$("a",this).css({background:"red"});
},
function(){
$(".drop-down>li>a").css({
background:"orange"
});
}
);
});