2023년 웹디자인 기능사 메뉴 : M-5
소개
안녕하세요! 웹스토리보이입니다. 메뉴 유형 5번째 시간입니다. 이 유형은 M-4 유형과 동일합니다. 단지 서브메뉴의 위치만 다르기 때문에 이것은 CSS로 컨트롤 해주면 됩니다. 스크립트 부분은 동일하게 때문에 먼저 해보시고, 따라하시면 더 도움이 될 것 같습니다. 그럼 시작해보겠습니다. 😇
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를 설정하겠습니다.
서브메뉴가 오른쪽으로 나오는 위치기 때문에 position: absolute로 위치를 잡아주면 됩니다.
기준점이 되는 li에 position: relative를 넣어주면 됩니다.
위치는 오른쪽에 위치해야 하기 때문에 right: -200px;를 설정해주고, width 값을 200px로 설정해주면 됩니다.
<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 {
position: relative;
}
.nav > ul > li > a {
padding: 10px;
display: block;
text-align: center;
background-color: #ccc;
}
.nav > ul > li > a:hover {
background-color: #dbdbdb;
}
.nav > ul > li > ul {
position: absolute;
right: -200px;
top: 0;
width: 200px;
background-color: #6d6d6d;
display: none;
}
.nav > ul > li > ul > li > a {
padding: 10px;
display: block;
}
.nav > ul > li > ul > li > a:hover {
background-color: #c0c0c0;
}2. 스크립트 작업 : 제이쿼리
라이브러리 소스를 연동하고, script를 작성하고, $(".nav > ul > li") 선택자에 마우스오버 이벤트를 설정했습니다.
여기서 이벤트라 함은 무엇이 일어났을 때 함수를 작동시키는 것을 의미합니다.
마우스 오버라는 사건이 발생하면 해당 항목에 서브메뉴를 찾습니다.
.find(".submenu") 메서드가 그런 역할을 합니다.
해당 서브메뉴를 찾았으면 슬라이드 형식으로 애니메이션을 작동시켜주면 끝납니다.
마우스아웃 했을 때에도 똑같이 작업하면 되겠죠!
몇 번 반복해서 만들어 보니까 느낌이 오시죠.🥹
점점 쉬어지고 있지 않나요?
제이쿼로 작업할 분은 여기서 작업완료하시면 되구요! 자바스크립트로 한번 해보고 싶다는 분은 다음 섹션을 보시면 됩니다.
<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. 스크립트 작업 : 자바스크립트
자바스크립트 역시 기존 메뉴 유형과 동일합니다.
이번에는 다른 방식으로 작업해보겠습니다.
.nav > ul > li 항목이 4개이기 때문에 다중 선택을 해야 합니다.
다중 선택을 한다는건 반복문을 사용해야 한다는 뜻입니다.
그래서 forEach를 사용해야 합니다.
forEach를 사용하면 또 다시 function을 사용할 수 있는데, 이것을 콜백함수라고 합니다.
콜백함수라는게 있구나! 하고 가볍게 넘기시면 됩니다.
콜백함수를 정확하게 100% 이해하고 넘어갈 필요는 없습니다.
가볍게 넘기도 다음에 또 공부하면 됩니다. 코드는 그렇게 공부해야 합니다.
그건 그렇고, 마우스 오버 했을 때 아웃 했을 때 submenu의 높이값을 설정합니다.
높이값이 줄어들고 늘어남에 따라 애니메이션을 표현할 수 있기 때문에 height 값을 컨트롤 하는 것입니다.
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 설정을 해야 애니메이션이 작동했습니다.
이 부분을 자바스크립트로 표현해보겠습니다.
다중 선택을 해야 하기 때문에 여기도 forEach를 사용했고,
CSS에서 설정한 부분을 자바스크립트로 표현했습니다.
style을 사용하면 그대로 쓸 수 있습니다.
대신 두번째 ul을 선택해야 하기 때문에 nav.querySelector("ul")를 사용했습니다.
이런식으로도 작업이 가능합니다.
이렇게 하면 CSS는 따로 설정하지 않아도 됩니다.
.nav > ul > li > ul {
height: 0;
overflow: hidden;
transition: height 400ms;
}
.navList.forEach(nav => {
nav.querySelector("ul").style.display = "block";
nav.querySelector("ul").style.height = "0";
nav.querySelector("ul").style.overflow = "hidden";
nav.querySelector("ul").style.transition = "height 400ms";
});
3. 마무리
메뉴 섹션의 5번째 유형도 마무리 했습니다.
유형이 6개 있지만 대부분 비슷하기 때문에 하나를 완벽하게 하면 나머지도 자동으로 완성됩니다.
자바스크립트 부분도 CSS로 작성하지 않고, 스크립트로도 표현해 봤습니다.
실무에서는 제이쿼리보다 자바스크립트가 더 중요하기 때문에 자바스크립트를 공부하는 것이 더 좋습니다.
어자피 공부할바에는....
스크립트를 처음해보는 분들은 forEach 사용하는 방법이 어려울 수 있습니다.
이 부분은 보충용으로 따로 만들어서 안내해드리겠습니다.
오늘도 수고하셨습니다.🥳
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글