QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
제이쿼리로 탭메 만들기
<style>
* {
margin: 0;
padding: 0;
font-family: 'GmarketSans';
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
display: flex;
}
.header {
width: 20%;
background-color: #eae4e9;
}
.nav {
width: 80%;
background-color: #fff1e6;
}
#section {
width: 100%;
height: 300px;
background-color: #fde2e4;
}
#article {
width: 100%;
height: 200px;
display: flex;
}
.a1 {
width: 33.333%;
background-color: #fad2e1;
}
.a2 {
width: 33.333%;
background-color: #e2ece9;
}
.a3 {
width: 33.333%;
background-color: #bee1e6;
}
#footer {
width: 100%;
height: 100px;
display: flex;
}
.f1 {
width: 20%;
background-color: #f0efeb;
}
.f2 {
width: 60%;
background-color: #dfe7fd;
}
.f3 {
width: 20%;
background-color: #cddafd;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
}
.nav {
width: 80%;
}
.nav > ul {
display: flex;
justify-content: right;
padding: 30px 40px;
}
.nav > ul > li {
position: relative;
}
.nav > ul > li > a {
background-color: #bccaee;
display: block;
padding: 10px 40px;
}
.nav > ul > li > a:hover {
background-color: #7e97d6;
}
.nav > ul > li > ul {
position: absolute;
left: 0;
top: 40px;
background-color: #ccc;
width: 100%;
display: none;
}
/* .nav > ul > li > ul > li {} */
.nav > ul > li > ul > li > a {
padding: 10px;
display: block;
}
.nav > ul > li > ul > li > a:hover {
background-color: #eceaea;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<header class="header">로고</header>
<nav class="nav">
<ul>
<li>
<a href="#">메뉴1</a>
<ul class="submenu">
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-2</a></li>
<li><a href="#">서브메뉴1-3</a></li>
<li><a href="#">서브메뉴1-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴2</a>
<ul class="submenu">
<li><a href="#">서브메뉴2-1</a></li>
<li><a href="#">서브메뉴2-2</a></li>
<li><a href="#">서브메뉴2-3</a></li>
<li><a href="#">서브메뉴2-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴3</a>
<ul class="submenu">
<li><a href="#">서브메뉴3-1</a></li>
<li><a href="#">서브메뉴3-2</a></li>
<li><a href="#">서브메뉴3-3</a></li>
<li><a href="#">서브메뉴3-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴4</a>
<ul class="submenu">
<li><a href="#">서브메뉴4-1</a></li>
<li><a href="#">서브메뉴4-2</a></li>
<li><a href="#">서브메뉴4-3</a></li>
<li><a href="#">서브메뉴4-4</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<section id="section">이미지 슬라이드</section>
<article id="article">
<article class="a1">공지사항/갤러리</article>
<article class="a2">배너</article>
<article class="a3">바로가기</article>
</article>
<footer id="footer">
<footer class="f1">로고</footer>
<footer class="f2">COPYRIGHT</footer>
<footer class="f3">SNS</footer>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
하나씩 내려오는 탭
//mouseover
$(".nav > ul > li").mouseover(function(){
$(this).find(".submenu").stop().slideDown();
});
//mouseout
$(".nav > ul > li").mouseout(function(){
$(this).find(".submenu").stop().slideUp();
});- mouseover는 마우스 커서가 요소 위로 이동했을 때 발생하고, mouseout은 마우스 커서가 요소를 벗어났을 때 발생합니다.
- 코드의 첫 번째 줄에서는 nav 클래스를 가진 요소의 하위 ul 요소의 하위 li 요소가 mouseover 이벤트를 발생시키면, 그 하위에 있는 submenu 클래스를 가진 요소를 슬라이드 다운합니다. $(this)는 이벤트가 발생한 요소를 가리킵니다.
- 두 번째 줄에서는 mouseout 이벤트를 발생시키면, submenu 클래스를 가진 하위 요소를 슬라이드 업합니다.
- 즉, 이 코드는 메뉴의 하위 메뉴를 드롭다운 형태로 보여주고, 마우스 커서가 메뉴를 벗어나면 드롭다운 메뉴를 다시 숨기는 효과를 줍니다.
한번에 전체메뉴가 내려오는 탭
//mouseover
$(".nav > ul > li").mouseover(function(){
$(".nav > ul > li").find(".submenu").stop().slideDown();
});
//mouseout
$(".nav > ul > li").mouseout(function(){
$(".nav > ul > li").find(".submenu").stop().slideUp();
});- nav 클래스를 가진 요소의 하위 ul 요소의 하위 li 요소가 mouseover 이벤트를 발생시키면, nav 클래스를 가진 요소의 하위 li 요소에 속한 모든 submenu 클래스를 가진 요소를 슬라이드 다운합니다.
- mouseout 이벤트를 발생시키면, nav 클래스를 가진 요소의 하위 li 요소에 속한 모든 submenu 클래스를 가진 요소를 슬라이드 업합니다.
- 즉, 이 코드는 모든 메뉴의 하위 메뉴를 드롭다운 형태로 보여주고, 마우스 커서가 메뉴를 벗어나면 모든 하위 메뉴를 다시 숨기는 효과를 줍니다.
반응형
