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

드롭메뉴제작중에 문제 채택완료

도현박 2년 전 조회 2,065

서브페이지에 대분류 중분류 드롭 메뉴 제작중입니다.

PC에서 hover말고 클릭해서 제작하고싶은데 

도저히 감이 안잡힙니다.

 

select option 태그말고 div로 제작해서 모바일까지 연결되게 하고싶은데 어떻게 처리해야할까요

구글링 해봤는데 어렵네요 ㅠ

 

예시로 보여주실분 감사하겠습니다!

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

답변 1개

채택된 답변
+20 포인트
2년 전

</p>

<p><?php

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

$nav_menu = array();

$sql = "select * from {$g5['custom_menu_table']} where (1)";

$res = sql_query($sql);

for($i=0;$row=sql_fetch_array($res);$i++) {

    $nav_menu[$row['me_depth']][] = $row;

}

?>

<style>

.page-navi-wrap { position: absolute; left: 0; right: 0; bottom: 100%; }

.nav-wrap { display: flex; background-color: rgba(<?php echo BCR;?>,<?php echo BCG; ?>,<?php echo BCB;?>,0.5); }

.nav { display: flex; }

.pos { display: flex; margin-left: auto; align-self: auto; }

.nav-depth { position: relative; border-right: 1px solid rgba(<?php echo BCR;?>,<?php echo BCG; ?>,<?php echo BCB;?>,0.7); }

.nav-depth > span { display: block; font-size: 1rem; font-weight: 600; padding: 0 26px; height: 58px; line-height: 58px; cursor: pointer; min-width: 180px; }

.nav-depth.is-none > span { cursor: default; }

.nav-depth.is-arrow > span:after { position: absolute; content: ''; width: 14px; height: 14px; background: url(<?php echo G5_URL;?>/img/ico/submenu_arrow.png) no-repeat center; right: 15px; top: calc( 50% ); transform: translate(0, -50%); }

.nav-depth.bg_black > span { color: #fff; }

.nav-depth.bg_white > span { color: #000; }

.nav-depth > ul { display: none; position: absolute; top: 100%; left: 0; right: 0; background-color: #fff; z-index: 10; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }

.nav-depth > ul > li { position: relative; }

.nav-depth > ul > li > a { display: block; padding: 0 26px; height: 52px; line-height: 52px; border-bottom: 1px solid #ddd; }

.nav-depth > ul > li > a:after { position: absolute; content: ''; width: 14px; height: 14px; background: url(<?php echo G5_URL;?>/img/ico/submenu_arrow.png) no-repeat center; right: 15px; top: calc( 50% ); transform: translate(0, -50%); }

@media(max-width: 768px) {

.nav { padding-left: 5px; }

.nav-depth > span { display: block; font-size: 14px; font-weight: 400; padding: 0 16px; height: 48px; line-height: 48px; cursor: pointer; min-width: 100px; }

.nav-depth > span:after { display: none; }

.nav-depth > ul > li > a { display: block; font-size: 12px; padding: 0 16px; height: 38px; line-height: 38px; border-bottom: 1px solid #ddd; }

.nav-depth > ul > li > a:after { display: none; }

}

</style>

<div class="page-navi-wrap">

    <div class="page-navi-inner max-layout">

        <div class="nav-wrap">

            <div class="nav">

            <?php

            foreach($nav_menu as $key=>$val) {

                $cut = $key * G5_CATE_LENGTH;

                $str = substr($me_code,0,$cut);

                $me_key   = array_search(substr($me_code,0,$cut), array_column($val, 'me_code'));

                if($me_key === false) {

                    continue;

                }

                $now_menu = $val[$me_key];

                $href_cut = $cut - G5_CATE_LENGTH;

                $href_str = substr($me_code,0,$href_cut);

                $count    = count($val);

                $arrow    = $count > 1 ? 'is-arrow' : 'is-none';

                echo '<div class="nav-depth depth'.$key.' bg_'.BASIC_STYLE.' '.$arrow.'" data-depth="'.$key.'">';

                    echo '<span class="nav-now">'.$now_menu['me_name'].'</span>';

                    if($count > 1) {

                        echo '<ul>';

                        foreach($val as $sub) {

                            if($sub['me_pc_use'] != '1' && $is_mobile == false ) {

                                continue;

                            }

                            if($sub['me_mo_use'] != '1' && $is_mobile == true ) {

                                continue;

                            }

                            if($sub['me_pa_use'] == '1' && $is_mobile == true ) {

                                continue;

                            }

                            if($key > 1 && $href_str != substr($sub['me_code'],0,$href_cut)) {

                                continue;

                            }

                            $me_link = $sub['me_link'];

                            $target  = $sub['me_target'] ? 'target="_'.$sub['me_target'].'"' : '';

                            echo '<li><a href="'.$me_link.'" '.$target.'><span>'.$sub['me_name'].'</span></a></li>';

                        }

                        echo '</ul>';

                    }

                echo '</div>';

            }

            ?>

            </div>

            <div class="pos">

            </div>

        </div>

    </div>

</div>

<script>

$(function() {

    $(document).on('click','.nav-now',function() {

        var $that = $(this).closest('.nav-depth'),

            depth1= $that.data('depth');

        $.each($('.nav-depth'),function() {

            var $this = $(this),

                depth2 = $this.data('depth'),

                $target = $this.find('ul');

            if(depth1 == depth2) {

                $target.slideToggle('slow');

            } else {

                if($target.is(':visible') === true) {

                    $target.slideToggle('slow');

                }

            }

        });

    });

});

</script></p>

<p>

 

말씀하신 형태로 구현된 서브메뉴입니다.

커스텀 된 내용이 조금 있어서 감안해서 보시면 될 듯 합니다.

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

답변에 대한 댓글 1개

도현박
2년 전
감사합니다:-)

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

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

로그인