2023년 웹디자인 기능사 메뉴 : M-4
소개
안녕하세요! 웹스토리보이입니다. 이번에는 네번째 메뉴 유형을 작업하겠습니다. 이번 메뉴는 세로 유형이며, 사이드 메뉴가 있는 레이아웃에서 사용되는 메뉴 스타일입니다. PDF를 확인해보면 반응형 레이아웃 및 정적인 레이아웃에서 다 사용이 되지만 반응형에서 메뉴 유형이 조금 더 어려울 것 같아서 이번에는 반응형 레이아웃에서 작업을 해보겠습니다. 가로형 1,2,3과 세로형 1,2,3는 같은 원리이지만, 가로 세로에 따라 약간의 차이가 있습니다. 기존에 1,2,3번을 다시 한번 복습한다고 생각하고 다시 작업해보겠습니다. 그럼 또 시작해볼까요! 😆
1. 구조 잡기
이번에는 D-1 유형 레이아웃에 메뉴 유형을 작업을 해보겠습니다. 기본적인 코드는 그대로 복사하셔서 사용하셔도 됩니다.
<body>
<div id="wrap">
<aside id="aside">
<h1></h1>
<nav></nav>
</aside>
<!-- //aside -->
<main id="main">
<article id="slider"></article>
<article id="link"></article>
<section id="contents">
<div class="content1"></div>
<div class="content2"></div>
</section>
</main>
<!-- //main -->
<footer id="footer">
<div class="footer1"></div>
<div class="footer2">
<div class="footer2-1"></div>
<div class="footer2-2"></div>
</div>
<div class="footer3"></div>
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
#wrap {
width: 100%;
display: flex;
flex-wrap: wrap;
}
#aside {
width: 200px;
}
#aside h1 {
width: 100%;
height: 100px;
background-color: #efefef;
}
#aside nav {
width: 100%;
height: 700px;
background-color: #e3e3e3;
}
#main {
width: calc(100% - 200px);
}
#slider {
width: 100%;
height: 400px;
background-color: #d9d9d9;
}
#link {
width: 100%;
height: 150px;
background-color: #d1d1d1;
}
#contents {
width: 100%;
display: flex;
}
#contents .content1 {
width: 50%;
height: 250px;
background-color: #c7c7c7;
}
#contents .content2 {
width: 50%;
height: 250px;
background-color: #bcbcbc;
}
#footer {
width: 100%;
display: flex;
}
#footer .footer1 {
width: 20%;
height: 120px;
background-color: #b1b1b1;
}
#footer .footer2 {
width: 60%;
}
#footer .footer2 .footer2-1 {
width: 100%;
height: 60px;
background-color: #a3a3a3;
}
#footer .footer2 .footer2-2 {
width: 100%;
height: 60px;
background-color: #9d9d9d;
}
#footer .footer3 {
width: 20%;
height: 120px;
background-color: #929292;
}
메뉴 코드를 추가하고 CSS를 설정하겠습니다. CSS는 기존보다 조금 더 간단합니다. 우선 서브 메뉴는 잠시 숨겨놓겠습니다.
<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 */
.nav > ul > li > a {
display: block;
padding: 10px;
background-color: #ccc;
text-align: center;
}
.nav > ul > li > a:hover {
background-color: #9c9c9c;
}
.nav > ul > li > ul {
display: none;
}
.nav > ul > li > ul > li > a {
display: block;
padding: 10px;
text-align: center;
}
.nav > ul > li > ul > li > a:hover {
background-color: #c0c0c0;
}2. 스크립트 작업 : 제이쿼리
라이브러리 소스를 연동하고, 스크립트는 메뉴 유형1과 동일하게 넣어주면 됩니다.
스크립트 소스상에는 차이가 없지만 CSS 영역에 따라 다르게 나오는 구조입니다.
메뉴에 마우스를 오버하면 해당 메뉴의 서브메뉴를 찾아서 슬라이딩으로 보여줘라!를 제이쿼리로 짜면 다음과 같습니다.
메뉴 선택자 $(".nav > ul > li")를 만들고, 마우스 오버 효과 이벤트(mouseenter)를 설정합니다.
해당 메뉴의 자식을 찾기 위해 $(this)를 사용하고, submenu 클래스를 찾습니다.
그리고 서브 메뉴를 슬라이딩으로 살며시 보여주기 위해 slideDown()를 사용하면 완료가 됩니다.
마우스 아웃 역시 반대로 주시면 완성이 됩니다.
stop() 메서드는 애니메이션이 반복적을 일어나는 현상을 막아주기 위해 사용하였습니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".nav > ul > li").mouseover(function(){
$(this).find(".submenu").stop().slideDown();
});
$(".nav > ul > li").mouseout(function(){
$(this).find(".submenu").stop().slideUp();
});
</script>
3. 스크립트 작업 : 자바스크립트
자바스크립트 역시 메뉴 유형1과 동일합니다.
메뉴 항목을 변수로 설정하고, 항목의 갯수가 여러개 나오기 때문에 forEach를 사용하여,
각각의 항목에 마우스오버를 하게되면, 해당 항목의 submenu를 찾아서 높이 값을 설정합니다.
자바스크립트는 제이쿼리처럼 자동으로 애니메이션을 처리하는 메서드가 없기 때문에
높이값을 통해 애니메이션을 만들어 줄 것입니다.
높이값을 0에서 152px로 주면서 transition 효과를 주면 애니메이션화 됩니다.
마우스아웃 했을 때도 다시 높이 값을 0으로 설정해주면 슬라이딩 애니메이션이 완성됩니다.
대신 제이쿼리에서 설정하지 않았던 CSS를 따로 설정해주어야 합니다.
물론 이것도 자바스크립트로 설정이 가능하지만, 소스가 복잡해지기 때문에 CSS로 설정했습니다.
window.onload = function(){
var navList = document.querySelectorAll(".nav > ul > li");
navList.forEach(function(navItem) {
navItem.addEventListener("mouseover", function() {
this.querySelector(".submenu").style.height = "155px";
});
navItem.addEventListener("mouseout", function() {
this.querySelector(".submenu").style.height = "0px";
});
});
};
/* 자바스크립트용 CSS */
.nav > ul > li > ul {
display: block;
height: 0;
overflow: hidden;
transition: all 400ms;
}
3. 마무리
네번째 유형은 첫번째 유형과 동일하니 크게 외울 것은 없습니다. 단지 CSS 설정이 다르니 이점만 유의해서 코딩을 한다면 크게 어려울 것이 없을 것 같습니다. 자바스크립트로 작업했을 때에는 신경쓸 것이니 많으니 연습이 덜 된 분들은 제이쿼리를 추천합니다. 수고하셨습니다.🥸
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글