테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

메뉴바 hover에 대한 질문입니다!! 채택완료

배정태 2년 전 조회 6,400
답변 11
목록 

</p>

<p><?php</p>

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

<p> </p>

<p>if (!defined('_INDEX_')) define('_INDEX_', true);</p>

<p> </p>

<p>include_once(G5_THEME_PATH.'/head.sub.php');</p>

<p>include_once(G5_LIB_PATH.'/latest.lib.php');</p>

<p>include_once(G5_LIB_PATH.'/outlogin.lib.php');</p>

<p>include_once(G5_LIB_PATH.'/poll.lib.php');</p>

<p>include_once(G5_LIB_PATH.'/visit.lib.php');</p>

<p>include_once(G5_LIB_PATH.'/connect.lib.php');</p>

<p>include_once(G5_LIB_PATH.'/popular.lib.php');</p>

<p> </p>

<p>?></p>

<p><script></p>

<p>jQuery(function($) {</p>

<p>    var $bodyEl = $('body'),</p>

<p>        $sidedrawerEl = $('#sidedrawer');</p>

<p>   </p>

<p>    function showSidedrawer() {</p>

<p>        // show overlay</p>

<p>        var options = {</p>

<p>        onclose: function() {</p>

<p>            $sidedrawerEl</p>

<p>            .removeClass('active')</p>

<p>            .appendTo(document.body);</p>

<p>        }</p>

<p>        };</p>

<p>   </p>

<p>        var $overlayEl = $(mui.overlay('on', options));</p>

<p>   </p>

<p>        // show element</p>

<p>        $sidedrawerEl.appendTo($overlayEl);</p>

<p>        setTimeout(function() {</p>

<p>            $sidedrawerEl.addClass('active');</p>

<p>        }, 20);</p>

<p>    }</p>

<p> </p>

<p>    function hideSidedrawer() {</p>

<p>        $bodyEl.toggleClass('hide-sidedrawer');</p>

<p>    }</p>

<p> </p>

<p>    $('.js-show-sidedrawer').on('click', showSidedrawer);</p>

<p>    $('.js-hide-sidedrawer').on('click', hideSidedrawer);</p>

<p> </p>

<p>});</p>

<p></script></p>

<p> </p>

<p><!-- 상단 시작 { --></p>

<p><header id="header"></p>

<p>    <h1 id="hd_h1"><?php echo $g5['title'] ?></h1></p>

<p> </p>

<p>    <div class="to_content"><a href="#container">본문 바로가기</a></div></p>

<p>    <div id="mobile-indicator"></div></p>

<p>   </p>

<p>    <?php</p>

<p>    if(defined('_INDEX_')) { // index에서만 실행</p>

<p>        include G5_MOBILE_PATH.'/newwin.inc.php'; // 팝업레이어</p>

<p>    } ?></p>

<p> </p>

<p>    <div id="hd_wrapper" class=""></p>

<p>        <div class="gnb_side_btn"></p>

<p>            <a class="sidedrawer-toggle mui--visible-xs-inline-block mui--visible-sm-inline-block js-show-sidedrawer"><i class="fa fa-bars"></i><span class="sound_only">모바일 전체메뉴</span></a></p>

<p>            <!-- <a class="sidedrawer-toggle mui--hidden-xs mui--hidden-sm js-hide-sidedrawer"><i class="fa fa-bars"></i><span class="sound_only">전체메뉴</span></a> --></p>

<p>        </div></p>

<p>       </p>

<p>        <div class="header_ct"></p>

<p>            <div class="hd_sch_wr" id="hd_sch_wr_test"></p>

<p>                <!-- <button class="hd_sch_bt"><i class="fa fa-search"></i><span class="sound_only">검색창 열기</span></button> --></p>

<p>                <fieldset id="hd_sch"></p>

<p>                    <h2>사이트 내 전체검색</h2></p>

<p>                    <form name="fsearchbox" action="<?php echo G5_BBS_URL ?>/search.php" onsubmit="return fsearchbox_submit(this);" method="get"></p>

<p>                    <input type="hidden" name="sfl" value="wr_subject||wr_content"></p>

<p>                    <input type="hidden" name="sop" value="and"></p>

<p>                    <input type="text" name="stx" id="sch_stx" placeholder="검색어를 입력해주세요" required maxlength="20"></p>

<p>                    <button type="submit" value="검색" id="sch_submit"><i class="fa fa-search" aria-hidden="true"></i><span class="sound_only">검색</span></button></p>

<p>                    </form></p>

<p>                </fieldset></p>

<p>            </div></p>

<p>           </p>

<p> </p>

<p>            <script></p>

<p>            function fsearchbox_submit(f)</p>

<p>            {</p>

<p>                if (f.stx.value.length < 2) {</p>

<p>                    alert("검색어는 두글자 이상 입력하십시오.");</p>

<p>                    f.stx.select();</p>

<p>                    f.stx.focus();</p>

<p>                    return false;</p>

<p>                }</p>

<p> </p>

<p>                // 검색에 많은 부하가 걸리는 경우 이 주석을 제거하세요.</p>

<p>                var cnt = 0;</p>

<p>                for (var i=0; i<f.stx.value.length; i++) {</p>

<p>                    if (f.stx.value.charAt(i) == ' ')</p>

<p>                        cnt++;</p>

<p>                }</p>

<p> </p>

<p>                if (cnt > 1) {</p>

<p>                    alert("빠른 검색을 위하여 검색어에 공백은 한개만 입력할 수 있습니다.");</p>

<p>                    f.stx.select();</p>

<p>                    f.stx.focus();</p>

<p>                    return false;</p>

<p>                }</p>

<p> </p>

<p>                return true;</p>

<p>            }</p>

<p>           </p>

<p>            $(document).ready(function(){</p>

<p>                $(document).on("click", ".hd_sch_bt", function() {</p>

<p>                    $("#hd_sch").toggle();</p>

<p>                });</p>

<p>                $(".sch_more_close").on("click", function(){</p>

<p>                    $("#hd_sch").hide();</p>

<p>                });</p>

<p>            });</p>

<p>            </script></p>

<p>        </div></p>

<p>        <div id="tnb"></p>

<p>                    <?php echo outlogin("theme/basic"); ?></p>

<p>                </div></p>

<p>    </div></p>

<p>   </p>

<p></header></p>

<p><!-- } 상단 끝 --></p>

<p>       </p>

<p><aside id="sidedrawer"></p>

<p>       </p>

<p> </p>

<p><div id="logo"></p>

<p> </p>

<p>        <a href ="<a href="http://dkagh012.dothome.co.kr"" target="_blank" rel="noopener noreferrer">http://dkagh012.dothome.co.kr"</a> class="logo_a">R O G O</a></p>

<p></div></p>

<p> </p>

<p>    <div id="gnb"></p>

<p>        <div class="gnb_side"></p>

<p>            <h2>메인메뉴</h2></p>

<p>            <ul id="gnb_1dul"></p>

<p>            <?php</p>

<p>            $menu_datas = get_menu_db(1, true);</p>

<p>            $i = 0;</p>

<p>            foreach( $menu_datas as $row ){</p>

<p>                if( empty($row) ) continue;</p>

<p>            ?></p>

<p>                <li class="gnb_1dli"></p>

<p>                    <a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?php echo $row['me_name'] ?></a></p>

<p>                    <?php</p>

<p>                    $k = 0;</p>

<p>                    foreach( (array) $row['sub'] as $row2 ){</p>

<p>                        if( empty($row2) ) continue;</p>

<p> </p>

<p>                        if($k == 0)</p>

<p>                            echo '<button type="button" class="btn_gnb_op"><span class="sound_only">하위분류</span></button><ul class="gnb_2dul">'.PHP_EOL;</p>

<p>                    ?></p>

<p>                        <li class="gnb_2dli"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="gnb_2da"><span></span><?php echo $row2['me_name'] ?></a></li></p>

<p>                    <?php</p>

<p>                    $k++;</p>

<p>                    }   //end foreach $row2</p>

<p> </p>

<p>                    if($k > 0)</p>

<p>                        echo '</ul>'.PHP_EOL;</p>

<p>                    ?></p>

<p>                </li></p>

<p>            <?php</p>

<p>            $i++;</p>

<p>            }   //end foreach $row</p>

<p> </p>

<p>            if ($i == 0) {  ?></p>

<p>                <li id="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> 
<a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하세요.<?php } ?></li></p>

<p>            <?php } ?></p>

<p>            </ul></p>

<p>        </div></p>

<p>    </div></p>

<p></aside>            </p>

<p>           </p>

<p><script></p>

<p>$(function () {</p>

<p>    //폰트 크기 조정 위치 지정</p>

<p>    var font_resize_class = get_cookie("ck_font_resize_add_class");</p>

<p>    if( font_resize_class == 'ts_up' ){</p>

<p>        $("#text_size button").removeClass("select");</p>

<p>        $("#size_def").addClass("select");</p>

<p>    } else if (font_resize_class == 'ts_up2') {</p>

<p>        $("#text_size button").removeClass("select");</p>

<p>        $("#size_up").addClass("select");</p>

<p>    }</p>

<p> </p>

<p>    $(".hd_opener").on("click", function() {</p>

<p>        var $this = $(this);</p>

<p>        var $hd_layer = $this.next(".hd_div");</p>

<p> </p>

<p>        if($hd_layer.is(":visible")) {</p>

<p>            $hd_layer.hide();</p>

<p>            $this.find("span").text("열기");</p>

<p>        } else {</p>

<p>            var $hd_layer2 = $(".hd_div:visible");</p>

<p>            $hd_layer2.prev(".hd_opener").find("span").text("열기");</p>

<p>            $hd_layer2.hide();</p>

<p> </p>

<p>            $hd_layer.show();</p>

<p>            $this.find("span").text("닫기");</p>

<p>        }</p>

<p>    });</p>

<p> </p>

<p>    $("#container").on("click", function() {</p>

<p>        $(".hd_div").hide();</p>

<p> </p>

<p>    });</p>

<p> </p>

<p>    $(".btn_gnb_op").click(function(){</p>

<p>        $(this).toggleClass("btn_gnb_cl").next(".gnb_2dul").slideToggle(300);</p>

<p>       </p>

<p>    });</p>

<p> </p>

<p>    $(".hd_closer").on("click", function() {</p>

<p>        var idx = $(".hd_closer").index($(this));</p>

<p>        $(".hd_div:visible").hide();</p>

<p>        $(".hd_opener:eq("+idx+")").find("span").text("열기");</p>

<p>    });</p>

<p>   </p>

<p>    $(".gnb_1dli").on(click,function(){</p>

<p>       </p>

<p>        $(".gnb_1dli").addClass('qowjdxo').siblings().removeClass('qowjdxo');</p>

<p> </p>

<p>    });</p>

<p> </p>

<p>});</p>

<p></script></p>

<p> </p>

<p><!-- 컨텐츠 시작 { --></p>

<p><div id="content-wrapper"></p>

<p>    <div id="wrapper"></p>

<p>        <!-- container 시작 { --></p>

<p>        <div id="container"></p>

<p>            <div class="conle"></p>

<p>                <?php if (!defined("_INDEX_") && !(defined("_H2_TITLE_") && _H2_TITLE_ === true)) {?></p>

<p>                    <h2 id="container_title" class="top" title="<?php echo get_text($g5['title']); ?>"><?php echo get_head_title($g5['title']); ?></h2></p>

<p>                <?php } ?></p>

<p>

이게 제 코드인데 addClss를 해서 qowjdxo 라고 추가를 하고 그 상태로 만약 홈을 클릭하면 홈만 색깔이 있고 다른거는 색깔이 없도록 하고싶은데 어떻게 넣어야 할지 몰라서 질문을 올립니다 !  

#그누보드5
댓글을 작성하려면 로그인이 필요합니다.

답변 11개

채택된 답변
+20 포인트
지

간단한 방법으로 현재의 uri를 체크해서 php로 조건으로 현재위치의 class를 active로 하는 방법이있습니다.

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

답변에 대한 댓글 1개

�
배정태
2년 전
코드를 간단하게 작성 가능할까요

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

지

이건 기본적인 방식이라서 편하신데로 변경해서 사용하시면 될것 같습니다.

수고하셨습니다.

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

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

배정태
배정태
2년 전

지구버스님 감사합니다 

</p>

<p>       </p>

<p>        <?php if($row['me_name']=="자유게시판") {?></p>

<p>            <li class="gnb_1dli <?php echo $_GET["bo_table"]=="free" ? "active":"gnb_1dli_on gnb_1dli_over2";?>"></p>

<p>       </p>

<p>            <?php }else if($row['me_name']=="갤러리"){?></p>

<p>                <li class="gnb_1dli <?php echo $_GET["bo_table"]=="gallery" ? "active":"gnb_1dli_on gnb_1dli_over2";?>"></p>

<p>       </p>

<p>                <?php }else if($row['me_name']=="공지사항"){?></p>

<p>                <li class="gnb_1dli <?php echo $_GET["bo_table"]=="notice" ? "active":"gnb_1dli_on gnb_1dli_over2";?>"></p>

<p>       </p>

<p>                <?php }else if($row['me_name']=="질문답변"){?></p>

<p>                <li class="gnb_1dli <?php echo $_GET["bo_table"]=="qa" ? "active":"gnb_1dli_on gnb_1dli_over2";?>"></p>

<p>       </p>

<p>                <?php }else if($row['me_name']=="홈"){?></p>

<p>                <li class="gnb_1dli <?php echo $_GET["bo_table"]=="" ? "active":"gnb_1dli_on gnb_1dli_over2";?>"></p>

<p>       </p>

<p>                <!-- ==> 홈위치 확인필요 --></p>

<p>       </p>

<p>                <?php }?></p>

<p>       </p>

<p>                <a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?php echo $row['me_name'] ?></a></p>

<p>                <a class=""></a></p>

<p>           </p>

<p>               </p>

<p>               </p>

<p>               

 

css 

</p>

<p>#gnb .gnb_1da {display:block;text-align: left;line-height: 56px;font-family: 'Noto Sans CJK KR';</p>

<p>  color: #6F7181;  padding-left: 50px;font-style: normal;font-weight: 500;font-size: 22px;</p>

<p>}</p>

<p> </p>

<p>#gnb .gnb_1da:hover {background:#1E1E2D;border-left: 4px solid #26E2B3; color:#fff;font-weight: 700;</p>

<p>font-size: 22px;}</p>

<p> </p>

<p>#gnb .active{background:#1E1E2D;border-left: 4px solid #26E2B3; color:#fff;font-weight: 700;</p>

<p>  font-size: 22px;</p>

<p> </p>

<p>}</p>

<p>

 </p>

<p>#gnb .active:hover {background:#1E1E2D;border-left: 0px solid #1E1E2D; color:#fff;font-weight: 700;</p>

<p>font-size: 22px;}</p>

<p>

이런식으로 바꿔서 제가 원하는 방향으로 갔습니다 감사합니다!! 혹시 여기서 어떻게 바꾸면 좋겠다고 하는 부분이 있으면 말씀해주시면 좋을꺼같아영

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

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

지

기존

  • ">

    변경

  • ">
  • ">
  • ">
  • ">
  • "> ==> 홈위치 확인필요

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

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

    지

     

    active가 아니고 hover되었을때

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

    답변에 대한 댓글 1개

    �
    배정태
    2년 전
    제가 이해를 잘 못해서 어떤 방식으로 넣는건지 알려주실수 있을까요?

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

    지

    네 

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

    답변에 대한 댓글 2개

    �
    배정태
    2년 전
    지구버스님 정보 공개가 안되어 있어서 제게 쪽지를 못 드리네용
    제가 지구버스님을 code를 넣었는데 css가 들어가지 않아서 어디가 문제인지 파악을 못하고 있습니다!! 한번 더 도와주실수 있으실까요
    �
    배정태
    2년 전
    [code]
    <div id="gnb">
    <div class="gnb_side">
    <h2>메인메뉴</h2>
    <ul id="gnb_1dul">
    <?php
    $menu_datas = get_menu_db(1, true);
    $i = 0;
    foreach( $menu_datas as $row ){
    if( empty($row) ) continue;
    ?>
    <li class="gnb_1dli">
    <a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?php echo $row['me_name'] ?></a>
    <a class="<?php echo $_GET["bo_table"]=="free" ? "active":"";?>"></a>
    <?php
    $k = 0;
    foreach( (array) $row['sub'] as $row2 ){
    if( empty($row2) ) continue;

    if($k == 0)
    echo '<button type="button" class="btn_gnb_op"><span class="sound_only">하위분류</span></button><ul class="gnb_2dul">'.PHP_EOL;
    ?>
    <li class="gnb_2dli"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="gnb_2da"><span></span><?php echo $row2['me_name'] ?></a></li>
    <?php
    $k++;
    } //end foreach $row2

    if($k > 0)
    echo '</ul>'.PHP_EOL;
    ?>
    </li>
    <?php
    [/code]
    지금 현재 제 코드 입니다

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

    지

    네 

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

    답변에 대한 댓글 1개

    �
    배정태
    2년 전
    제가 한번 해보고 안되면 다시 쪽지를 드려도 괜찮으실까요?

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

    지

    각 메뉴위치에 다시면됩니다. if이니까요 그 uri이 들어오면 active니 각메뉴별로 다시면됩니다.

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

    답변에 대한 댓글 1개

    �
    배정태
    2년 전
    갤러리 홍보 자유 등등 메뉴에다가 다 같은 코드를 넣으면 된다는 말씀이신가요??

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

    지

    네 hover는 마우스 위치에 대한 부분이라서 상태를 계속 유지하고있지는 않아서 

     

    http://dkagh012.dothome.co.kr/bbs/board.php?bo_table=free

     

    class="" 이런식으로 하면 될것 같습니다.

     

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

    답변에 대한 댓글 1개

    �
    배정태
    2년 전
    죄송하지만 bo_table==free 이런식으로 하면 자유 게시판만 active가 되는게 아닌가요!?!?!

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

    지

    url 이나 쪽지주시면 처리해드리겠습니다. 

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

    답변에 대한 댓글 1개

    �
    배정태
    2년 전
    http://dkagh012.dothome.co.kr/ 주소는 여기 입니다.

    왼쪽 메뉴바에 hover이 되어 있는 상태인데 만약 자유게시판을 클릭 했을 떄에는 자유 게시판 부분만 hover 색깔이 유지되고 나머지는 원래의 css형태로 돌아갔다가 공지사항을 클릭하면 자유게시판 hover은 꺼지고 자유게시판 부분에만 hover이 유지 되었으면 합니다 js로 작업을 할라해도 class가 추가가 안되서 못하고 있는 상태입니다.

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

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

    로그인