묻고답하기
드롭다운 메뉴 만들기
2014.10.19 11:49
이 XE 홈페이지처럼 롤오버하면 세부메뉴가 드롭다운형식으로 나타나는 웹페이지를 만들고 싶은데,
처음부터 시작하려니 너무 어렵네요.
Doorweb 님이 만드신 XE 웹사이트 레이아웃에 필요한 부분만 복사해서 붙여넣기 했는데도 제대로 작동하지 않네요..
http://lifeto.dothome.co.kr/xe/board_OzlS19
드롭다운 메뉴는 어떻게 만드는 것인지, 좀 쉽게 설명해주실 수 있나요?
댓글 5
-
lifeto
2014.10.20 20:23
친절한 댓글 감사합니다.
말씀주신대로 js, css, html에 각각 소스를 넣고 이리저리 손보는데도 아직 이모양입니다.
http://lifeto.cafe24.com/xe/board_lPQY33
-
다른곳에서 js 오류가 있네요.
크롬으로 소스보기를 하시면 js 오류나는 지점을 파악하실 수 있을겁니다.
필요없는 부분이면 삭제하시길 권해드립니다.
-
lifeto
2014.10.20 22:08
말씀하신대로 default 에 적용하니 쉽게 적용되네요.
그런데 위 소스는 한 메뉴에 롤오버하면 다른 메뉴까지 함께 내려오네요.
혹시 롤오버하면 따로따로 각자의 세부메뉴가 보이게 하는 방법은 없을까요?
-
소스 자체가 다른 메뉴의 하위메뉴까지 노출할 수 없는 형태입니다.
그냥 간단합니다.
<ul class="nav navbar-nav navbar-left">
<li loop="$GNB->list=>$key1,$val1" class="dropdown">
<a class="first_a" href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul cond="$val1['list']" class="dropdown-menu">
<li loop="$val1['list']=>$key2,$val2"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
</ul>
</li>
</ul>
라는 메뉴코드가 있고
그리고 css에서
.dropdown-menu{display:none}
.open .dropdown-menu{display:block;} 을 넣어둡니다.
간단하게 설명하면 하위메뉴는 노출이 안되지만 상위 li에 open이라는 클라스명이 있으면 노출시키라는 css 입니다.
그리고 js에
$('.dropdown').hover(function(){
$(this).addClass('open');
});
$('.dropdown').focus(function(){
$(this).addClass('open');
});
$('.dropdown').mouseleave(function(){
$(this).removeClass('open');
});
이걸 추가합니다.
.dropdown 마우스를 올리거나 focus를 맞추거나 하면 open 클라스명을 붙힌다는 js 이고
마지막은 마우스가 벗어나면 하위 메뉴가 사라져야 한다는 조건들입니다.
다른 js에서 오류가 있을때 메뉴가 정상작동 안할 수 있습니다.