가로메뉴로 표현

가로메뉴로 표현

QA

가로메뉴로 표현

본문


<style>
#hd { z-index:5 !important; }
#topmenu {position:relative; z-index:15; margin:-1px 0 0;height:30px; border-top:0px dotted #dde4e9;border-bottom:0px solid #dde4e9;background:#fff } 
#topmenu .wrap {position:absolute; z-index:15; top:-10px; width:600px; left:10%; margin-left:-20px;} /* 가운데 정렬: width:970px; margin:0 auto; */
#topmenu .wrap ul{ float:left; z-index:10; clear:both; margin-right:10px; zoom:1; } 
#topmenu .wrap ul:after {display:block; visibility:hidden; clear:both; content:""; }
#topmenu .wrap ul li{float:left;list-style:none;margin:0;padding:0;height:2.95em;}
#topmenu .wrap ul li.active { height:30px; color:#fff; background:#6b9c2a; margin:0 5px; border-radius:5px 5px 5px 5px; }
#topmenu .wrap ul li a{ height:30px; line-height:30px; display:block; cursor:pointer; text-decoration:none; padding:0 20px;color:#2d2d2d; font-size:16px;letter-spacing:0px;display:inline-block; font-weight:bold;} /* 1차메뉴 진하게 */
#topmenu .wrap ul li a:hover{color:#ffff00;}
#topmenu .wrap ul li.active a {color:#ffff00;}
.subBox { position:absolute; z-index:15; top:0px; width:100%; min-height:20px; background-color:#fff; border-bottom:0px solid #5a8d14; display:none; }
.subBox:after {display:block;visibility:hidden;clear:both;content:""} 
#topmenu .wrap div.subMenuBox{display:none;position:absolute;left:0;top:25px; height:20px; line-height:20px; margin:0;padding:0; }
#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 14px; font-size:16px; letter-spacing:-1px;color:#5d5d5d;height:30px;line-height:30px;display:inline-block;font-weight:bold;}
#topmenu .wrap div.subMenuBox ul li a:hover{color:#67932b; font-weight:bold; }
#topmenu .wrap div.subMenuBox ul li a.active,#topmenu .wrap div.subMenuBox ul li a:active{color:#466022;}
#topmenu .wrap div.subMenuBox ul li.on a{text-decoration:underline;}
#topmenu .wrap div.subMenuBox a:focus, #mysubmenu li.leftmenu_s a:hover { color:#F7082F;}
</style>
<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>
<script type="text/javascript">
//네비게이션 레이아웃 적용
 $(document).ready(function(){
    $("nav#topmenu a").mouseenter(function() {
            if($("div#subBox").css("display") != "block"){
                $("div#subBox").slideDown();
            }
    });
                $("nav#topmenu").mouseleave(function() {
                    $("div#subBox").hide();
           });
    })
</script>
<nav id="topmenu">
            
    <div id="subBox" class="subBox"></div>
            
    <div class="wrap" id="Mmenu">
        <ul>
<?php
        $tmp_code = substr($me_code,0,2);
        $tmp_menu_name=sql_fetch(" select * from {$g5['menu_table']} where me_use = '1' and length(me_code) = '2' and me_code = '$tmp_code' ");
        ?>
        <?
        $sql2 = " select *
                    from {$g5['menu_table']}
                    where me_use = '1'
                      and length(me_code) = '4'
                      and substring(me_code, 1, 2) = '$tmp_code'
                    order by me_order,me_code, me_id ";
        $result2 = sql_query($sql2);
        for ($k=0; $row2=sql_fetch_array($result2); $k++) {
            if($k == 1)
                echo '<ul class="snb_2dul">'.PHP_EOL;
        ?>
            <li class="ok1">
                <a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="snb_2da <?php if($row2['me_code']==substr($me_code,0,4)) { echo "on"; }?>"><font color=#333 size=4><b><?php echo $row2['me_name'] ?></b></font></a></il>
                <div class="subMenuBox">
        <?php
            //3차메뉴 불러 오기.
            $sql3 = " select *
                        from {$g5['menu_table']}
                        where me_use = '1'
                          and length(me_code) = '6'
                          and substring(me_code, 1, 4) = '{$row2['me_code']}'
                        order by me_order,me_code, me_id ";
            $result3 = sql_query($sql3);
            $num3 = sql_num_rows($result3);
            if($num3>0){
                echo '<ul class="snb_2dul">'.PHP_EOL;
                while($row3=sql_fetch_array($result3)){
        ?>
                    <il >
                        <a href="<?php echo $row3['me_link']; ?>" target="_<?php echo $row3['me_target']; ?>" class="snb_3da <?php if($row3['me_code']==$me_code) { echo "on2"; }?>"><font color=#2B6B08 size=3><b><?php echo $row3['me_name'] ?></b></font></a>
                    </il>
        <?php
                }
                echo '</ul>'.PHP_EOL;
            }
            echo '</ul>'.PHP_EOL;                    
        }
        if($k > 0)
            echo '</ul>'.PHP_EOL;
        ?>
    </div>
                <div class="clear"></div>                
            </li>
</nav>

===================================================

저는 3단 메뉴를 사용 하고자 하는데요.

상단에는 3단메뉴를 만들었고

중간에는 2,3단를 표현 하려 하는데 2차메뉴가 가로로 나와야 하는데 세로로 나오는군요.

고수님 도와 주세요.

이 질문에 댓글 쓰기 :

답변 1

이것을 테스트해 볼려면 모든 것을 다 입력해서 사이트를 만들어야 되는데,  이것을 다 만들어보기는 조금 어렵울 것 같습니다.

 

이 소스가 동작되는 주소 링크라도 주면, 아마도 CSS고수분이 답변을 줄 수도...

답변을 작성하시기 전에 로그인 해주세요.
전체 3

회원로그인

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