** 메뉴바 소스1
- 반응형 상단메뉴(탑메뉴)
- 반응형에 따른 이미지 축소 확대 
- 230808 소스수정

https://www.relation.co.kr/images_board/board_system_publishing/217/index.php
 

<script>
        $(document).ready(function(){
            $('#wrapper').fadeIn(1000);
            let artleX = "";
            let artleWd = "";
            $('.pc_gnb > ul > li').each( function(index){
                $(this).mouseenter( function(){
                    $('ul', this).slideDown(150);
                    artleX = $(this).position().left; /*artleX =  $(this).offset().left;*/
                    artleWd  = $(this).outerWidth();  /*console.log("artleX__"+artleX); console.log("artleWd__"+artleWd);*/
                    $(".pcMu_line").stop().animate({  /*stop() 에니메이션 큐 현상방지 */
                        left:artleX,
                        width:artleWd,
                        opacity:1  
                    },300);
                }); 
              
                $(this).mouseleave( function(){
                    $('ul', this).slideUp(150);
                    $(".pcMu_line").stop().animate({
                          left:"-500px",
                          width:"10px",
                          opacity:0  
                      },300);
                });
            });
          
            $(".btn_menu").click( function(){
                if( $(".mb_gnb").css("display") == "none"){
                    $(".mb_gnb").slideDown(150);
                    
                    $(".btn_menu > .btn_mo > span:nth-child(1)").animate({
                    rotate:"45deg",
                    top:"50%"
                    },300);
                    $(".btn_menu > .btn_mo > span:nth-child(2)").animate({
                        opacity:0,
                        left:30
                    },300);
                    $(".btn_menu > .btn_mo > span:nth-child(3)").animate({
                        rotate:"-45deg",
                        top:"50%"
                    },300);
                }else{
                    $(".mb_gnb").slideUp(150);
                    $(".btn_menu > .btn_mo > span:nth-child(1)").animate({
                        rotate:"0deg",
                        top:"30%"
                    },300); 
                    $(".btn_menu > .btn_mo > span:nth-child(2)").animate({
                      opacity:1,
                      left:'20%'
                    },300);
                    $(".btn_menu > .btn_mo > span:nth-child(3)").animate({
                        rotate:"0deg",
                        top:"70%"
                    },300);
                }
            });
          
            $(".mb_gnb > ul > li.has_sub").click(function(e){
                e.preventDefault();
                $('ul', this).slideToggle();
            });
        });
    </script>

HTML

<div id="wrapper">
        <header>
            <div class="top_logo">
                <h1>
                    <a href="https://www.relation.co.kr/images_board/board_system_publishing/217/index.php">COMPANY LOGO</a>
                </h1>
            </div>	
            <div class="btn_menu">
                <div class="btn_mo">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <!--PC Menu -->
            <nav id="gnb_p" class="pc_gnb">
                <div class="pcMu_line"></div>
                <ul>
                    <li><a href="http://www.relation.co.kr" class="menu">PROFILE</a></li>
                    <li>
                        <a href="#" class="menu">ACTIVITY</a>
                        <ul>
                            <li><a href="#">DISCOGRAPHY</a></li>
                            <li><a href="#">FILMOGRAPHY</a></li>  
                        </ul>
                    </li>
                    <li class="has_sub"><a href="#" class="menu">SCHEDULE</a></li>
                    <li class="has_sub">
                        <a href="#" class="menu">MULTMEDIA</a>
                        <ul>
                            <li><a href="#">GALLERY</a></li>
                            <li><a href="#">VIDEO</a></li>
                        </ul>
                    </li>
                    <li class="has_sub"><a href="#" class="menu">SHOP</a></li>
                </ul>
            </nav>
            <!-- //PC Menu --> 
            <!-- Mo Menu -->
            <nav id="gnb_m" class="mb_gnb">
                <div class="login">
                    <a href='#' >LOGIN</a> <span>I</span> <a href='join.php'>JOIN</a>                </div>
                <ul>   
                    <li><a href="http://www.relation.co.kr">PROFILE</a></li>
                    <li class="has_sub">
                        <a href="#">ACTIVITY</a>
                        <ul>
                            <li><a href="#">ACTIVITY</a></li>
                            <li><a href="#">DISCOGRAPHY</a></li>  
                        </ul>
                    </li>
                    <li><a href="#">SCHEDULE</a></li>
                    <li class="has_sub">
                        <a href="#">MULTMEDIA</a>
                        <ul>
                            <li><a href="#">GALLERY</a></li>
                            <li><a href="#">VIDEO</a></li>
                        </ul>      
                    </li>
                    <li class="has_sub">
                        <a href="#">SHOP</a>
                        <ul>
                            <li><a href="#">SHOP</a></li>
                        </ul>     
                    </li>
                </ul>
            </nav>
            <!-- //Mo Menu -->
             
        </header>
        <section>
            <div class="main_area">
                <div class="main_bg"></div>
             </div>
        </section>  
        <FOOTER>
            <div class="copyright">Copyright 2023 RELATION.CO.KR ALL RIGHTS RESERVED.</DIV>
        </FOOTER>
    </div>