2023년 웹디자인 기능사 메뉴 : M-3
소개
안녕하세요! 웹스토리보이입니다. 이번에는 가로 메뉴 유형 3번째 시간이 되겠습니다. 3번째 유형의 특징은 마우스 오버시 서브메뉴의 전체 배경이 나온다는 것이 두번째 유형과 다른 점입니다. 이런 유형은 웹 사이트에서 많이 쓰이는 메뉴 유형으로 활용성이 높습니다. 비록 시험이지만 실제 실무에서도 많이 쓰이기 때문에 꼭 알아두면 좋을 것 같습니다. 그럼 또 시작해볼까요!😃
1. 구조 잡기
미리보기를 확인하시면 서브 메뉴가 전체 영역을 차지하는 메뉴 유형입니다. 메뉴가 헤더 밑 부분으로 위치해야 하고, 전체 영역은 헤더의 가로 값과 동일해야 하는 특징이 있습니다. 우선은 A-1 레이아웃 소스를 가져와서 작업을 해보겠습니다.
<body>
<div id="wrap">
<div id="header">
<div class="logo"></div>
<nav class="nav"></nav>
</div>
<!-- //header -->
<div id="slider">
</div>
<!-- //slider -->
<div id="contents">
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
</div>
<!-- //contents -->
<div id="footer">
<div class="footer1"></div>
<div class="footer2"></div>
<div class="footer3"></div>
</div>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
display: flex;
}
#header .logo {
width: 20%;
height: 100px;
background-color: #efefef;
}
#header .nav {
width: 80%;
background-color: #e3e3e3;
}
#slider {
width: 100%;
height: 300px;
background-color: #d9d9d9;
}
#contents {
width: 100%;
display: flex;
}
#contents .content1 {
width: 33.3333%;
height: 200px;
background-color: #d1d1d1;
}
#contents .content2 {
width: 33.3333%;
height: 200px;
background-color: #c7c7c7;
}
#contents .content3 {
width: 33.3333%;
height: 200px;
background-color: #bcbcbc;
}
#footer {
width: 100%;
display: flex;
}
#footer .footer1 {
width: 20%;
height: 100px;
background-color: #b1b1b1;
}
#footer .footer2 {
width: 60%;
height: 100px;
background-color: #a3a3a3;
}
#footer .footer3 {
width: 20%;
height: 100px;
background-color: #9d9d9d;
}
메뉴 코드는 기본의 유형과 동일하게 작업을 할 것이고, 서브 메뉴에는 submenu 클래스를 작업하였습니다.
.nav > ul > li안에 ul > li구조가 있는 형태입니다.
<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>
nav의 위치는 display: flex;와 justify-content: right;를 이용하여 오른쪽 하단으로 위치를 설정했습니다.
전체 영역의 배경이 필요하기 때문에 이것은 header영역에 가상요소를 만들어 클래스 on을 붙이면 나오도록 설정했습니다.
메뉴에 마우스 오버를 하면 서브 메뉴도 나오고 가상 요소 전체 배경도 나오게 작업할 것입니다.
스크립트를 작업하기 전에 CSS를 완벽하게 하고 넘어가야 합니다.
/* nav */
#header {
position: relative;
}
#header::after {
content: '';
width: 100%;
height: 0px;
background-color: #808080;
position: absolute;
left: 0;
top: 100px;
z-index: 1;
transition: all 400ms;
}
#header.on::after {
height: 155px;
}
.nav {
z-index: 1000;
}
.nav > ul {
display: flex;
justify-content: right;
margin-top: 61px;
}
.nav > ul > li {
position: relative;
}
.nav > ul > li > a {
display: inline-block;
padding: 10px 50px;
background-color: #b0b0b0;
}
.nav > ul > li > a:hover {
background-color: #696969;
}
.nav > ul > li > ul {
position: absolute;
left: 0;
top: 39px;
width: 100%;
text-align: center;
display: none;
}
.nav > ul > li > ul > li > a {
display: inline-block;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.nav > ul > li > ul > li > a:hover {
background-color: #8f8f8f;
}2. 스크립트 작업 : 제이쿼리
두번째 유형과 소스는 동일하지만, 추가적으로 클래스를 추가하는 addClass, removeClass메서드가 추가되었습니다.
이 메서드는 $("#header") 요소에 on 클래스를 추가하는 스크립트입니다.
slideDown 메서드의 300은 초를 의미합니다.
자식 요소를 보일때 0.3초 동안 작업하라는 뜻으로 마우스를 오버하면 자식 요소들은 0.3초 동안 나타나게 됩니다.
클래스 on을 붙었을 때에도 css에 transition: all 0.4s;를 처리하여, 애니메이션 느낌을 나도록 했습니다.
마우스 아웃 할 때에도 반대로 처리하면 완성이 됩니다.
$(function(){
$(".nav > ul > li").mouseover(function(){
$(".nav > ul > li > ul").stop().slideDown(900);
$("#header").addClass("on");
});
$(".nav > ul > li").mouseout(function(){
$(".nav > ul > li > ul").stop().slideUp(100);
$("#header").removeClass("on");
});
})3. 스크립트 작업 : 자바스크립트
두번째 유형과 동일하기 때문에 서브 메뉴가 나오는 부분은 동일하게 처리할 것입니다.
전체 배경이 나오는 부분은 클래스만 추가하면 되기 때문에 classList.add를 사용해서 작업합니다.
클래스 on이 붙었을 때에는 transition 처리를 하였고,
.nav > ul > li > ul 요소에 height, overflow, transition 처리를 하면 애니메이션 처리가 완성이 됩니다.
window.onload = function(){
let navList = document.querySelector(".nav > ul");
navList.addEventListener("mouseover", () => {
navList.querySelectorAll(".submenu").forEach(sub => {
sub.style.height = "155px";
});
document.getElementById("header").classList.add("on");
});
navList.addEventListener("mouseout", () => {
navList.querySelectorAll(".submenu").forEach(sub => {
sub.style.height = "0px";
});
document.getElementById("header").classList.remove("on");
});
}
/* 자바스크립트용 CSS */
.nav > ul > li > ul {
display: block;
height: 0;
overflow: hidden;
transition: all 400ms;
}
3. 마무리
세번째 유형은 두번째 유형에 클래스를 추가하는 메서드만 추가하면 됩니다. 스크립트에서 많이 사용하는 메서드이기 때문에 알아두면 실무에서도 도움이 될 것입니다. 시험을 위해서는 제이쿼리만 외워도 되지만, 자바스크립트를 통해서 한번 더 익히시면 도움이 되실 겁니다. 나중에 리액트나 뷰 작업할 때에도 도움이 될 수 있으니깐요! 아직 정확하게 이해하진 못했을 거라고 생각이 듭니다. 남은 유형도 한번 더 해보면 이해가 될 것입니다. 제 설명이 부족하고 이해가 안된다면, GTP나 검색을 통해서 한번 더 확인하시면 도움이 되실거예요 오늘도 매우 수고하셨습니다. 😇
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글