묻고답하기
드롭 메뉴 힌트좀 주세요... ㅠㅠ
2013.03.31 22:52
http://www.xeschool.com/xe/step3_5/ 여기서 자료를 찾아서 현재 레이아웃 제작 연습 중인 사이트에
풀다운 메뉴 (메인 메뉴에 마우스 올려 놓을 시에 2차 메뉴가 내려오는.. 공홈에서처럼) 를 구현해 보려고 했는데
잘 안되네요...
<div class="mainNav">
<ul class="nav">
<li loop="$main_menu->list=>$key,$val" class="on"|cond="$val['selected']"><a href="{$val['href']}"
onclick="window.open(this.href);return false;"|cond="$val['open_window']=='Y'">{$val['link']}</a></li>
</ul>
</div>
<ul class="nav">
<li loop="$main_menu->list=>$key,$val" class="on"|cond="$val['selected']"><a href="{$val['href']}"
onclick="window.open(this.href);return false;"|cond="$val['open_window']=='Y'">{$val['link']}</a></li>
</ul>
</div>
.header .mainNav { position:absolute; bottom:0px; margin:0 auto; width:968px; height:32px; }
.header .mainNav { background:url(../img/bg_subheader.gif) repeat-x; height:32px; width:968px; margin:0 auto; }
.header .mainNav .nav { list-style:none; overflow:hidden; margin:0; padding:0; }
.header .mainNav .nav li { float:left; margin:0 0; }
.header .mainNav .nav li a { text-decoration:none; }
.header .mainNav { background:url(../img/bg_subheader.gif) repeat-x; height:32px; width:968px; margin:0 auto; }
.header .mainNav .nav { list-style:none; overflow:hidden; margin:0; padding:0; }
.header .mainNav .nav li { float:left; margin:0 0; }
.header .mainNav .nav li a { text-decoration:none; }
이렇게 해서 사이트에 메인 메뉴를 등록했습니다............
관리자 화면에서 메뉴 추가하면 사이트 상에도 잘 추가 되구요... 이미지 등록도 잘 되는데....
풀다운 메뉴를 해보고 싶어서, 저기 저 위 사이트에서 말해주는데로
jQuery(function($){
// Language Select
$('.language>.toggle').click(function(){
$('.selectLang').toggle();
});
// Global Navigation Bar
var gMenu = $('.header>div.mainNav');
var gItem = gMenu.find('>ul>li');
var ggItem = gMenu.find('>ul>li>ul>li');
var lastEvent = null;
gItem.find('>ul').hide();
gItem.filter(':first').addClass('first');
function gMenuToggle(){
var t = $(this);
if (t.next('ul').is(':hidden') || t.next('ul').length == 0) {
gItem.find('>ul').slideUp(200);
gItem.find('a').removeClass('hover');
t.next('ul').slideDown(200);
t.addClass('hover');
};
};
function gMenuOut(){
gItem.find('ul').slideUp(200);
gItem.find('a').removeClass('hover');
};
gItem.find('>a').mouseover(gMenuToggle).focus(gMenuToggle);
gItem.mouseleave(gMenuOut);
});
// Language Select
$('.language>.toggle').click(function(){
$('.selectLang').toggle();
});
// Global Navigation Bar
var gMenu = $('.header>div.mainNav');
var gItem = gMenu.find('>ul>li');
var ggItem = gMenu.find('>ul>li>ul>li');
var lastEvent = null;
gItem.find('>ul').hide();
gItem.filter(':first').addClass('first');
function gMenuToggle(){
var t = $(this);
if (t.next('ul').is(':hidden') || t.next('ul').length == 0) {
gItem.find('>ul').slideUp(200);
gItem.find('a').removeClass('hover');
t.next('ul').slideDown(200);
t.addClass('hover');
};
};
function gMenuOut(){
gItem.find('ul').slideUp(200);
gItem.find('a').removeClass('hover');
};
gItem.find('>a').mouseover(gMenuToggle).focus(gMenuToggle);
gItem.mouseleave(gMenuOut);
});
js 폴더를 생성하고 mainNav.js 란 파일을 만들어서 위 소스대로 등록했어요........
그리고 layouts.html 여기서 맨 위에
<load target="js/mainNav.js" />
이것도 추가했는데요....
메인 메뉴에 서브 메뉴 몇 개를 추가했는데...
풀다운 메뉴가 보이지가 않네요.....
테스트 URL : http://93th.woobi.co.kr
여기구요.. 무엇이 문제인지 알려주시면 감사하겠습니다... ㅠㅠㅠ....
하루 종일 매달렸더니 힘드네용...
댓글 1
-
송동우
2013.03.31 22:57
-
Fidelity
2013.04.01 08:43
감사합니다... 뜨게 하는 것까지는 성공했는데, CSS 에서 어떻게 꾸며야 하는지 감이 안오네요...
기본적으로 html 구성이 2차메뉴가 나오도록 구성되어 있지 않은 것 같아보이네요......
아래 코드는 xe_official gnb 부분입니다.
비교해보면 무엇이 잘못되었나 도움이 될 겁니다.....
<div class="gnb">
<ul>
<li loop="$main_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
</ul>
</li>
</ul>
</div>