드롭메뉴질문 정보
드롭메뉴질문본문
http://www.lfk.kr/
여기처럼 상단메뉴바를 드롭메뉴를 써서 만들고 싶습니다.
css써서 만들고 싶은데 감이 안잡혀서요 ㅠㅠ div나 li ul 등은 쓸줄몰라서
tr td 이런식으로 코딩해놓앗어요 ㅠㅠ 드롭메뉴 찾아보니까 div이런것들만 써서
햇갈려요.. css로 만들수 있는 방법좀 알려주세요 ㅠㅠ
여기처럼 상단메뉴바를 드롭메뉴를 써서 만들고 싶습니다.
css써서 만들고 싶은데 감이 안잡혀서요 ㅠㅠ div나 li ul 등은 쓸줄몰라서
tr td 이런식으로 코딩해놓앗어요 ㅠㅠ 드롭메뉴 찾아보니까 div이런것들만 써서
햇갈려요.. css로 만들수 있는 방법좀 알려주세요 ㅠㅠ
댓글 전체
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
include_once("$g4[path]/head.sub.php");
include_once("$g4[path]/lib/outlogin.lib.php");
include_once("$g4[path]/lib/poll.lib.php");
include_once("$g4[path]/lib/visit.lib.php");
include_once("$g4[path]/lib/connect.lib.php");
include_once("$g4[path]/lib/popular.lib.php");
$g4['title'] = "::씨엔씨 푸른병원::";
//print_r2(get_defined_constants());
// 사용자 화면 상단과 좌측을 담당하는 페이지입니다.
// 상단, 좌측 화면을 꾸미려면 이 파일을 수정합니다.
$table_width = 1004;
?>
<style type="text/css">
body {
background-image: url(/images/cmainbg.jpg);background-repeat:repeat-x;
}
</style>
<table width="1130" border="0" align="center" cellpadding="0" cellspacing="0">
<td><? echo outlogin("top_login"); ?></td>
</table>
<table width="1130" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><table width="1130" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="/"><img src="/images/n_menu2_01.jpg" width="212" height="68" /></a></td>
<td><a href="/sub1_1.php"><img src="/images/n_menu2_02.jpg" width="159" height="68" border="0" /></a></td>
<td><a href="/sub2_1.php"><img src="/images/n_menu2_03.jpg" width="132" height="68" border="0" /></a></td>
<td><a href="/sub3_1.php"><img src="/images/n_menu2_04.jpg" width="125" height="68" border="0" /></a></td>
<td><a href="/sub4_1.php"><img src="/images/n_menu2_05.jpg" width="125" height="68" border="0" /></a></td>
<td><a href="/sub5_1.php"><img src="/images/n_menu2_06.jpg" width="118" height="68" border="0" /></a></td>
<td><a href="/sub6_1.php"><img src="/images/n_menu2_07.jpg" width="135" height="68" border="0" /></a></td>
<td><a href="/bbs/board.php?bo_table=News"><img src="/images/n_menu2_08.jpg" width="124" height="68" border="0" /></a></td>
</tr>
</table></td>
</tr>
상단 메뉴 소스입니다
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
include_once("$g4[path]/head.sub.php");
include_once("$g4[path]/lib/outlogin.lib.php");
include_once("$g4[path]/lib/poll.lib.php");
include_once("$g4[path]/lib/visit.lib.php");
include_once("$g4[path]/lib/connect.lib.php");
include_once("$g4[path]/lib/popular.lib.php");
$g4['title'] = "::씨엔씨 푸른병원::";
//print_r2(get_defined_constants());
// 사용자 화면 상단과 좌측을 담당하는 페이지입니다.
// 상단, 좌측 화면을 꾸미려면 이 파일을 수정합니다.
$table_width = 1004;
?>
<style type="text/css">
body {
background-image: url(/images/cmainbg.jpg);background-repeat:repeat-x;
}
</style>
<table width="1130" border="0" align="center" cellpadding="0" cellspacing="0">
<td><? echo outlogin("top_login"); ?></td>
</table>
<table width="1130" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><table width="1130" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="/"><img src="/images/n_menu2_01.jpg" width="212" height="68" /></a></td>
<td><a href="/sub1_1.php"><img src="/images/n_menu2_02.jpg" width="159" height="68" border="0" /></a></td>
<td><a href="/sub2_1.php"><img src="/images/n_menu2_03.jpg" width="132" height="68" border="0" /></a></td>
<td><a href="/sub3_1.php"><img src="/images/n_menu2_04.jpg" width="125" height="68" border="0" /></a></td>
<td><a href="/sub4_1.php"><img src="/images/n_menu2_05.jpg" width="125" height="68" border="0" /></a></td>
<td><a href="/sub5_1.php"><img src="/images/n_menu2_06.jpg" width="118" height="68" border="0" /></a></td>
<td><a href="/sub6_1.php"><img src="/images/n_menu2_07.jpg" width="135" height="68" border="0" /></a></td>
<td><a href="/bbs/board.php?bo_table=News"><img src="/images/n_menu2_08.jpg" width="124" height="68" border="0" /></a></td>
</tr>
</table></td>
</tr>
상단 메뉴 소스입니다
그냥 드립니다. 공부하게 하셔야 하는데.. 쩝.
<script type="text/javascript">
function getPosX(o)
{
var x = 0;
while (o != null)
{
x += o.offsetLeft;
o = o.offsetParent;
}
return x;
}
function getPosY(o)
{
var x = 0;
while (o != null)
{
x += o.offsetTop;
o = o.offsetParent;
}
return x;
}
function subMenuView(viewNum)
{
menuNo = eval("menu"+viewNum);
subMenu = eval("document.all.subMenu"+viewNum);
for (i=1; i<=4;i++) // 4를 서브메뉴 개수만큼 넣어야함
{
if (i!=viewNum)
{
if (eval("document.all.subMenu"+i).style.display =='')
{
eval("document.all.subMenu"+i).style.display = 'none';
}
}
}
if (subMenu.style.display =='none')
{
subMenu.style.left = getPosX(menuNo);
subMenu.style.top = getPosY(menuNo);
subMenu.style.display = '';
}
else if (subMenu.style.display =='')
{
subMenu.style.left = getPosX(menuNo);
subMenu.style.top = getPosY(menuNo);
subMenu.style.display = 'none';
}
}
</script>
<table cellpadding="0" cellspacing="0" border="0" width="430">
<tr>
<td name='menu1' id='menu1' onMouseOver='subMenuView(1)' onClick='subMenuView(1)'>aaaaaaaaa</td>
<td name='menu2' id='menu2' onMouseOver='subMenuView(2)' onClick='subMenuView(2)'>bbbbbbbbb</td>
<td name='menu3' id='menu3' onMouseOver='subMenuView(3)' onClick='subMenuView(3)'>ccccccccc</td>
<td name='menu4' id='menu4' onMouseOver='subMenuView(4)' onClick='subMenuView(4)'>ddddddddd</td>
</tr>
</table>
<!------ 서브메뉴 시작 ------------------------------*^^*---------------------->
<div id='subMenu1' style="position:absolute; width: 148; z-index:1; display: none;" onmouseleave="subMenuView(1)">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>AAAAAAAAAAA</td>
</tr>
</table>
<div style="border:#ff0000 solid 3px; background-color:#ffffff">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><a href="1111111">a1</a></td>
</tr>
<tr>
<td><a href="1111111">a2</a></td>
</tr>
<tr>
<td><a href="1111111">a3</a></td>
</tr>
</table>
</div>
</div>
<div id='subMenu2' style="position:absolute; width: 150; z-index:1; display: none;" onmouseleave="subMenuView(2)">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>BBBBBBBBBBB</td>
</tr>
</table>
<div style="border:#ff0000 solid 3px; background-color:#ffffff">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><a href="1111111">b1</a></td>
</tr>
<tr>
<td><a href="1111111">b2</a></td>
</tr>
<tr>
<td><a href="1111111">b3</a></td>
</tr>
</table>
</div>
</div>
<div id='subMenu3' style="position:absolute; width: 148; z-index:1; display: none;" onmouseleave="subMenuView(3)">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>CCCCCCCCCC</td>
</tr>
</table>
<div style="border:#ff0000 solid 3px; background-color:#ffffff">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><a href="1111111">c1</a></td>
</tr>
<tr>
<td><a href="1111111">c2</a></td>
</tr>
<tr>
<td><a href="1111111">c3</a></td>
</tr>
</table>
</div>
</div>
<div id='subMenu4' style="position:absolute; width: 150; z-index:1; display: none;" onmouseleave="subMenuView(4)">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>DDDDDDDDDDD</td>
</tr>
</table>
<div style="border:#ff0000 solid 3px; background-color:#ffffff">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><a href="1111111">d1</a></td>
</tr>
<tr>
<td><a href="1111111">d2</a></td>
</tr>
<tr>
<td><a href="1111111">d3</a></td>
</tr>
</table>
</div>
</div>
<!------ 서브메뉴 끝 ------------------------------*^^*---------------------->
<script type="text/javascript">
function getPosX(o)
{
var x = 0;
while (o != null)
{
x += o.offsetLeft;
o = o.offsetParent;
}
return x;
}
function getPosY(o)
{
var x = 0;
while (o != null)
{
x += o.offsetTop;
o = o.offsetParent;
}
return x;
}
function subMenuView(viewNum)
{
menuNo = eval("menu"+viewNum);
subMenu = eval("document.all.subMenu"+viewNum);
for (i=1; i<=4;i++) // 4를 서브메뉴 개수만큼 넣어야함
{
if (i!=viewNum)
{
if (eval("document.all.subMenu"+i).style.display =='')
{
eval("document.all.subMenu"+i).style.display = 'none';
}
}
}
if (subMenu.style.display =='none')
{
subMenu.style.left = getPosX(menuNo);
subMenu.style.top = getPosY(menuNo);
subMenu.style.display = '';
}
else if (subMenu.style.display =='')
{
subMenu.style.left = getPosX(menuNo);
subMenu.style.top = getPosY(menuNo);
subMenu.style.display = 'none';
}
}
</script>
<table cellpadding="0" cellspacing="0" border="0" width="430">
<tr>
<td name='menu1' id='menu1' onMouseOver='subMenuView(1)' onClick='subMenuView(1)'>aaaaaaaaa</td>
<td name='menu2' id='menu2' onMouseOver='subMenuView(2)' onClick='subMenuView(2)'>bbbbbbbbb</td>
<td name='menu3' id='menu3' onMouseOver='subMenuView(3)' onClick='subMenuView(3)'>ccccccccc</td>
<td name='menu4' id='menu4' onMouseOver='subMenuView(4)' onClick='subMenuView(4)'>ddddddddd</td>
</tr>
</table>
<!------ 서브메뉴 시작 ------------------------------*^^*---------------------->
<div id='subMenu1' style="position:absolute; width: 148; z-index:1; display: none;" onmouseleave="subMenuView(1)">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>AAAAAAAAAAA</td>
</tr>
</table>
<div style="border:#ff0000 solid 3px; background-color:#ffffff">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><a href="1111111">a1</a></td>
</tr>
<tr>
<td><a href="1111111">a2</a></td>
</tr>
<tr>
<td><a href="1111111">a3</a></td>
</tr>
</table>
</div>
</div>
<div id='subMenu2' style="position:absolute; width: 150; z-index:1; display: none;" onmouseleave="subMenuView(2)">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>BBBBBBBBBBB</td>
</tr>
</table>
<div style="border:#ff0000 solid 3px; background-color:#ffffff">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><a href="1111111">b1</a></td>
</tr>
<tr>
<td><a href="1111111">b2</a></td>
</tr>
<tr>
<td><a href="1111111">b3</a></td>
</tr>
</table>
</div>
</div>
<div id='subMenu3' style="position:absolute; width: 148; z-index:1; display: none;" onmouseleave="subMenuView(3)">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>CCCCCCCCCC</td>
</tr>
</table>
<div style="border:#ff0000 solid 3px; background-color:#ffffff">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><a href="1111111">c1</a></td>
</tr>
<tr>
<td><a href="1111111">c2</a></td>
</tr>
<tr>
<td><a href="1111111">c3</a></td>
</tr>
</table>
</div>
</div>
<div id='subMenu4' style="position:absolute; width: 150; z-index:1; display: none;" onmouseleave="subMenuView(4)">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>DDDDDDDDDDD</td>
</tr>
</table>
<div style="border:#ff0000 solid 3px; background-color:#ffffff">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><a href="1111111">d1</a></td>
</tr>
<tr>
<td><a href="1111111">d2</a></td>
</tr>
<tr>
<td><a href="1111111">d3</a></td>
</tr>
</table>
</div>
</div>
<!------ 서브메뉴 끝 ------------------------------*^^*---------------------->
감사해요 ㅠㅠ 저렇겐 안했지만 ..저것도 공부해봐야겠어요