2023년 웹디자인 기능사 메뉴 : M-6
소개
안녕하세요! 웹스토리보이입니다. 드뎌 메뉴 유형도 마지막입니다. 마지막 유형은 백그라운드가 들어간 메뉴 유형입니다. M-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를 설정하겠습니다.
전체 배경이 오른쪽에 나오기 때문에 main 요소에 가상요소를 작업해야 합니다.
만약 사이드 영역에 가상요소를 잡으면 전체 영역을 잡을 수 없기 때문에 상관이 없는 메인 영역에 가상요소를 작업해야 합니다.
해당 메뉴의 서브 메뉴들은 position: absolute를 이용하여 각각 위치값을 설정해야 합니다.
구조상 이게 제일 편한 방법일 것 같습니다. 혹시 더 좋은 의견이 있으면 댓글 부탁드립니다.
어째든 배경이 될 수 있는 요소는 메인 영역에 설정하고, 서브메뉴는 절대 위치를 통해 위치를 억지로 잡아줬습니다.
<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>
</ul>
</li>
<li>
<a href="#">메뉴3</a>
<ul class="submenu">
<li><a href="#">서브메뉴3-1</a></li>
<li><a href="#">서브메뉴3-2</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>
</ul>
</li>
<li>
<a href="#">메뉴5</a>
<ul class="submenu">
<li><a href="#">서브메뉴5-1</a></li>
</ul>
</li>
</ul>
</nav>
::after 가상 요소 속성을 이용해서 전체 영역을 설정했습니다.
위치는 position: absolute를 이용해서 잡아주고, 기준점이 되는 메인 영역에 position: relative를 설정했습니다.
나중에 스크립트로 클래스 on이 붙으면 width: 100%;가 설정되어 있기 때문에 배경이 활성화 될 것입니다.
서브 메뉴들의 위치는 nth-child()를 이용하면, 자식들을 선택적으로 선택할 수 있습니다.
/* nav */
.nav {
position: relative;
z-index: 1000;
}
.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: #aeaeae;
}
.nav > ul > li > ul {
position: absolute;
right: -500px;
top: 0;
width: 500px;
display: none;
}
.nav > ul > li > ul > li {
display: inline;
}
.nav > ul > li > ul > li > a {
padding: 10px;
display: inline-block;
width: 100px;
}
.nav > ul > li > ul > li > a:hover {
background-color: #a2a2a2;
}
#main {
position: relative;
}
#main::after {
content: '';
width: 0%;
height: 193px;
background-color: #b0b0b0;
position: absolute;
left: 0;
top: 100px;
z-index: 1;
transition: all 300ms;
}
#main.on::after {
width: 100%;
}2. 스크립트 작업 : 제이쿼리
라이브러리 소스를 연동하고, 제이쿼리 시작을 의미하는 $(function(){})를 설정했습니다.
각 메뉴에 마우스를 오버하면 두가지가 작동을 할 것입니다.
첫번째는 서브 메뉴가 서서히 나타납니다. 기존에는 슬라이드 방식을 사용했지만 이번에는 슬라이드 방식이 아닌 천천히 나타나는 방식입니다.
두번째는 메인 영역의 가상 요소 배경이 나타날 것입니다.
이제 이 한글로 된 설명을 제이쿼리라는 언어로 번역하면 됩니다.
그럼 다음과 같이 되겠죠^^
서서히 없어지거나 나타나게 하려면 fadeIn()과 fadeOut()을 사용하면 됩니다.
애니메이션의 버그 현상을 없애려면 stop() 메서드를 추가하고,
클래스를 추가하거나 삭제하려면 addClass()와 removeClass()를 사용하면 됩니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$(".nav > ul > li").mouseover(function(){
$(".nav > ul > li > ul").stop().fadeIn();
$("#main").addClass("on");
});
$(".nav > ul > li").mouseout(function(){
$(".nav > ul > li > ul").stop().fadeOut();
$("#main").removeClass("on");
});
});
</script>
3. 스크립트 작업 : 자바스크립트
자바스크립트 기본 원리는 동일합니다.
서브메뉴는 애니메이션을 보여줄 필요가 없기 때문에 display: block과 display: none을 설정하면 됩니다.
마우스 오버했을 때 메인 영역에 클래스를 붙여주기 위해서 .classList.add("on")을 사용했습니다.
클래스 on이 붙으면, CSS에서 애니메이션 처리를 했기 때문에 스크립트는 특별하게 할 것이 없습니다.
window.onload = function(){
let navList = document.querySelector(".nav > ul");
navList.addEventListener("mouseover", function(){
navList.querySelectorAll(".submenu").forEach(sub => {
sub.style.display = "block";
});
document.getElementById("main").classList.add("on");
});
navList.addEventListener("mouseout", function(){
navList.querySelectorAll(".submenu").forEach(sub => {
sub.style.display = "none";
});
document.getElementById("main").classList.remove("on");
});
}
3. 마무리
처음 배우는 메뉴 유형의 스크립트가 끝났습니다. 어떤가요? 할만 한가요? 어렵나요? 지금은 어렵고 포기할 수 있지만, 여러분의 실력이 향상되고 다시 보면 아주 쉽다고 느낄 수 있습니다. 꾸준히 또 꾸준히 하면 자신도 모르게 실력이 향상된걸 느낄 수 있을거예요! 포기하지 말고 끝까지 한번 해보세요! 다음 시간에는 스크립트의 하이라이트 이미지 슬라이드를 해보겠습니다. 웹디자인기능사에서 가장 어렵고 까다로운 부분입니다. 기대가 되지 않나요? 그럼 다음 시간에 뵐께요! 😁
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글