SIR
목록으로

테마 메뉴구조 변경 채택완료

현현
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 조회 976
답변 1
목록

해당코드는 헤더 hover시에 전체 서브메뉴가 나오는 올메뉴 구조인데, 대메뉴 1개 hover시에 그 해당 서브메뉴만 나올수 있는 구조로 변경하고 싶은데 어떻게 손을 봐야할지 모르겠네요 ㅜㅜ 도움 부탁드립니다..css는 제가 수정하려고합니다!

 

head.sub.php

 

Copy 
<section class="header">

            <a href="<?php echo G5_URL ?>" class="logo" title="프랜디어"></a>

            <ul class="menu">

                <?php

                    $menu_datas = get_menu_db(0, true);

                    foreach( $menu_datas as $row ){

                        if( empty($row) ) continue;

                        $add_class = (isset($row['sub']) && $row['sub']) ? 'gnb_al_li_plus' : '';

                ?>

                    <li><h2><?php echo $row['me_name'] ?></h2>

                        <ul class="depth-1">

                            <li class="m-open">

                            <?php

                                foreach( (array) $row['sub'] as $row2 ){

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

                                }

                            ?>

                            </li>        

                        </ul>

                    </li>

                <?php } ?>

            </ul>          

        </section>
 

 

main.js

 

Copy 
function isSitemap() {

    return $('.header').hasClass('stm-hd') ? true : false;

  }

 

  $('.menu').mouseover(function(){

    $('.menu > li').addClass('open');

    var blind_height =  $('.open > ul').height();  

    $('.header').css("height",blind_height + 200 +"px");

  }).mouseleave(function(){

    $('.menu > li').removeClass('open');

    $('.header').css("height","100px");  

  })

 

  /* header */

  $('.menu > li').mouseover(function(){  

    if(!isSitemap()) {

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

    }

  });

  $('.menu > li').mouseleave(function(){

    if (!isSitemap()) {

      $(this).removeClass('on');  

    }

  });

   

  /* header scroll */

  $('.header').mouseover(function(){

    if (!isSitemap()) {

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

    }

  });

  $('.header').mouseleave(function(){

    if(!$(document).scrollTop() > 0){

      $(this).removeClass('on');

    }

  });

 

  $('.con-tab-menu li a').click(function(){

      $('.con-tab').removeClass('active');

      $('.con-tab[data-id="'+$(this).attr('data-id')+'"]').addClass('active');

      $('.con-tab-menu li a').removeClass('active');

      $(this).parent().find('a').addClass('active');

  });
 
#그누보드5

답변 1개

채택된 답변
+20 포인트

다음 코드가 도움이 될지 모르겠습니다.

Copy 
<?php
define('G5_URL', '/');

 

function get_menu_db() {
    $arr = [
        ['me_name' => 'A-1', 'sub' => []],
        ['me_name' => 'A-2', 'sub' => [
            ['me_name' => 'A-2-1', 'me_link' => '/', 'me_target' => 'self'],
            ['me_name' => 'A-2-2', 'me_link' => '/', 'me_target' => 'self'],
            ['me_name' => 'A-2-3', 'me_link' => '/', 'me_target' => 'self'],
        ]],
        ['me_name' => 'A-3', 'sub' => [
            ['me_name' => 'A-3-1', 'me_link' => '/', 'me_target' => 'self'],
            ['me_name' => 'A-3-2', 'me_link' => '/', 'me_target' => 'self'],
        ]],
        ['me_name' => 'A-4', 'sub' => []],
    ];

    return $arr;
}
?>

 

<style>
.header ul {
    list-style-type: none;
    padding: 0;
}

 

.header ul.menu {
    background-color: #eee;
    display: flex;
}
.header ul.menu > li {
    flex-grow: 1;
    position: relative;
}
.header ul.menu h2 {
    margin: 0;
    height: 3em;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.header ul[class|="depth"] {
    display: none;
    background-color: #ddd;
    position: absolute;
    width: 100%;
}
.header ul[class|="depth"] a {
    display: block;
    padding: 0.5em;
}

 

/* each submenu */
.header ul.menu > li:hover ul[class|="depth"] {
    display: block;
}


/* all submenu */
/*
.header:hover ul[class|="depth"] {
    display: block;
}
*/
</style>

 

<section class="header">
            <a href="<?php echo G5_URL ?>" class="logo" title="프랜디어"></a>
            <ul class="menu">
                <?php
                    $menu_datas = get_menu_db(0, true);
                    foreach( $menu_datas as $row ){
                        if( empty($row) ) continue;
                        $add_class = (isset($row['sub']) && $row['sub']) ? 'gnb_al_li_plus' : '';
                ?>
                    <li><h2><?php echo $row['me_name'] ?></h2>
                        <ul class="depth-1">
                            <!-- <li class="m-open"> -->
                            <?php
                                foreach( (array) $row['sub'] as $row2 ){
                                    echo '<li class="m-open">';
                                    echo '<a href="'.$row2['me_link'].'" target="_'.$row2['me_target'].'">'.$row2['me_name'].'</a>';
                                    echo '</li>';
                                }
                            ?>
                            <!-- </li>         -->
                        </ul>
                    </li>
                <?php } ?>
            </ul>          
        </section>
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

답변 감사드립니다!

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

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

로그인
🐛 버그신고