안녕하세요 2단메뉴 질문드립니다.

안녕하세요 2단메뉴 질문드립니다.

QA

안녕하세요 2단메뉴 질문드립니다.

답변 2

본문

http://sir.kr/g5_skin/1311  이메뉴를 사용하고 있는데  마우스를 내리면 다시 사라지는데 

 

이거 마우스를 내려도 마지막에 오버 곳이 그냥 나와 있게 하려면 어딜 수정해야 하는지 궁금합니다.

 

~~~~~~

 

---------------------------------------  CSS ---------------------------------------

 

#topmenu {height:73px;background:url(./bg_topmenu.jpg) repeat-x 0 0; text-align:center;}  /* width:970px; margin:0 auto; ==> 메뉴폭을 970으로 사용시  */

#topmenu .wrap {position:relative;height:73px;overflow:hidden; width:970px; margin:0 auto;} /* 가운데 정렬: width:970px; margin:0 auto; */

#topmenu .wrap ul{position:relative;list-style:none;margin:0;padding:0;} 

#topmenu .wrap ul:after{content:""; display:block; float:none; clear:both;}

#topmenu .wrap ul li{float:left;list-style:none;margin:0;padding:0;height:43px;}

#topmenu .wrap ul li.active{color:#000;background:#ffff00;border-radius:3px 3px 3px 3px;}

#topmenu .wrap ul li a{height:37px; display:block;cursor:pointer;text-decoration:none;padding:0 25px 5px 20px;color:#ffffff;font:normal 14px nanumgothic, dotum;letter-spacing:0px;display:inline-block;line-height:43px; font-weight:bold;} /* 1차메뉴 진하게 */

#topmenu .wrap ul li a:hover{color:#000;}

#topmenu .wrap ul li.active a {color:#000;} 

 

#topmenu .wrap div.subMenuBox{display:none;position:absolute;left:0;top:43px; height:30px;margin:0;padding:0;filter:alpha(opacity=70);opacity:0.7;background:#000000;border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;}

#topmenu .wrap div.subMenuBox ul,#topmenu .wrap div.subMenuBox ul li{margin:0;padding:0;background:none}

#topmenu .wrap div.subMenuBox ul li {height:30px;}

#topmenu .wrap div.subMenuBox ul li a{margin:0;padding:0 12px;font:normal 11px dotum, dotum;letter-spacing:-1px;color:#e2ebe2;height:30px;line-height:32px;display:inline-block}

#topmenu .wrap div.subMenuBox ul li a:hover{color:#ffea00;}

#topmenu .wrap div.subMenuBox ul li a.active,#topmenu .wrap div.subMenuBox ul li a:active{color:#7afc00;}

#topmenu .wrap div.subMenuBox ul li.on a{text-decoration:underline;}

 

 

------------------------------------ menu.php ---------------------------------------

 

<link rel="stylesheet" href="<?php echo G5_URL?>/skin/menu/main1/style.css" type="text/css" />

 

<nav id="topmenu">

<div class="wrap" id="Mmenu">

<ul>

        <?php

        $sql = " select *

                    from {$g5['menu_table']}

                    where me_use = '1'

                      and length(me_code) = '2'

                    order by me_order, me_id ";

        $result = sql_query($sql, false);

        $gnb_zindex = 999; // gnb_1dli z-index 값 설정용

 

//echo "<li><a href='/'>HOME</a></li>";

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

        ?>

 

<li class="ok1" <?php if($row['me_name']==$group['gr_subject']){echo "style='background:#780e05'";}?>>

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

 

<div class="subMenuBox">

               <?php

           $sql2 = " select *

                   from {$g5['menu_table']}

               where me_use = '1'

             and length(me_code) = '4'

         and substring(me_code, 1, 2) = '{$row['me_code']}'

   order by me_order, me_id ";

               $result2 = sql_query($sql2);

 

           for ($k=0; $row2=sql_fetch_array($result2); $k++) {

       if($k == 0)

               echo '<ul>'.PHP_EOL;

?>

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

               <?php

           }

 

       if($k > 0)

       echo '</ul>'.PHP_EOL;

?>

</div>

   <div class="clear"></div>

</li>

            <?php

            }

 

            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>

</nav>

 

 

--------------------------------------- 스크립트 ------------------------------------

 

<script type="text/javascript">

jQuery(function($){

$.fn.Mmenu = function(options) {

var opts = $.extend(options);

var Mmenu = $(this);

var MmenuList = Mmenu.find('>ul>li');

var subMenuBox = Mmenu.find('.subMenuBox');

var subMenuBoxList = subMenuBox.find('>ul>li');

var menuwidth = $(this).width();

 

function showMenu() {

t = $(this).parent('li');

subwidth = t.find('.subMenuBox').width();

 

if (!t.hasClass('active')) {

MmenuList.removeClass('active');

t.addClass('active');

subMenuBox.hide();

if (t.position().left + t.find('.subMenuBox').width() > menuwidth) {

t.find('.subMenuBox').show().css({left:subwidth}).animate({left: (menuwidth - subwidth)-10}, 400);

} else {

t.find('.subMenuBox').show().css({left:subwidth}).animate( { left: t.position().left}, 400 );

}

}

}

 

function hideMenu() {

MmenuList.removeClass('active');

subMenuBox.hide();

activeMenu();

}

 

function activeMenu() {

if(opts.ok1) {

t = MmenuList.eq(opts.ok1-1); 

subwidth = t.find('.subMenuBox').width();

t.addClass('active');

if (t.position().left + t.find('.subMenuBox').width() > menuwidth) {

t.find('.subMenuBox').show().css({left:subwidth}).animate({left: (menuwidth - subwidth)-10}, 400);

} else {

t.find('.subMenuBox').show().css({left:subwidth}).animate( { left: t.position().left}, 400 );

}

}

}

 

return this.each(function() {

activeMenu();

MmenuList.find('>a').mouseover(showMenu).focus(showMenu);

Mmenu.mouseleave(hideMenu);

});

}

});

</script>

 

<script type="text/javascript"> 

$(document).ready(function(){

$('#topmenu .wrap').Mmenu({ ok1: 0 });

});

 

 

$('div.menubg a').click(function(){

var bgBgCol = jQuery(this).attr('href');

var menuHeight = jQuery(this).attr('mheight');

$('div.menubg a').removeClass('current');

$(this).addClass('current');

$('#topmenu,,.wrap,#topmenu a.active,#mainmenu li.ok1').height(menuHeight);

 

$('#topmenu .wrap').height(menuHeight + 30);

$('#topmenu .wrap div.subMenuBox').css({top:menuHeight+'px'}).height(30);

$('#menubgVal').val(bgBgCol);

$('#topmenuHeight').val(menuHeight);

return false;

});

</script>

 

이 질문에 댓글 쓰기 :

답변 2

답변을 작성하시기 전에 로그인 해주세요.
전체 3
© SIRSOFT
현재 페이지 제일 처음으로