2019년 웹디자인기능사 실기 4. [메뉴 유형 E & 퍼블리싱]

1. 메뉴 유형 및 세부 지시 사항

공개 문제 세부 지시 사항

A.2 메뉴 구성 ※ 사이트 구조도를 참고하여 메인 메뉴(main menu)와 서브 메뉴(sub menu)로 구성한다. (1) 메인 메뉴(main menu) 효과 [와이어프레임 참조] ❍  메인 메뉴 중 하나에 마우스를 올리면(mouse over) 하이라이트 되고, 벗어나면 (mouse out) 하이라이트를 해제한다. ❍  메인 메뉴를 마우스로 올리면(mouse over) 서브 메뉴 영역이 부드럽게 나타나면서, 서브 메뉴가 보이도록 한다. ❍  메인 메뉴에서 마우스커서가 벗어나면(mouse out) 서브 메뉴 영역은 부드럽게 사라져야 한다. (2) 서브 메뉴 영역 효과 ❍  서브 메뉴 영역은 메인 페이지 콘텐츠를 고려하여 배경색상을 설정한다. ❍  서브 메뉴 중 하나에 마우스를 올리면(mouse over) 하이라이트 되고 벗어나면(mouse out)하이라이트를 해제한다. ❍  마우스커서가 메뉴 영역을 벗어나면(mouse out) 서브메뉴 영역은 부드럽게 사라져야 한다.

• 
  

2. 메뉴 구성 유형 Type E 제작

Type E

1) html

<nav>
	<ul class="mainmenu">
		<li>
			<a href="#">메뉴1</a>
			<ul class="submenu">
				<li><a href="#">sub메뉴</a></li>
				<li><a href="#">sub메뉴</a></li>
				<li><a href="#">sub메뉴</a></li>
				<li><a href="#">sub메뉴</a></li>
			</ul>
		</li>
		<li>
			<a href="#">메뉴2</a>
			<ul class="submenu">
				<li><a href="#">sub메뉴</a></li>
				<li><a href="#">sub메뉴</a></li>
				<li><a href="#">sub메뉴</a></li>
				<li><a href="#">sub메뉴</a></li>
			</ul>
		</li>
		<li>
			<a href="#">메뉴3</a>
			<ul class="submenu">
				<li><a href="#">sub메뉴</a></li>
				<li><a href="#">sub메뉴</a></li>
				<li><a href="#">sub메뉴</a></li>
				<li><a href="#">sub메뉴</a></li>
			</ul>
		</li>
		<li>
			<a href="#">메뉴4</a>
			<ul class="submenu">
				<li><a href="#">sub메뉴</a></li>
				<li><a href="#">sub메뉴</a></li>
				<li><a href="#">sub메뉴</a></li>
				<li><a href="#">sub메뉴</a></li>
			</ul>
		</li>
	</ul>
</nav>

2) css

@charset "utf-8";
header nav {position: relative;width: 200px;text-align: center;line-height: 30px;}
header nav .mainmenu {background-color: tan;}
header nav .mainmenu li{transition: all 0.4s;}
header nav .mainmenu>li:hover{background-color: #ddd;}
header nav .submenu {position: absolute;top: -30px;left: 100%;width: 200px;height: 300px;background-color: pink;display: none;}
header nav .submenu>li:hover{background-color: #ddd;}

3) js

window.onload = function(){
//메뉴 유형 Type B, D, E
$(".mainmenu li").mouseover(function () {
    $(this).find('.submenu').stop().slideDown();
}).mouseout(function(){
    $(this).find('.submenu').stop().slideUp();
})