소스 파일명 : tab_menu.html
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
<!-- (2018.7.23, 차재복, Cha Jae Bok, cjbword@gmailcom) !-->

<!-- html 문서 타입 선언 !-->
<!DOCTYPE html>
<html>

<head>
	<meta http-equiv='content-type' content='text/html; charset=utf-8'>

	<!-- stylesheet -->
	<link rel='stylesheet' type='text/css' href='tab_menu.css'>

	<!-- jquery api 원본 버젼 1.11.0 다운로드 (google api cdn 이용) -->
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
	<!-- jquery 기능 구현 소스 불러오기 -->
	<script type='text/javascript' src='tab_menu.js' charset='UTF-8'></script>
</head>

<body>
	<section class='menu_section' id='menu'>
		<div>
				<ul>
					<li class='tabs'>탭메뉴 1
						<ul class='tab_panels' id='sub_tab1'>
							<li>서브메뉴 1-1</li>
							<li>서브메뉴 1-2</li>
							<li>서브메뉴 1-3</li>
							<li>서브메뉴 1-4</li>
						</ul>
					</li>
					<li class='tabs'>탭메뉴 2
						<ul class='tab_panels' id='sub_tab2'>
							<li>서브메뉴 2-1</li>
							<li>서브메뉴 2-2</li>
							<li>서브메뉴 2-3</li>
							<li>서브메뉴 2-4</li>
						</ul>
					</li>
					<li class='tabs'>탭메뉴 3
						<ul class='tab_panels' id='sub_tab3'>
							<li>서브메뉴 3-1</li>
							<li>서브메뉴 3-2</li>
							<li>서브메뉴 3-3</li>
							<li>서브메뉴 3-4</li>
						</ul>
					</li>
					<li class='tabs'>탭메뉴 4
						<ul class='tab_panels' id='sub_tab4'>
							<li>서브메뉴 4-1</li>
							<li>서브메뉴 4-2</li>
							<li>서브메뉴 4-3</li>
							<li>서브메뉴 4-4</li>
						</ul>
					</li>
				</ul>
		</div>
	</section>
</body>
</html>