시하님의 상단 메뉴 익스6 사용하기 정보
시하님의 상단 메뉴 익스6 사용하기
본문
시하님의 상담 메뉴 소스가 익스6에서는 동작을 하지 않더라구요.
display:block; 을 display:inline-block; 로 바꿔 보기도 하고...
웹서핑을 통해 문제점을 알아 보려고 노력했지만, 아마도 제가 근본적인 문제 파악을 못하고 있는 것 같아 이렇게 질문을 합니다.
익스6에서 사용가능하게 하려면 어떤 부분을 수정을 해야할까요?
소스 아래에 첨부합니다. gnb.css, header.php 파일 두 개가 있더라구요.
아래에 내용 첨부합니다.
[ gnb.css 파일 내용 ]
/* Header */
.header { width:100%; background:url(/GNB/img/header_bg.jpg) 0 0 repeat-x; position:relative; z-index:2; }
.header .container {height:100px; width:900px; margin:0 auto;}
.header .logo {position:absolute; margin:20px 0 0 30px;}
/* topmenu */
.topmenu {
height:30px;
position:relative;
top:40px;
}
.tmenu_left {
padding-left:10px;
}
.topmenu .dropdown {
float:left;
font-family:'맑은 고딕', dotum, gulim, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:14px;
text-transform:uppercase;
text-shadow:1px 2px 1px #000;
line-height:1.1em;
color:#999999;
z-index:1000;
margin:0;
padding:0;}
.tmenu_left .dropdown {
float:right}
.topmenu .dropdown li {
display:block;
float:left;
margin:0;
position:relative;
list-style:none;
margin:0 20px}
.topmenu .dropdown li a {
display:block;
color:#999999;
height:20px;
text-decoration:none;}
.topmenu .dropdown li a span {
display:block}
.topmenu .dropdown li a:hover,
.topmenu .dropdown .current-menu-item a,
.topmenu .dropdown .current-menu-item li a:hover,
.topmenu .dropdown .current-menu-item .current_page_item a,
.topmenu .dropdown .current-on a,
.topmenu .dropdown .current-on a:hover,
.topmenu .dropdown li li.current-on a,
.topmenu .dropdown li .current-on .current-menu-item a,
.topmenu .dropdown .menu-item-home.current-menu-item a,
.topmenu .dropdown .menu-item-home a:hover{
color:#ffd300;}
.topmenu .dropdown .current-menu-item ul li a,
.topmenu .dropdown .current-on ul li a,
.topmenu .dropdown .current-on .current-menu-item li a,
.topmenu .dropdown .menu-item-home ul li a,
.topmenu .dropdown .current-on .current-on li a {
color:#e0e0e0}
.topmenu .dropdown li ul li a:hover,
.topmenu .dropdown .current-on ul li a:hover,
.topmenu .dropdown .current-on .current-menu-item a,
.topmenu .dropdown .current-on li .current-menu-item a,
.topmenu .dropdown li .current-menu-item a,
.topmenu .dropdown li.parent li a:hover,
.topmenu .dropdown .current-on .current-on a{
color:#ffd300}
.topmenu .dropdown li ul {
display:none;
position: absolute;
top: 20px;
left:-10px;
z-index: 9900;
width: 186px;
padding:0;
margin:0;
font-size:14px;
font-family:'맑은 고딕', dotum, gulim, Arial, Helvetica, sans-serif;
text-transform:none;
text-shadow:none}
.topmenu .dropdown li ul li ul {
display:none;
position: absolute;
top:-7px;
width: 175px;
left:185px !important;
z-index: 9900;}
.topmenu .dropdown li ul li {
display:block;
background:url(/GNB/img/dropdown_1_bg.png) 0 0 repeat-y;
width: 186px;
margin:0;
height:auto;
clear:both;
position:relative;
line-height:1.3em}
.topmenu .dropdown li ul li ul li {
width: 175px;}
.topmenu .dropdown li ul li ul li {
background:url(/GNB/img/dropdown_1_bg2.png) 0 0 repeat-y;}
.topmenu .dropdown li ul li.first {
background:url(/GNB/img/dropdown_1_first.png) 0 top no-repeat;
padding-top:10px}
.topmenu .dropdown li ul li ul li.first {
background:url(/GNB/img/dropdown_1_first2.png) 0 top no-repeat;
padding-top:4px}
.topmenu .dropdown li ul li.last {
background:url(/GNB/img/dropdown_1_last.png) 0 bottom no-repeat;
padding:0 0 6px 0;}
.topmenu .dropdown li ul li.only {
background:url(/GNB/img/dropdown_1_only.png) 0 top no-repeat;
padding-top:10px}
.topmenu .dropdown li ul li ul li.last {
background:url(/GNB/img/dropdown_1_last2.png) 0 bottom no-repeat;}
.topmenu .dropdown li ul li a{
display:block;
color:#999;
height: auto;
padding:10px 23px 10px 23px;
background:url(/GNB/img/dropdown_1_line.png) center bottom no-repeat;}
.topmenu .dropdown li ul li ul li a {
background:url(/GNB/img/dropdown_1_line2.png) center bottom no-repeat;
padding:10px 26px 10px 26px !important;}
.topmenu .dropdown li ul li.last a,
.topmenu .dropdown li ul li ul li.last a {
background:none}
.topmenu .dropdown li a span {
display:block;}
.topmenu .dropdown li a:hover span {
cursor:pointer}
.topmenu .dropdown li ul li.parent span {
background:url(/GNB/img/dropdown_1_arrow.png) 130px 5px no-repeat;
padding-right:10px}
.topmenu .dropdown li ul li.parent a:hover span {
background:url(/GNB/img/dropdown_1_arrow.png) 131px 5px no-repeat;}
.topmenu .dropdown li ul li.parent ul li span,
.topmenu .dropdown li ul li.parent ul a:hover span {
background:none;
padding-right:0px}
.topmenu .dropdown li:hover ul li ul {
display:none;}
.topmenu .dropdown li:hover ul,
.topmenu .dropdown li:hover ul li:hover ul{
display:block}
[ header.php 파일 내용 ]
<link rel="stylesheet" type="text/css" media="screen" href="<?=$g4[path]?>/GNB/gnb.css" />
<script type="text/javascript">
<!--
$(document).ready(function() {
$(".dropdown ul").parent("li").addClass("parent");
$(".dropdown li:first-child").addClass("first");
$(".dropdown li:last-child").addClass("last");
$(".dropdown li:only-child").removeClass("last").addClass("only");
});
//-->
</script>
<div class="header">
<div class="container">
<div class="logo"><a href="<?=$g4[path]?>/"><img src="<?=$g4[path]?>/GNB/img/logo.png" alt="Blog Writer" width="207" height="113" border="0" /></a></div><!-- 로고 -->
<div class="topmenu tmenu_left">
<ul class="dropdown">
<li class="menu-item-home"><a href="<?=$g4[path]?>/"><span>Home</span></a></li><!-- 홈으로 // 삭제가능 -->
<?
$excgr = "('html', 'banner', 'admin')"; // 보이지 않도록 제외시킬 그룹명
$sql = " SELECT a.gr_id, a.gr_subject, a.gr_use_access, a.gr_9, a.gr_10, b.mb_id FROM $g4[group_table] AS a LEFT JOIN $g4[group_member_table] AS b ON a.gr_id = b.gr_id WHERE (b.mb_id = '$member[mb_id]' AND a.gr_use_access = '1' ) OR a.gr_use_access = '0' and a.gr_id not in " . $excgr . " ORDER BY a.gr_1";
$result = sql_query($sql);
//echo "<li>\n";
for ($i=0; $row=sql_fetch_array($result); $i++) {
$gSubject = ($row['gr_id'] == $gr_id)?$row['gr_subject']:$row['gr_subject'];//그룹제목
$glink = (!empty($row['gr_10']))?$row['gr_10']:$g4[path].'/bbs/'.'group.php?gr_id=' .$row['gr_id'];//그룹링크
if ($row['gr_id'] == $gr_id) {
echo "<li class='current-on'><a href='$glink'>$gSubject</a>\n";
echo "<ul>\r\n";
} else {
echo "<li><a href='$glink'>$gSubject</a>\n";
echo "<ul>\r\n";
}
$sqlb = " select bo_subject, bo_table, bo_category_list, bo_9, bo_10 from $g4[board_table] where (bo_list_level <= $member[mb_level]) and (gr_id = '$row[gr_id]') order by bo_order_search";
$resultb = sql_query($sqlb);
for ($j=0; $rowb=sql_fetch_array($resultb); $j++) {
$tmp_write_table = $g4[write_prefix] . $rowb[bo_table];
$tmp_write_table_category = $g4[write_prefix] . $rowb[bo_table] . $rowb[bo_category_list];
///////////게시판호출/////////////////////
$bSubject = ($rowb['bo_table'] == $bo_table)?cut_str(get_text($rowb['bo_subject']),100,""):cut_str(get_text($rowb['bo_subject']), 100,"");//게시판제목
$bLink = (!empty($rowb['bo_10']))?$rowb['bo_10']:$g4[path].'/bbs/'.'board.php?bo_table=' .$rowb['bo_table'];//게시판링크
if ($rowb[bo_category_list]) {
$ca_menu = explode("|",$rowb[bo_category_list]);
echo "\t<li><a href='$bLink'><span>$bSubject</span></a>\n";
echo "\t\t<ul>\n";
for ($j=0; $j<count($ca_menu); $j++) {
echo "\t\t<li><a href='{$g4[bbs_path]}/board.php?bo_table=$rowb[bo_table]&sca=".$ca_menu[$j]."'><span>$ca_menu[$j]</span></a></li>\n";
}
echo "\t</ul>\n\t\t</li>\n";
} else {
echo "\t<li><a href='$bLink'><span>$bSubject</span></a></li>\n";
echo "\n";
}
}
echo "\t</ul>\n";
echo "</li>\n";
}
?>
<!-- 추가메뉴 -->
<li><a href="#"><span>사용자 추가메뉴</span></a>
<ul>
<li><a href="#"><span>추가메뉴 1</span></a></li>
<li><a href="#"><span>추가메뉴 2</span></a></li>
<li><a href="#"><span>추가메뉴 3</span></a></li>
<li><a href="#"><span>추가메뉴 4</span></a>
<ul>
<li><a href="#"><span>카테고리 1</span></a></li>
<li><a href="#"><span>카테고리 2</span></a></li>
<li><a href="#"><span>카테고리 3</span></a></li>
<li><a href="#"><span>카테고리 4</span></a></li>
</ul>
</li>
<li><a href="#"><span>추가메뉴 5</span></a></li>
<li><a href="#"><span>추가메뉴 6</span></a></li>
</ul>
</li>
<!-- 추가메뉴 끝 -->
</ul>
<div class="clear"></div>
</div>
</div>
</div>
display:block; 을 display:inline-block; 로 바꿔 보기도 하고...
웹서핑을 통해 문제점을 알아 보려고 노력했지만, 아마도 제가 근본적인 문제 파악을 못하고 있는 것 같아 이렇게 질문을 합니다.
익스6에서 사용가능하게 하려면 어떤 부분을 수정을 해야할까요?
소스 아래에 첨부합니다. gnb.css, header.php 파일 두 개가 있더라구요.
아래에 내용 첨부합니다.
[ gnb.css 파일 내용 ]
/* Header */
.header { width:100%; background:url(/GNB/img/header_bg.jpg) 0 0 repeat-x; position:relative; z-index:2; }
.header .container {height:100px; width:900px; margin:0 auto;}
.header .logo {position:absolute; margin:20px 0 0 30px;}
/* topmenu */
.topmenu {
height:30px;
position:relative;
top:40px;
}
.tmenu_left {
padding-left:10px;
}
.topmenu .dropdown {
float:left;
font-family:'맑은 고딕', dotum, gulim, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:14px;
text-transform:uppercase;
text-shadow:1px 2px 1px #000;
line-height:1.1em;
color:#999999;
z-index:1000;
margin:0;
padding:0;}
.tmenu_left .dropdown {
float:right}
.topmenu .dropdown li {
display:block;
float:left;
margin:0;
position:relative;
list-style:none;
margin:0 20px}
.topmenu .dropdown li a {
display:block;
color:#999999;
height:20px;
text-decoration:none;}
.topmenu .dropdown li a span {
display:block}
.topmenu .dropdown li a:hover,
.topmenu .dropdown .current-menu-item a,
.topmenu .dropdown .current-menu-item li a:hover,
.topmenu .dropdown .current-menu-item .current_page_item a,
.topmenu .dropdown .current-on a,
.topmenu .dropdown .current-on a:hover,
.topmenu .dropdown li li.current-on a,
.topmenu .dropdown li .current-on .current-menu-item a,
.topmenu .dropdown .menu-item-home.current-menu-item a,
.topmenu .dropdown .menu-item-home a:hover{
color:#ffd300;}
.topmenu .dropdown .current-menu-item ul li a,
.topmenu .dropdown .current-on ul li a,
.topmenu .dropdown .current-on .current-menu-item li a,
.topmenu .dropdown .menu-item-home ul li a,
.topmenu .dropdown .current-on .current-on li a {
color:#e0e0e0}
.topmenu .dropdown li ul li a:hover,
.topmenu .dropdown .current-on ul li a:hover,
.topmenu .dropdown .current-on .current-menu-item a,
.topmenu .dropdown .current-on li .current-menu-item a,
.topmenu .dropdown li .current-menu-item a,
.topmenu .dropdown li.parent li a:hover,
.topmenu .dropdown .current-on .current-on a{
color:#ffd300}
.topmenu .dropdown li ul {
display:none;
position: absolute;
top: 20px;
left:-10px;
z-index: 9900;
width: 186px;
padding:0;
margin:0;
font-size:14px;
font-family:'맑은 고딕', dotum, gulim, Arial, Helvetica, sans-serif;
text-transform:none;
text-shadow:none}
.topmenu .dropdown li ul li ul {
display:none;
position: absolute;
top:-7px;
width: 175px;
left:185px !important;
z-index: 9900;}
.topmenu .dropdown li ul li {
display:block;
background:url(/GNB/img/dropdown_1_bg.png) 0 0 repeat-y;
width: 186px;
margin:0;
height:auto;
clear:both;
position:relative;
line-height:1.3em}
.topmenu .dropdown li ul li ul li {
width: 175px;}
.topmenu .dropdown li ul li ul li {
background:url(/GNB/img/dropdown_1_bg2.png) 0 0 repeat-y;}
.topmenu .dropdown li ul li.first {
background:url(/GNB/img/dropdown_1_first.png) 0 top no-repeat;
padding-top:10px}
.topmenu .dropdown li ul li ul li.first {
background:url(/GNB/img/dropdown_1_first2.png) 0 top no-repeat;
padding-top:4px}
.topmenu .dropdown li ul li.last {
background:url(/GNB/img/dropdown_1_last.png) 0 bottom no-repeat;
padding:0 0 6px 0;}
.topmenu .dropdown li ul li.only {
background:url(/GNB/img/dropdown_1_only.png) 0 top no-repeat;
padding-top:10px}
.topmenu .dropdown li ul li ul li.last {
background:url(/GNB/img/dropdown_1_last2.png) 0 bottom no-repeat;}
.topmenu .dropdown li ul li a{
display:block;
color:#999;
height: auto;
padding:10px 23px 10px 23px;
background:url(/GNB/img/dropdown_1_line.png) center bottom no-repeat;}
.topmenu .dropdown li ul li ul li a {
background:url(/GNB/img/dropdown_1_line2.png) center bottom no-repeat;
padding:10px 26px 10px 26px !important;}
.topmenu .dropdown li ul li.last a,
.topmenu .dropdown li ul li ul li.last a {
background:none}
.topmenu .dropdown li a span {
display:block;}
.topmenu .dropdown li a:hover span {
cursor:pointer}
.topmenu .dropdown li ul li.parent span {
background:url(/GNB/img/dropdown_1_arrow.png) 130px 5px no-repeat;
padding-right:10px}
.topmenu .dropdown li ul li.parent a:hover span {
background:url(/GNB/img/dropdown_1_arrow.png) 131px 5px no-repeat;}
.topmenu .dropdown li ul li.parent ul li span,
.topmenu .dropdown li ul li.parent ul a:hover span {
background:none;
padding-right:0px}
.topmenu .dropdown li:hover ul li ul {
display:none;}
.topmenu .dropdown li:hover ul,
.topmenu .dropdown li:hover ul li:hover ul{
display:block}
[ header.php 파일 내용 ]
<link rel="stylesheet" type="text/css" media="screen" href="<?=$g4[path]?>/GNB/gnb.css" />
<script type="text/javascript">
<!--
$(document).ready(function() {
$(".dropdown ul").parent("li").addClass("parent");
$(".dropdown li:first-child").addClass("first");
$(".dropdown li:last-child").addClass("last");
$(".dropdown li:only-child").removeClass("last").addClass("only");
});
//-->
</script>
<div class="header">
<div class="container">
<div class="logo"><a href="<?=$g4[path]?>/"><img src="<?=$g4[path]?>/GNB/img/logo.png" alt="Blog Writer" width="207" height="113" border="0" /></a></div><!-- 로고 -->
<div class="topmenu tmenu_left">
<ul class="dropdown">
<li class="menu-item-home"><a href="<?=$g4[path]?>/"><span>Home</span></a></li><!-- 홈으로 // 삭제가능 -->
<?
$excgr = "('html', 'banner', 'admin')"; // 보이지 않도록 제외시킬 그룹명
$sql = " SELECT a.gr_id, a.gr_subject, a.gr_use_access, a.gr_9, a.gr_10, b.mb_id FROM $g4[group_table] AS a LEFT JOIN $g4[group_member_table] AS b ON a.gr_id = b.gr_id WHERE (b.mb_id = '$member[mb_id]' AND a.gr_use_access = '1' ) OR a.gr_use_access = '0' and a.gr_id not in " . $excgr . " ORDER BY a.gr_1";
$result = sql_query($sql);
//echo "<li>\n";
for ($i=0; $row=sql_fetch_array($result); $i++) {
$gSubject = ($row['gr_id'] == $gr_id)?$row['gr_subject']:$row['gr_subject'];//그룹제목
$glink = (!empty($row['gr_10']))?$row['gr_10']:$g4[path].'/bbs/'.'group.php?gr_id=' .$row['gr_id'];//그룹링크
if ($row['gr_id'] == $gr_id) {
echo "<li class='current-on'><a href='$glink'>$gSubject</a>\n";
echo "<ul>\r\n";
} else {
echo "<li><a href='$glink'>$gSubject</a>\n";
echo "<ul>\r\n";
}
$sqlb = " select bo_subject, bo_table, bo_category_list, bo_9, bo_10 from $g4[board_table] where (bo_list_level <= $member[mb_level]) and (gr_id = '$row[gr_id]') order by bo_order_search";
$resultb = sql_query($sqlb);
for ($j=0; $rowb=sql_fetch_array($resultb); $j++) {
$tmp_write_table = $g4[write_prefix] . $rowb[bo_table];
$tmp_write_table_category = $g4[write_prefix] . $rowb[bo_table] . $rowb[bo_category_list];
///////////게시판호출/////////////////////
$bSubject = ($rowb['bo_table'] == $bo_table)?cut_str(get_text($rowb['bo_subject']),100,""):cut_str(get_text($rowb['bo_subject']), 100,"");//게시판제목
$bLink = (!empty($rowb['bo_10']))?$rowb['bo_10']:$g4[path].'/bbs/'.'board.php?bo_table=' .$rowb['bo_table'];//게시판링크
if ($rowb[bo_category_list]) {
$ca_menu = explode("|",$rowb[bo_category_list]);
echo "\t<li><a href='$bLink'><span>$bSubject</span></a>\n";
echo "\t\t<ul>\n";
for ($j=0; $j<count($ca_menu); $j++) {
echo "\t\t<li><a href='{$g4[bbs_path]}/board.php?bo_table=$rowb[bo_table]&sca=".$ca_menu[$j]."'><span>$ca_menu[$j]</span></a></li>\n";
}
echo "\t</ul>\n\t\t</li>\n";
} else {
echo "\t<li><a href='$bLink'><span>$bSubject</span></a></li>\n";
echo "\n";
}
}
echo "\t</ul>\n";
echo "</li>\n";
}
?>
<!-- 추가메뉴 -->
<li><a href="#"><span>사용자 추가메뉴</span></a>
<ul>
<li><a href="#"><span>추가메뉴 1</span></a></li>
<li><a href="#"><span>추가메뉴 2</span></a></li>
<li><a href="#"><span>추가메뉴 3</span></a></li>
<li><a href="#"><span>추가메뉴 4</span></a>
<ul>
<li><a href="#"><span>카테고리 1</span></a></li>
<li><a href="#"><span>카테고리 2</span></a></li>
<li><a href="#"><span>카테고리 3</span></a></li>
<li><a href="#"><span>카테고리 4</span></a></li>
</ul>
</li>
<li><a href="#"><span>추가메뉴 5</span></a></li>
<li><a href="#"><span>추가메뉴 6</span></a></li>
</ul>
</li>
<!-- 추가메뉴 끝 -->
</ul>
<div class="clear"></div>
</div>
</div>
</div>
댓글 전체