메뉴바 hover에 대한 질문입니다!!

메뉴바 hover에 대한 질문입니다!!

QA

메뉴바 hover에 대한 질문입니다!!

본문


<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
 
if (!defined('_INDEX_')) define('_INDEX_', true);
 
include_once(G5_THEME_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/latest.lib.php');
include_once(G5_LIB_PATH.'/outlogin.lib.php');
include_once(G5_LIB_PATH.'/poll.lib.php');
include_once(G5_LIB_PATH.'/visit.lib.php');
include_once(G5_LIB_PATH.'/connect.lib.php');
include_once(G5_LIB_PATH.'/popular.lib.php');
 
?>
<script>
jQuery(function($) {
    var $bodyEl = $('body'),
        $sidedrawerEl = $('#sidedrawer');
   
    function showSidedrawer() {
        // show overlay
        var options = {
        onclose: function() {
            $sidedrawerEl
            .removeClass('active')
            .appendTo(document.body);
        }
        };
   
        var $overlayEl = $(mui.overlay('on', options));
   
        // show element
        $sidedrawerEl.appendTo($overlayEl);
        setTimeout(function() {
            $sidedrawerEl.addClass('active');
        }, 20);
    }
 
    function hideSidedrawer() {
        $bodyEl.toggleClass('hide-sidedrawer');
    }
 
    $('.js-show-sidedrawer').on('click', showSidedrawer);
    $('.js-hide-sidedrawer').on('click', hideSidedrawer);
 
});
</script>
 
<!-- 상단 시작 { -->
<header id="header">
    <h1 id="hd_h1"><?php echo $g5['title'] ?></h1>
 
    <div class="to_content"><a href="#container">본문 바로가기</a></div>
    <div id="mobile-indicator"></div>
   
    <?php
    if(defined('_INDEX_')) { // index에서만 실행
        include G5_MOBILE_PATH.'/newwin.inc.php'; // 팝업레이어
    } ?>
 
    <div id="hd_wrapper" class="">
        <div class="gnb_side_btn">
            <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>
            <!-- <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> -->
        </div>
       
        <div class="header_ct">
            <div class="hd_sch_wr" id="hd_sch_wr_test">
                <!-- <button class="hd_sch_bt"><i class="fa fa-search"></i><span class="sound_only">검색창 열기</span></button> -->
                <fieldset id="hd_sch">
                    <h2>사이트 내 전체검색</h2>
                    <form name="fsearchbox" action="<?php echo G5_BBS_URL ?>/search.php" onsubmit="return fsearchbox_submit(this);" method="get">
                    <input type="hidden" name="sfl" value="wr_subject||wr_content">
                    <input type="hidden" name="sop" value="and">
                    <input type="text" name="stx" id="sch_stx" placeholder="검색어를 입력해주세요" required maxlength="20">
                    <button type="submit" value="검색" id="sch_submit"><i class="fa fa-search" aria-hidden="true"></i><span class="sound_only">검색</span></button>
                    </form>
                </fieldset>
            </div>
           
 
            <script>
            function fsearchbox_submit(f)
            {
                if (f.stx.value.length < 2) {
                    alert("검색어는 두글자 이상 입력하십시오.");
                    f.stx.select();
                    f.stx.focus();
                    return false;
                }
 
                // 검색에 많은 부하가 걸리는 경우 이 주석을 제거하세요.
                var cnt = 0;
                for (var i=0; i<f.stx.value.length; i++) {
                    if (f.stx.value.charAt(i) == ' ')
                        cnt++;
                }
 
                if (cnt > 1) {
                    alert("빠른 검색을 위하여 검색어에 공백은 한개만 입력할 수 있습니다.");
                    f.stx.select();
                    f.stx.focus();
                    return false;
                }
 
                return true;
            }
           
            $(document).ready(function(){
                $(document).on("click", ".hd_sch_bt", function() {
                    $("#hd_sch").toggle();
                });
                $(".sch_more_close").on("click", function(){
                    $("#hd_sch").hide();
                });
            });
            </script>
        </div>
        <div id="tnb">
                    <?php echo outlogin("theme/basic"); ?>
                </div>
    </div>
   
</header>
<!-- } 상단 끝 -->
       
<aside id="sidedrawer">
       
 
<div id="logo">
 
        <a href ="http://dkagh012.dothome.co.kr" class="logo_a">R O G O</a>
</div>
 
    <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>
                    <?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
            $i++;
            }   //end foreach $row
 
            if ($i == 0) {  ?>
                <li id="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하세요.<?php } ?></li>
            <?php } ?>
            </ul>
        </div>
    </div>
</aside>            
           
<script>
$(function () {
    //폰트 크기 조정 위치 지정
    var font_resize_class = get_cookie("ck_font_resize_add_class");
    if( font_resize_class == 'ts_up' ){
        $("#text_size button").removeClass("select");
        $("#size_def").addClass("select");
    } else if (font_resize_class == 'ts_up2') {
        $("#text_size button").removeClass("select");
        $("#size_up").addClass("select");
    }
 
    $(".hd_opener").on("click", function() {
        var $this = $(this);
        var $hd_layer = $this.next(".hd_div");
 
        if($hd_layer.is(":visible")) {
            $hd_layer.hide();
            $this.find("span").text("열기");
        } else {
            var $hd_layer2 = $(".hd_div:visible");
            $hd_layer2.prev(".hd_opener").find("span").text("열기");
            $hd_layer2.hide();
 
            $hd_layer.show();
            $this.find("span").text("닫기");
        }
    });
 
    $("#container").on("click", function() {
        $(".hd_div").hide();
 
    });
 
    $(".btn_gnb_op").click(function(){
        $(this).toggleClass("btn_gnb_cl").next(".gnb_2dul").slideToggle(300);
       
    });
 
    $(".hd_closer").on("click", function() {
        var idx = $(".hd_closer").index($(this));
        $(".hd_div:visible").hide();
        $(".hd_opener:eq("+idx+")").find("span").text("열기");
    });
   
    $(".gnb_1dli").on(click,function(){
       
        $(".gnb_1dli").addClass('qowjdxo').siblings().removeClass('qowjdxo');
 
    });
 
});
</script>
 
<!-- 컨텐츠 시작 { -->
<div id="content-wrapper">
    <div id="wrapper">
        <!-- container 시작 { -->
        <div id="container">
            <div class="conle">
                <?php if (!defined("_INDEX_") && !(defined("_H2_TITLE_") && _H2_TITLE_ === true)) {?>
                    <h2 id="container_title" class="top" title="<?php echo get_text($g5['title']); ?>"><?php echo get_head_title($g5['title']); ?></h2>
                <?php } ?>

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

이 질문에 댓글 쓰기 :

답변 11

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

페이지 이동을 하게 되면 리프레쉬 되어서 css 나 js 도 초기화 됩니다.

그냥 현 URL 을 채크하여 홈 경로 일때 별도로 css 가 들어가게 하는게 좋습니다.

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

http://dkagh012.dothome.co.kr/ 주소는 여기 입니다.

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

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

 

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

 

class="<?php echo $_GET["bo_table"]=="free" ? "active":"";?>" 이런식으로 하면 될것 같습니다.

 

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

네 

네 

지구버스님 정보 공개가 안되어 있어서 제게 쪽지를 못 드리네용
제가 지구버스님을 code를 넣었는데 css가 들어가지 않아서 어디가 문제인지 파악을 못하고 있습니다!! 한번 더 도와주실수 있으실까요


    <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

지금 현재 제 코드 입니다

thumb-982509662_1670677218.9164_730x259.png

 

active가 아니고 hover되었을때 <li class에 gnb_1dli_on gnb_1dli_over2 이런식으로 들어있네요 a태그가 아니라 hover보시고 <li class에 넣어주십시오 

기존
<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 if($row['me_name']=="자유게시판") {?>
<li class="gnb_1dli <?php echo $_GET["bo_table"]=="free" ? "gnb_1dli_on gnb_1dli_over2":"";?>">
<?php }else if($row['me_name']=="갤러리"){?>
<li class="gnb_1dli <?php echo $_GET["bo_table"]=="gallery" ? "gnb_1dli_on gnb_1dli_over2":"";?>">
<?php }else if($row['me_name']=="공지사항"){?>
<li class="gnb_1dli <?php echo $_GET["bo_table"]=="notice" ? "gnb_1dli_on gnb_1dli_over2":"";?>">
<?php }else if($row['me_name']=="질문답변"){?>
<li class="gnb_1dli <?php echo $_GET["bo_table"]=="qna" ? "gnb_1dli_on gnb_1dli_over2":"";?>">
<?php }else if($row['me_name']=="홈"){?>
<li class="gnb_1dli <?php echo $_GET["bo_table"]=="" ? "gnb_1dli_on gnb_1dli_over2":"";?>"> ==> 홈위치 확인필요
<?php }?>

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

답변을 작성하시기 전에 로그인 해주세요.
전체 123,524 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT