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

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 C 제작

Type C

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>
	<div class="subback"></div>
</nav>

2) css

@charset "utf-8";

header nav {position: absolute;left: 0;right: 0;top: 70px;height: 30px;text-align: center;}
header nav .mainmenu{float: right; width: 600px;line-height: 30px;}
header nav .mainmenu>li{width: 25%;height: 100%;float: left;color: #000;transition: all 0.4s;}
header nav .mainmenu>li:hover {background-color: indianRed;color:#fff;}
header nav .submenu{display: none;position: relative;z-index: 1;}
header nav .submenu li{background-color: indianRed;color: #000;transition: all 0.4s;}
header nav .submenu li:hover {background-color: #fff;color:#000;}
header nav .subback {display: none;position: absolute;background-color: indianRed;width: 1200px;height: 120px;top: 30px;}

3) js

window.onload = function(){
//메뉴 유형 Type C
$(".mainmenu li").mouseover(function () {
    $('.submenu').stop().slideDown();
    $('.subback').stop().slideDown();
}).mouseout(function(){
    $('.submenu').stop().slideUp();
    $('.subback').stop().slideUp();
})

뭔가 아직 지저분한것 같다. 조금더 고민해보고 코드를 정리해봐야겠다.