묻고답하기
2차 메뉴 네비게이션
2010.08.24 20:55
댓글 3
-
ForHanbi
2010.08.24 23:23
-
ForHanbi
2010.08.24 23:28
이쪽의 선이 안좋아서 더 상세한 이야기는 못해드리고요.
JQUERY메뉴는 아닙니다.그냥 자바스크립트로 만든 소스이고요. ol의 위치가 <ul> <li><ol><li></li></ol></li></ul> 이렇게 와야 웹접근성을 잘 지키는 메뉴가 되었을 것인데그게 안되어서 좀 아쉬운 메뉴입니다. -
김선생™
2011.03.09 23:15
ol li 태그는 정확히 와서 문법 오류검사 에러 0 개인데 건데. ㅡㅡ 어디가 이상한가요
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>caigi sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#xe{position:relative; margin:0 auto; width:1000px;}
#gnb { position:absolute; float:right; top:48px; right:0px; height:32px; overflow:hidden; white-space:nowrap; margin-bottom:10px;}
#gnb li { float:left; list-style:none; position:relative; left:0px; white-space:nowrap; background:url(http://www.imgwizard.com/main/layouts/wizard/images/defaultWide/bgGnbOff.gif) no-repeat center top; text-align:center; font-weight:bold; margin-left:2px;}
#gnb li a { display:block; padding:10px 0 0 0; height:24px; color:#f2f2f2; white-space:nowrap; text-decoration:none; width:100px; height:32px;}
#gnb li a:hover,
#gnb li a:focus { color:#f2f2f2;}
#gnb li.on a { color:#f2f2f2; background:url(http://www.imgwizard.com/main/layouts/wizard/images/defaultWide/bgGnbOn.gif) no-repeat center top; width:100px; height:32px;}/**/
.gnb_sub { position:absolute; top:70px; _top:83px; left:340px; _left:380px; height:24px; overflow:hidden; white-space:nowrap; }
*:first-child+html .gnb_sub{ top:83px;}
.gnb_sub li { float:left; list-style:none; background:url(http://www.imgwizard.com/main/layouts/wizard/images/defaultWide/sub_part.gif) no-repeat left center; padding-left:2px; position:relative; left:-2px; white-space:nowrap; font-size:11px;}
.gnb_sub li a { display:block; float:left; padding:6px 7px 0 7px; height:18px; color:#000; white-space:nowrap; text-decoration:none; font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
.gnb_sub li a:hover,
.gnb_sub li a:focus { color:#edffbf; }
.gnb_sub li.on a, .gnbin li.on a:hover {color:#edffbf; background:url(http://www.imgwizard.com/main/layouts/wizard/images/defaultWide/arrow_3.gif) no-repeat center bottom; }
</style>
<script type="text/javascript">
// 롤오버 2차메뉴 만들기
// Brower
var browserType='';
if(navigator.userAgent.indexOf("MSIE") >-1) {
browserType = 'IE';
} else if(navigator.userAgent.indexOf("Firefox") >-1) {
browserType = 'FF';
} else {
browserType = 'OTHER';
}
function gnbinToggle(id, gnbblock) {
if(browserType == 'FF') {
gnbinToggleFF(id, gnbblock);
} else {
gnbinToggleIE(id, gnbblock);
}
}
// Local Navigation Toggle
function gnbinToggleIE(id, gnbblock) {
for(num=0; num<gnb_count; num++) {
document.getElementById('gnb'+num).style.display='none'; // 2차 메뉴
//document.getElementById('gnbli'+num).setAttribute('className', 'off'); // 1차 메뉴
document.getElementById('gnbli'+num).className = null; // 1차 메뉴
}
var sub_1 = document.getElementById('gnbli'+id); // 1 차메뉴
var sub_2 = document.getElementById('gnb'+id); // 2 차메뉴
document.getElementById('gnb'+id).style.display = 'block';
gnbblock.className = "on";
var sub_2_left =sub_1.offsetWidth * (id+0.5) - sub_2.offsetWidth /2;
// 2차메뉴 크기에 따른 위치 조절
if (sub_2_left < 0)
sub_2_left = 0;
else if( (sub_2_left + sub_2.offsetWidth) > 700 )
sub_2_left=(700 - sub_2.offsetWidth);
sub_2.style.marginLeft = sub_2_left + 'px';
}
// Local Navigation Toggle
function gnbinToggleFF(id, gnbblock) {
for(var num=0; num<gnb_count; num++) {
document.getElementById('gnb'+num).style.display='none'; // 2차 메뉴
document.getElementById('gnbli'+num).className = null; // 1차 메뉴
}
var sub_1 = document.getElementById('gnbli'+id); // 1 차메뉴
var sub_2 = document.getElementById('gnb'+id); // 2 차메뉴
document.getElementById('gnb'+id).style.display = '';
gnbblock.className = "on";
var sub_2_left =sub_1.offsetWidth * (id+0.5) - sub_2.offsetWidth /2;
// 2차메뉴 크기에 따른 위치 조절
if (sub_2_left < 0)
sub_2_left = 0;
else if( (sub_2_left + sub_2.offsetWidth) > 700 )
sub_2_left=(700 - sub_2.offsetWidth);
sub_2.style.marginLeft = sub_2_left + 'px';
}
function reset_menu()
{
var sub_1 = document.getElementById('gnbli'+gnb_count_now); // 1 차메뉴
var sub_2 = document.getElementById('gnb'+gnb_count_now); // 2 차메뉴
var sub_2_left =sub_1.offsetWidth * (gnb_count_now+0.5) - sub_2.offsetWidth /2;
// 넓이가 0미만일경우 0
if (sub_2_left < 0)
sub_2_left = 0;
else if( (sub_2_left + sub_2.offsetWidth) > 700 )
sub_2_left=(700 - sub_2.offsetWidth);
sub_2.style.marginLeft = sub_2_left + 'px';
}
</script>
</head>
<body>
<div id="xe" class="fixed">
<ul id="gnb">
<!-- main_menu 1차 시작 -->
<li id="gnbli0" onmouseover="gnbinToggle(0, this)" ><a href="/kimkee" >블로그</a></li>
<li id="gnbli1" onmouseover="gnbinToggle(1, this)" ><a href="/tip" >팁&테크</a></li>
<li id="gnbli2" onmouseover="gnbinToggle(2, this)" ><a href="/photo" >포토갤러리</a></li>
<li id="gnbli3" onmouseover="gnbinToggle(3, this)" ><a href="/photoWork" >돌스냅촬영</a></li>
<li id="gnbli4" onmouseover="gnbinToggle(4, this)" ><a href="/25465" >작가소개</a></li>
<li id="gnbli5" onmouseover="gnbinToggle(5, this)" ><a href="/workPage" >포트폴리오</a></li>
<!-- main_menu 1차 끝 -->
</ul>
<script type="text/javascript">
var gnb_count = 6;
</script>
<!-- 2차 메뉴 -->
<!-- 왼쪽 2차 메뉴 -->
<ol id="gnb0" class="gnb_sub" style="display:none;">
<li><a href="/kimkee" >김선생</a>
</li>
<li><a href="/notice" >공지사항</a>
</li>
<li><a href="/freeBoard" >게시판</a>
</li>
<li><a href="/music" >음악</a>
</li>
<li><a href="/movie" >영화</a>
</li>
</ol>
<!-- 왼쪽 2차 메뉴 -->
<ol id="gnb1" class="gnb_sub" style="display:none;">
<li><a href="/?mid=tip&category=42400" >웹표준</a>
</li>
<li><a href="/?mid=tip&category=361" >HTML/CSS</a>
</li>
<li><a href="/?mid=tip&category=362" >Javascript</a>
</li>
<li><a href="/?mid=tip&category=363" >ZeroBoard</a>
</li>
<li><a href="/?mid=tip&category=364" >ActionScript</a>
</li>
<li><a href="/?mid=tip&category=365" >Windows</a>
</li>
<li><a href="/?mid=tip&category=42560" >Development</a>
</li>
<li><a href="/?mid=tip&category=366" >Photo</a>
</li>
</ol>
<!-- 왼쪽 2차 메뉴 -->
<ol id="gnb2" class="gnb_sub" style="display:none;">
<li><a href="/photo" >포토메인</a>
</li>
<li><a href="/photoGallery" >포토갤러리</a>
</li>
<li><a href="/modelGallery" >레이싱/모델</a>
</li>
<li><a href="/cosphoto" >코스튬갤러리</a>
</li>
<li><a href="/people" >사람과 사람</a>
</li>
<li><a href="/photoProduct" >제품촬영사진</a>
</li>
</ol>
<!-- 왼쪽 2차 메뉴 -->
<ol id="gnb3" class="gnb_sub" style="display:none;">
<li><a href="/photoWork" >돌스냅촬영</a>
</li>
<li><a href="/photoEvent" >돌잔치사진</a>
</li>
<li><a href="/photoAlbum" >돌앨범사진</a>
</li>
<li><a href="/reservation" >예약/문의게시판</a>
</li>
<li><a href="/5739" >예약양식및절차</a>
</li>
<li><a href="/3261" >상품구성및가격</a>
</li>
</ol>
<!-- 왼쪽 2차 메뉴 -->
<ol id="gnb4" class="gnb_sub" style="display:none;">
<li><a href="/25465" >김기현</a>
</li>
<li><a href="/25465" >강대만</a>
</li>
<li><a href="/25465" >김기문</a>
</li>
</ol>
<!-- 왼쪽 2차 메뉴 -->
<ol id="gnb5" class="gnb_sub" style="display:none;">
<li><a href="/workPage" >포트폴리오</a>
</li>
<li><a href="/works" >웹사이트</a>
</li>
</ol>
</div>
</body>
</html>