테스트 사이트 - 개발 중인 베타 버전입니다

서브메뉴에서 클래스가 먹지 않습니다. 채택완료

제주감귤 4년 전 조회 2,251

</p>

<p><?php

if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가</p>

<p>// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨

add_stylesheet('<link rel="stylesheet" href="'.G5_SHOP_SKIN_URL.'/style.css">', 0);</p>

<p>$mshop_categories = get_shop_category_array(true);</p>

<p>?></p>

<p><script type="text/javascript">

    function display_submenu(num) { 

        document.getElementById("box_gnb_1dli"+num).style.display="block";

    }

</script></p>

<p>

<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{}</p>

<p>    .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;}</p>

<p>    .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}</p>

<p>    #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;}</p>

<p>    #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></p>

<p><!-- 쇼핑몰 카테고리 시작 { -->

<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;</p>

<p>            $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;</p>

<p>            

            $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>

<!--} 쇼핑몰 카테고리 끝 --></p>

<p>

 

 

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개

Big1
4년 전

<li class="box_gnb_1dli<?php echo $i ?>"

클래스로 지정했는데 

자바스크립트는 

document.getElementById("box_gnb_1dli"+num)

아이디를 찾고 있네요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

제주감귤
4년 전
오 날카로운 지적 감사합니다~! 그러나 id로 바꾸어도 block은 먹지 않습니다ㅠㅠ
B
Big1
4년 전
display_submenu(" .$i. " )
display_submenu(" .$i. ") 여기 space 제거해보세요
제주감귤
4년 전
ㅠㅠ...공백 지워도 그대로입니다ㅠ

댓글을 작성하려면 로그인이 필요합니다.

식쏭
4년 전

</p>

<p><? $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; ?>">

            

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

제주감귤
4년 전
정성스러운 코드 감사합니다ㅠㅠ근데 코드를 넣으면 하위 내용까지 모두 사라지네요ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

웹솔드
4년 전

 

<a href="<?php echo $row['url']; ?>" class="box_gnb_1da" onmouseover="display_submenu(<?php echo $i ?>);">
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

제주감귤
4년 전
답변 감사합니다~!! 그러나 <a href="/shop/list.php?ca_id=10" class="box_gnb_1da" onmouseover="display_submenu(0);">카페,커뮤니티</a> 이렇게만 나오고 display:none은 풀리지 않습니다ㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인