오늘은 웹디자인 기능사 실기 메뉴 가로 유형에 대해 알아보도록 하겠습니다.
먼저 html부터 작업을 해주도록 할건데요.
html 전체 코드부터 보도록 하겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <nav class="nav">
<ul>
<li><a href="#">메뉴1</a>
<ul>
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-1</a></li>
</ul>
</li>
<li><a href="#">메뉴2</a>
<ul>
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-1</a></li>
</ul>
</li>
<li><a href="#">메뉴3</a>
<ul>
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-1</a></li>
</ul>
</li>
<li><a href="#">메뉴4</a>
<ul>
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-1</a></li>
</ul>
</li>
</ul>
</nav>
|
네비 시멘틱 태그 안에 메인메뉴와 서브메뉴를 만들어 줍니다.
다음으로 CSS를 사용하여 메뉴 스타일을을 주도록 하겠습니다.
전체 코드를 먼저 확인하고 세부적으로 설명하도록 하겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| /* nav */
.nav>ul>li {
position: relative;
}
.nav>ul>li>a {
display: inline-block;
padding: 10px;
width: 100%;
background-color: #929292;
text-align: center;
box-sizing: border-box;
}
.nav>ul>li>a:hover {
background-color: yellowgreen;
}
.nav>ul>li>ul {
position: absolute;
top: 0;
left: 200px;
width: 200px;
background-color: #b1b1b1;
display: none;
}
.nav>ul>li>ul>li>a {
display: inline-block;
width: 100%;
box-sizing: border-box;
padding: 10px;
}
.nav>ul>li>ul>li>a:hover {
background-color: thistle;
}
|
각 코드별로 설명하도록 하겠습니다.
1
2
3
4
| /* nav */
.nav>ul>li {
position: relative;
}
|
- .nav>ul>li는 네비게이션 메뉴의 각 항목을 선택합니다. position: relative; 속성은 해요소를 상위 요소를 기준으로 위치를 설정합니다.
1
2
3
4
5
6
7
8
| .nav>ul>li>a {
display: inline-block;
padding: 10px;
width: 100%;
background-color: #929292;
text-align: center;
box-sizing: border-box;
}
|
- .nav>ul>li>a는 네비게이션 메뉴 항목의 링크를 선택합니다.
- display: inline-block;은 요소를 인라인 블록으로 표시하여 너비와 높이를 지정할 수 있게 합니다.
- adding, width, background-color, text-align, box-sizing 등의 속성을 사용하여 스타일을 적용합니다.
1
2
3
| .nav>ul>li>a:hover {
background-color: yellowgreen;
}
|
- .nav>ul>li>a:hover는 마우스가 항목 위에 올라갔을 때의 스타일을 지정합니다.
- 배경색을 변경하여 호버 효과를 줍니다.
1
2
3
4
5
6
7
8
| .nav>ul>li>ul {
position: absolute;
top: 0;
left: 200px;
width: 200px;
background-color: #b1b1b1;
display: none;
}
|
- .nav>ul>li>ul는 각 항목의 하위 메뉴를 선택합니다.
- position: absolute; 속성은 요소를 페이지 상의 절대적인 위치에 배치합니다.
- top, left, width, background-color, display 속성을 사용하여 하위 메뉴의 스타일을 지정합니다.
1
2
3
4
5
6
| .nav>ul>li>ul>li>a {
display: inline-block;
width: 100%;
box-sizing: border-box;
padding: 10px;
}
|
- .nav>ul>li>ul>li>a는 하위 메뉴의 링크를 선택합니다.
- display: inline-block;, width, box-sizing, padding 속성을 사용하여 스타일을 지정합니다.
1
2
3
| .nav>ul>li>ul>li>a:hover {
background-color: thistle;
}
|
- .nav>ul>li>ul>li>a:hover는 하위 메뉴의 링크에 호버 효과를 적용합니다.
- 배경색을 변경하여 호버 효과를 줍니다.
다음으로 jQuery를 사용하여 네비게이션 메뉴에 호버 효과를 적용하는 JavaScript 코드를 알아보도록 하겠습니다. 먼저 전체코드부터 보시죠. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(".nav>ul>li").mouseover(function () {
$(".nav>ul>li>ul").stop().fadeIn(200);
$("#header").addClass("on");
});
$(".nav>ul>li").mouseout(function () {
$(".nav>ul>li>ul").stop().fadeOut(100);
$("#header").removeClass("on");
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
- 첫 번째 <script>태그에서는 jQuery 라이브러리를 CDN을 통해 가져옵니다.
두 번째 <script> 태그에서는 jQuery를 사용하여 네비게이션 메뉴에 호버 효과를 적용하는 스크립트가 포함되어 있습니다.
<script>
$(".nav>ul>li").mouseover(function () {
$(".nav>ul>li>ul").stop().fadeIn(200);
$("#header").addClass("on");
});
</script>
- $(“.nav>ul>li”).mouseover(function () { … });는 네비게이션 메뉴의 각 항목에 호버 이벤트를 추가합니다. 마우스가 항목 위로 이동할 때마다 해당 이벤트 함수가 실행됩니다.
- $(“.nav>ul>li>ul”).stop().fadeIn(200);는 해당 메뉴 항목의 하위 메뉴를 페이드 인 애니메이션으로 보여줍니다. .stop() 메서드는 현재 실행중인 모든 애니메이션을 중지합니다.
- $(“#header”).addClass(“on”);은 #header 요소에 on 클래스를 추가합니다. 이 클래스를 추가함으로써 헤더에 호버 상태임을 나타낼 수 있습니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(".nav>ul>li").mouseout(function () {
$(".nav>ul>li>ul").stop().fadeOut(100);
$("#header").removeClass("on");
});
</script>
- $(“.nav>ul>li”).mouseout(function () { … });는 네비게이션 메뉴의 각 항목에서 마우스가 벗어날 때의 이벤트를 처리합니다.
- $(“.nav>ul>li>ul”).stop().fadeOut(100);는 해당 메뉴 항목의 하위 메뉴를 페이드 아웃 애니메이션으로 숨깁니다.
- $(“#header”).removeClass(“on”);은 #header 요소에서 on 클래스를 제거하여 호버 상태를 제거합니다.
