▶ [Jquery] Full drop down menu 만드는 방법 (내용정리)
이번에 설명드릴 제이쿼리는 홈페이지를 들어가보면 메뉴를 클릭했을 때 또는 마우스로 해당 메뉴에 갔다 댔을 경우 메뉴가 한꺼번에 보여지는 것을 알려드리고자 합니다. 보통 이런 네비게이션 메뉴는 메뉴를 한꺼번에 보여줘야 하는 특성을 가진 홈페이지를 만들 때 주로 사용합니다. (예: 관공서, 공공기관, 기업 홈페이지)
1. HTML 마크업 구조
1. <meta http-equiv="content-type" content="text/html; charset=euc-kr" />
언어를 한국어로 나오게 출력, 위와같이 적용이 안될 경우에는 특수문자 형태로 한글이 깨져보이게 됩니다.
2. <link rel="stylesheet" href="fulldropdownmenu/common.css">
<script type="text/javascript" src="fulldropdownmenu/jquery.js"></script>
<script type="text/javascript" src="fulldropdownmenu/common.js"></script>
해당 파일을 불러 올 수 있도록 경로 표시(css파일 및 jquery파일)
3. <div id="gnb">~~~~</div>
전체 메뉴를 감싸는 영역
4. <ul>
<li><a href="#">대메뉴1</a></li>
<li><a href="#">대메뉴2</a></li>
<li><a href="#">대메뉴3</a></li>
<li><a href="#">대메뉴4</a></li>
<li><a href="#">대메뉴5</a></li>
<li class="last"><a href="#">대메뉴6</a></li>
</ul>
상단 카테고리 메뉴를 나타내는 전체영역
5. <div class="snb">~~~~</div>
상단카테고리 아래에 보여지는 하위카테고리 메뉴 전체영역
6. <ul>
<li><a href="#">소제목1</a></li>
<li><a href="#">소제목2</a></li>
<li><a href="#">소제목3</a></li>
<li><a href="#">소제목4</a></li>
<li><a href="#">소제목5</a></li>
<li><a href="#">소제목6</a></li>
<li><a href="#">소제목7</a></li>
</ul>
하위카테고리 메뉴안에 있는 목록 별 메뉴영역
▲ HTML을 통한 영역별 구조 레이아웃 작업
2. CSS 작업
1. @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
네트워크 방식으로 연결하여 구글에서 지원하는 한글폰트를 직접 불러와서 적용
폰트를 따로 다운받을 필요가 없음
2. * {font-family: 'Nanum Gothic'; margin:0; padding:0;}
dl, dt, dd, ol, ul, li {margin: 0; padding: 0; border: 0; font-style:normal;}
ol, ul, dl, li {list-style: none;}
img{border:0 none; vertical-align:top;}
a {outline: 0; text-decoration: none;}
태그가 가지고 있는 기본속성을 초기화 시킴 (이 부분은 대부분 거의 공통으로 많이 적용되기 때문에 알아두면 유용합니다)
3. #gnb {position:absolute; top:71px; left:128px; z-index:10; background:#a7bd38; width:1100px; height:40px;}
#gnb > ul{display:inline-block; width:1100px; padding-bottom: 22px;}
#gnb > ul li {float:left; height:18px; line-height:36px; width: 183px; text-align: center;}
#gnb > ul li.first {margin-right:55px;}
#gnb > ul li.last {margin-right:0;}
#gnb > ul li a:link{height:40px; overflow:hidden; color:#fff; font-weight:bold; text-decoration:none; text-align: center;}
#gnb > ul li a:visited{color:#fff; font-weight:bold;}
#gnb > ul li a:hover{color:#fff600; font-weight:bold;}
#gnb > ul li a:active{color:#fff; font-weight:bold;}
#gnb > ul li a.on img {margin-top:-40px;}
전체메뉴를 감싸는 영역에 대한 CSS
4. .snb {position:relative; z-index:99999;width:1100px; height:197px; display:none;
overflow:hidden; background-color: #fff; border: 1px solid #ccc; box-sizing: border-box;}
.snb > ul {float:left; margin-right:30px; margin-left:30px; width: 123px;}
.snb > ul li {display:inline-block; width:100%; overflow:hidden; padding-top:8px; font-size:13px; text-align: center;}
.snb > ul li a:link {display:block; overflow:hidden; color:#333; text-decoration:none;}
.snb > ul li a:hover{color:#a7bd38; text-decoration:none; font-weight: bold;}
.snb > ul li ul {padding-top:6px;}
.snb > ul li ul li {overflow:hidden; height:12px; padding-bottom:4px;}
.snb > ul li ul a {height:11px;}
.snb > ul li ul a:hover img {margin-top:-30px;}
하위카테고리 메뉴 전체영역에 대한 CSS
위의 설명을 바탕으로 Full drop down menu에 대해 이해가 되셨으면 참고하셔서 멋진 메뉴 만들기에 적용 하시길 바랍니다.^^
(★ 참고로 jquery 파일은 제가 따로 설명을 안드렸기 때문에 만약 파일이 필요하시다고 하시면 댓글을 남겨주시길 바랍니다.)
누구나 파워지식인이 되는 그날까지, 늘보지식인 #Copyleft(C)는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻입니다# #사진과 이미지의 일부는 퍼온것도 있음을 밝힘니다#