드롭메뉴에 대해서 질문드려요. 정보
드롭메뉴에 대해서 질문드려요.첨부파일
본문
안녕하세요. 요새 한창 배우고있는 쵸파입니다.
드롭메뉴가 잘안되어 이렇게 문의드리는데요.
css 설정은 아래와 같습니다.
------------------------------------------------------------
.preload1 {background: url(blank_over.gif);}
.preload2 {background: url(blank_overa.gif);}
#nav {padding:0; margin:0; list-style:none; height:36px; background:#fff; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(blank.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;background:url(blank.gif) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:#fff; background: url(blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(blank_over.gif) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(blank_overa.gif) no-repeat right top;}
#nav li:hover > a.top_link {color:#fff; background: url(blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(blank_over.gif) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(blank_overa.gif) no-repeat right top;}
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
/* keep the 'next' level invisible by placing it off screen. */
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover ul.sub
{left:0; top:31px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:20px; width:90px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:#fff url(arrow.gif) 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;}
#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;}
#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}
------------------------------------------------------------
아래의 파일 다운로드부탁드리구요.
html에 보시면, 예제가나오는데
아래로 서브메뉴가 보여지도록 하는부분이 정말로 모르겠습니다.
현재 메뉴까지 만들어둔상태인데, 이미지에 마우스오버시 아래로 서브메뉴가 나오도록
구성하고싶습니다.
css는 어디서 부터 어디까지 사용해야하고..
html에는 어떻게 넣어줘야 제대로 작동할지 궁금하네요.
너무나 왕초보인관계로 ㅠ 장장 4시간을 수정해보았지만..
제자리 걸음이네요 ㅠ
드롭메뉴가 잘안되어 이렇게 문의드리는데요.
css 설정은 아래와 같습니다.
------------------------------------------------------------
.preload1 {background: url(blank_over.gif);}
.preload2 {background: url(blank_overa.gif);}
#nav {padding:0; margin:0; list-style:none; height:36px; background:#fff; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(blank.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;background:url(blank.gif) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:#fff; background: url(blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(blank_over.gif) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(blank_overa.gif) no-repeat right top;}
#nav li:hover > a.top_link {color:#fff; background: url(blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(blank_over.gif) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(blank_overa.gif) no-repeat right top;}
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
/* keep the 'next' level invisible by placing it off screen. */
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover ul.sub
{left:0; top:31px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:20px; width:90px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:#fff url(arrow.gif) 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;}
#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;}
#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}
------------------------------------------------------------
아래의 파일 다운로드부탁드리구요.
html에 보시면, 예제가나오는데
아래로 서브메뉴가 보여지도록 하는부분이 정말로 모르겠습니다.
현재 메뉴까지 만들어둔상태인데, 이미지에 마우스오버시 아래로 서브메뉴가 나오도록
구성하고싶습니다.
css는 어디서 부터 어디까지 사용해야하고..
html에는 어떻게 넣어줘야 제대로 작동할지 궁금하네요.
너무나 왕초보인관계로 ㅠ 장장 4시간을 수정해보았지만..
제자리 걸음이네요 ㅠ
댓글 전체
흠... 저는 자바스크립트를 배운적도 없고, 그냥 c언어, JAVA 좀 배운거 토대로 끄적일줄만 압니다.
뭐 기본원리는 아는데 라이브러리랑 고급기술을 모르는 셈이죠.
css도 혼자 홈페이지 만들어보면서 깨우친사람이라 제가 알려드리는 답은 효율적이지 못한 코딩일수도 있다는 말을 먼저 드립니다.
첨부파일을 뒤늦게 봤는데.. 저건 제가봐도 햇갈리고요.. 저렇게 서브메뉴가 엄청나게 많은게 아니라면
제가 알려드리는게 좀더 이해하기 쉬우실수도 있습니다..
id 지정하느라 약간 컨트롤+c,v 노가다가 필요하지만^^;
그럼 구조를 먼저 살펴보면
기본적으로 화면에 표시할 div가 있겠죠.
그리고 거기에 마우스를 올리면 나타날 서브메뉴를 포함한 div를 id=menu1 이라고 합시다.
그런 서브메뉴와 메인메뉴가 한두개가 아니니까 뒤에 1을 하나씩 늘려가면서
지정을 해놓습니다.
그리고 이건 제가 만든 스크립트인데 이것을 문서에 포함시킵니다. 헤드 안에 넣어도되고
그냥 아무데나 넣어도 상관없더군요 ㅎ 하지만 헤드안에 넣는게 좋겠죠.
<!-- 주메뉴 토글을 위한 마우스온 이벤트 -->
<script language="javascript">
function Show(hidden_div){
var a = document.getElementById(hidden_div);
if(!a) return;
a.style.display = "block";
}
function Hide(hidden_div){
var a = document.getElementById(hidden_div);
if(!a) return;
a.style.display="none";
}
</script>
함수가 Show, Hide 두개가 있는데
살펴보면 둘다 hidden_div 라는 인자를 받아서
그 hidden_div 인자에 들은 값을 id 가진 '객체'를 a 라는 변수에 넣었습니다.
여기서 Show 함수는 그 객채의 style 중 display 라는 속성을 block 으로 바꿔줍니다.
그리고 Hide 함수는 display 속성을 none 으로 바꿔주죠.
자 그러면 div 마크업부분을 살펴보면.
<div onMouseOver="Show('menu1')" onMouseOut="Hide('menu1')">
주메뉴죠.
<div id="menu1" style="display:none;" nMouseOver="Show('menu1')" onMouseOut="Hide('menu1')">
서브메뉴입니다.
style 대신에 css에서 새로운 클래스명이나 저기 선언된 id를 제어해줘도됩니다..
</div>
</div>
자 보시면 Show() Hide() 가로안에 'menu1' 로 인자를 넘기고 있고요. 그 menu1은 서브메뉴 div ID죠.
이렇게 넘기심 끝입니다...
주메뉴에 마우스오버일때 Show함수, 아웃일때 Hide 함수를 호출하게하고.
마찬가지로 서브메뉴에도 똑같이 오버,아웃 지정해주는게 좋죠.
저기서는 굳이 지정안해도 어차피 주메뉴의 div 안에 들어가있지만
저같은경우는 주메뉴에 포함안
뭐 기본원리는 아는데 라이브러리랑 고급기술을 모르는 셈이죠.
css도 혼자 홈페이지 만들어보면서 깨우친사람이라 제가 알려드리는 답은 효율적이지 못한 코딩일수도 있다는 말을 먼저 드립니다.
첨부파일을 뒤늦게 봤는데.. 저건 제가봐도 햇갈리고요.. 저렇게 서브메뉴가 엄청나게 많은게 아니라면
제가 알려드리는게 좀더 이해하기 쉬우실수도 있습니다..
id 지정하느라 약간 컨트롤+c,v 노가다가 필요하지만^^;
그럼 구조를 먼저 살펴보면
기본적으로 화면에 표시할 div가 있겠죠.
그리고 거기에 마우스를 올리면 나타날 서브메뉴를 포함한 div를 id=menu1 이라고 합시다.
그런 서브메뉴와 메인메뉴가 한두개가 아니니까 뒤에 1을 하나씩 늘려가면서
지정을 해놓습니다.
그리고 이건 제가 만든 스크립트인데 이것을 문서에 포함시킵니다. 헤드 안에 넣어도되고
그냥 아무데나 넣어도 상관없더군요 ㅎ 하지만 헤드안에 넣는게 좋겠죠.
<!-- 주메뉴 토글을 위한 마우스온 이벤트 -->
<script language="javascript">
function Show(hidden_div){
var a = document.getElementById(hidden_div);
if(!a) return;
a.style.display = "block";
}
function Hide(hidden_div){
var a = document.getElementById(hidden_div);
if(!a) return;
a.style.display="none";
}
</script>
함수가 Show, Hide 두개가 있는데
살펴보면 둘다 hidden_div 라는 인자를 받아서
그 hidden_div 인자에 들은 값을 id 가진 '객체'를 a 라는 변수에 넣었습니다.
여기서 Show 함수는 그 객채의 style 중 display 라는 속성을 block 으로 바꿔줍니다.
그리고 Hide 함수는 display 속성을 none 으로 바꿔주죠.
자 그러면 div 마크업부분을 살펴보면.
<div onMouseOver="Show('menu1')" onMouseOut="Hide('menu1')">
주메뉴죠.
<div id="menu1" style="display:none;" nMouseOver="Show('menu1')" onMouseOut="Hide('menu1')">
서브메뉴입니다.
style 대신에 css에서 새로운 클래스명이나 저기 선언된 id를 제어해줘도됩니다..
</div>
</div>
자 보시면 Show() Hide() 가로안에 'menu1' 로 인자를 넘기고 있고요. 그 menu1은 서브메뉴 div ID죠.
이렇게 넘기심 끝입니다...
주메뉴에 마우스오버일때 Show함수, 아웃일때 Hide 함수를 호출하게하고.
마찬가지로 서브메뉴에도 똑같이 오버,아웃 지정해주는게 좋죠.
저기서는 굳이 지정안해도 어차피 주메뉴의 div 안에 들어가있지만
저같은경우는 주메뉴에 포함안
됀 따로 노는 서브메뉴였거든요^^
아무튼... 메뉴들마다 저렇게 해주시면.. 됩니다..
이해가 잘되셨기를..
아 구글크롬이라그런가 왜캐 짤리지..리플이!!
글 다날라가!!!자꾸!!
무튼.... 저런 2개 함수를 이용하는 아주 기본적이고 무식한; 소스를 드렸으니...
기회되면 응용해보세요. 전 저기서 좀더 응용도 해봤는데.. 누군가에게 배포할만한 것이 못되서;;ㅋㅋ
저걸드립니다.
아무튼... 메뉴들마다 저렇게 해주시면.. 됩니다..
이해가 잘되셨기를..
아 구글크롬이라그런가 왜캐 짤리지..리플이!!
글 다날라가!!!자꾸!!
무튼.... 저런 2개 함수를 이용하는 아주 기본적이고 무식한; 소스를 드렸으니...
기회되면 응용해보세요. 전 저기서 좀더 응용도 해봤는데.. 누군가에게 배포할만한 것이 못되서;;ㅋㅋ
저걸드립니다.
미치겠네요.. 무엇이 문제 인지 잘안됩니다. ㅠㅠ 누가 도움을 줄분없으실런지 ㅠ
님께서 올리신 소스를 가지고 하시지마시구 제가 알려드린방법으로 해보세요........
어차피 같은 원리인데 님이올리신건 마우스오버/아웃 테그까지 다 자동으로해주는 그런겁니다.
제 설명 이해를 하시고 하나씩 적용해보심 되요..
어차피 같은 원리인데 님이올리신건 마우스오버/아웃 테그까지 다 자동으로해주는 그런겁니다.
제 설명 이해를 하시고 하나씩 적용해보심 되요..