아래분...
코멘트엔 긴글이라 작성이 안된다고 해서 새로운 글로 씁니다.
저도 급할땐 여기다가 질문을 하기도 합니다. 헌데.. 이건 급해보이지 않네요 ㅎㅎㅎ
아무튼 각설하고...
그누보드5 라는 가정하에..
그누보드 관리자화면에서 메뉴를 생성합니다.
그래야 아래코드를 사용할 수 있습니다.
적용해보진 않았으니... 안되더라도 이해해주세요
<!DOCTYPE html>
<html>
<head>
<title>sangdan menu</title>
<meta charset="UTF-8">
<style>
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 1033px;
margin: 0px auto;
border: 1px solid #025ea9;
background-image: url(http://www.dongbucares.com/skin/wmbar/menu/img/top_bg1.jpg);
background-image: -moz-linear-gradient(#025ea9, #2b8aca);
background-image: -webkit-gradient(linear, left top, left bottom, from(#025ea9), to(#111));
background-image: -webkit-linear-gradient(#025ea9, #2b8aca);
background-image: -o-linear-gradient(#025ea9, #2b8aca);
background-image: -ms-linear-gradient(#025ea9, #2b8aca);
background-image: linear-gradient(#025ea9, #2b8aca);
-moz-border-radius: px;
-webkit-border-radius: px;
border-radius: px;
-moz-box-shadow: 0 1px 1px #9ed8f7, 0 1px 0 #38a9e6 inset;
-webkit-box-shadow: 0 1px 1px #9ed8f7, 0 1px 0 #38a9e6 inset;
box-shadow: 0 1px 1px #9ed8f7, 0 1px 0 #38a9e6 inset;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
z-index:100000;
float: left;
border-right: 1px solid #025ea9;
-moz-box-shadow: 1px 0 0 #025ea9;
-webkit-box-shadow: 1px 0 0 #025ea9;
box-shadow: 1px 0 0 #025ea9;
position: relative;
}
#menu a {
float: left;
padding: 12px 20px;
color: #fff;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #000;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 20 20 20;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 999;
background: #0462ad;
background: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#111));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 0px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 0px 0 #111, 0 2px 0 #666;
box-shadow: 0 0px 0 #111, 0 0px 0 #666;
}
#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
</head>
<body>
<ul id="menu">
<?php
$sql = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '2'
order by me_order, me_id ";
$result = sql_query($sql, false);
$gnb_zindex = 999; // gnb_1dli z-index 값 설정용
for ($i=0; $row=sql_fetch_array($result); $i++) {
?>
<li><a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>"><?php echo $row['me_name'] ?></a>
<ul>
<?php
$sql2 = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '4'
and substring(me_code, 1, 2) = '{$row['me_code']}'
order by me_order, me_id ";
$result2 = sql_query($sql2);
for ($k=0; $row2=sql_fetch_array($result2); $k++) {
if($k == 0)
echo '<ul class="gnb_2dul">'.PHP_EOL;
?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><?php echo $row2['me_name'] ?></a></li>
<?php
}
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</ul>
</li>
<?php
}
if ($i == 0) { ?>
<li>메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
</ul>
</body>
</html>