서브메뉴에서 클래스가 먹지 않습니다.
본문
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.G5_SHOP_SKIN_URL.'/style.css">', 0);
$mshop_categories = get_shop_category_array(true);
?>
<script type="text/javascript">
function display_submenu(num) {
document.getElementById("box_gnb_1dli"+num).style.display="block";
}
</script>
<style>
/* 메인메뉴 */
#box_gnb{position:relative;width: 20%;float: left;background: red;}
#box_gnb h2{position:absolute;font-size:0;line-height:0;overflow:hidden}
#box_gnb .box_gnb_wrap {margin:0 auto;position:relative;}
#box_gnb #box_gnb_1dul {margin:0 auto;font-size:1.1em;font-weight:normal;padding: 0;zoom:1;}
#box_gnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#box_gnb .box_gnb_1dli{line-height:50px;}
#box_gnb .box_gnb_1dli:hover{}
.box_gnb_1dli .bg{display:inline-block;width:10px;height:10px;overflow:hidden;background:url(../img/box_gnb_bg2.gif) no-repeat 50% 50%;text-indent:-999px}
.box_gnb_1da {display:inline-block;text-decoration:none;color:#fff;}
.box_gnb_2dli{border-top:1px solid #666;}
.box_gnb_2dli:first-child{border:0}
.box_gnb_2dul {min-width:100%;background:#555;padding: 0;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.1);
box-shadow: 0 1px 5px rgba(0,0,0,0.1);}
.box_gnb_2da {display:block;padding:0 10px;line-height:40px;color:#fff;text-align:center;text-decoration:none}
a.box_gnb_2da:hover{background:#b1b1b1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}
.box_gnb_1dli_air .box_gnb_2da {}
.box_gnb_1dli_on .box_gnb_2da {}
.box_gnb_2da:focus, .box_gnb_2da:hover {color:#fff}
.box_gnb_1dli_over .box_gnb_2dul {display:block;left:0}
.box_gnb_1dli_over2 .box_gnb_2dul {display:block;right:0}
.box_gnb_wrap .box_gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2em;}
.box_gnb_wrap .box_gnb_empty a{color:#fff;text-decoration:underline}
.box_gnb_wrap .box_gnb_al_ul .box_gnb_empty, .box_gnb_wrap .box_gnb_al_ul .box_gnb_empty a{color:#555}
#box_gnb .box_gnb_menu_btn{background:#4158d1;color:#fff;width:50px;height:50px;border:0;vertical-align:top;font-size:18px}
#box_gnb .box_gnb_close_btn{background:#4158d1;color:#fff;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:-50px;left:0}
#box_gnb .box_gnb_mnal{padding:0; display:none;}
#box_gnb_all{display:none;position:absolute;width:100%;z-index:99;}
#box_gnb_all .box_gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""}
#box_gnb_all .box_gnb_al_ul{background:#fff;border:1px solid #4158d1;padding:20px;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.2);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
#box_gnb_all .box_gnb_al_li{background:#fff;float:left;min-width:20%;padding:5px }
#box_gnb_all .box_gnb_al_li .box_gnb_al_a{font-size:1.083em;padding:10px;display:block;position:relative;margin-bottom:10px;background: #eff1f9;border-bottom: 1px solid #dee2f1;font-weight: bold;color:#243071}
#box_gnb_all .box_gnb_al_li li {padding-left:10px;line-height:2em}
#box_gnb_all .box_gnb_al_li li i{color:#9ca6cc}
#box_gnb_all .box_gnb_al_li li a{color:#555}
</style>
<!-- 쇼핑몰 카테고리 시작 { -->
<nav id="box_gnb">
<h2>쇼핑몰 카테고리</h2>
<ul id="box_gnb_1dul">
<?php
// 1단계 분류 판매 가능한 것만
$box_gnb_zindex = 999; // box_gnb_1dli z-index 값 설정용
$i = 0;
foreach($mshop_categories as $cate1) {
if( empty($cate1) ) continue;
$row = $cate1['text'];
$box_gnb_zindex -= 1; // html 구조에서 앞선 box_gnb_1dli 에 더 높은 z-index 값 부여
// 2단계 분류 판매 가능한 것만
$count = ((int) count($cate1)) - 1;
?>
<li class="box_gnb_1dli<?php echo $i ?>" style="display:none; z-index:<?php echo $box_gnb_zindex; ?>">
<?php
//좌측 서브메뉴 전체 리스트에서 현재 페이지에 해당하는 대메뉴 리스트만 보여줌
if ( ($row['me_name']==$board['bo_subject'])||($row['me_name']==$g5['title']) ) {
echo ("<script language='javascript'> display_submenu(" .$i. " ); </script> ");
}
?>
<a href="<?php echo $row['url']; ?>" class="box_gnb_1da">
<?php echo $row['ca_name']; ?>
</a>
<?php
$j=0;
foreach($cate1 as $key=>$cate2) {
if( empty($cate2) || $key === 'text' ) continue;
$row2 = $cate2['text'];
if ($j==0) echo '<ul class="box_gnb_2dul" style="z-index:'.$box_gnb_zindex.'">';
?>
<li class="box_gnb_2dli">
<a href="<?php echo $row2['url']; ?>" class="box_gnb_2da"><?php echo $row2['ca_name']; ?></a>
</li>
<?php $j++; } //end for
if ($j>0) echo '</ul>';
?>
</li>
<?php $i++; } //end for ?>
</ul>
</nav>
<!--} 쇼핑몰 카테고리 끝 -->
https://sir.kr/g5_skin/7515 글을 가져오면 하위메뉴가 나오지 않아서
https://sir.kr/g5_skin/7515 글과 boxcategory.skin.php을 응용해서 제작했는데요
코드는 위에처럼 짰고 개발자도구에서는 사진처럼 나옵니다.
<script type="text/javascript">
function display_submenu(num) {
document.getElementById("box_gnb_1dli"+num).style.display="block";
}
</script>
스크립트를 줘서 해당 숫자가 맞으면 display:block 시키도록 해놓았는데
display:none이 풀리지 않습니다..ㅠ
진짜진짜 똑같이 따라했는데 왜 안나오는걸까요...?
!-->답변 3
<a href="<?php echo $row['url']; ?>" class="box_gnb_1da" onmouseover="display_submenu(<?php echo $i ?>);">
<? $display = (($row['me_name']==$board['bo_subject'])||($row['me_name']==$g5['title'])) ? "display:block;"; : "display:none;"; ?>
<li class="box_gnb_1dli<?=$i?>" style=<?=$display?> z-index:<?=$box_gnb_zindex; ?>">
<li class="box_gnb_1dli<?php echo $i ?>"
클래스로 지정했는데
자바스크립트는
document.getElementById("box_gnb_1dli"+num)
아이디를 찾고 있네요
답변을 작성하시기 전에 로그인 해주세요.