홈페이지 상단 메뉴#1 (언더라인)

[소스] 홈페이지 상단 메뉴#1 (언더라인)

2023.03.28

북마크 작성자 정보

작성자

꿘쓰

작성일/수정일

2023-03-28 22:59:50 / 2023-03-28 22:59:50

홈페이지 상단소스
1. 언더라인이 따라다니는 상단메뉴
2. 메뉴 마우스 오버 서브메뉴 활성

http://relation.co.kr/images_board/board_system_publishing/305/index.html

<style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
        * { margin:0; padding:0; border:0; }
        li { list-style:none; }
        body { font-family:'Noto Sans KR'; }
        header { position:fixed; left:0; top:0; z-index:100;  width:100%;  background:#fff;   }
        section { margin-top:80px; width:100%;  /* background:rgba(0, 0, 0, 0.1); */background:#ececec;  padding:80px 0 80px 0; box-sizing:border-box; }
        article { margin:0 auto; width:1170px; height:500px; background:#fff; border:1px solid #ddd; padding:50px; box-sizing:border-box;  }
        header .top_sec { width:100%; height:80px; padding-top:25px; box-sizing:border-box; border-bottom:1px solid #ececec;   }
        header .top_sec .top_art { margin:0 auto; display:flex; flex-direction:row; justify-content:space-between; align-items:baseline; width:1170px; }
        header .top_sec .top_art .top_logo { display:block; width:300px; font-size:20px; font-weight:bold; text-align:center;  }
        header .top_sec .top_art nav { position:relative; width:800px; }
        header .mline { position:absolute; left:0; height:3px; padding:0; background:#000; transition: all 0.5s ease; }
        header .top_sec .top_art nav ul { display:flex; flex-direction:row; justify-content:right; align-items:center; width:100%;  }
        header .top_sec .top_art nav li { display:block; margin:0 20px 0 20px; text-align:center; } 
        header .top_sec .top_art nav li a { text-decoration:none; color:#000; }
        header .top_subMenu_area { display:none; width:100%; height:200px; background:#fff; border-bottom:1px solid #ececec; }
        header .top_subMenu_area .top_subMenu_sec { margin:0 auto; display:flex; flex-direction:row; justify-content:space-between; align-items:baseline; width:1170px; padding:50px; box-sizing:border-box; /* border:1px solid red; */  }
        header .top_subMenu_area .top_subMenu_sec .top_subMenu_ls { width:700px; height:100px; padding-right:50px; border-right:1px solid #ececec; }
        header .top_subMenu_area .top_subMenu_sec .top_subMenu_ls ul { display:none;}
        header .top_subMenu_area .top_subMenu_sec .top_seacrh { display:block; }
    </style>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready( function(){
            $('nav > ul > li').mouseenter( function(){
                //e.preventDefault();
                var this_idx = $(this).index();
                let this_wi = $(this).width();
                let this_hi = $(this).innerHeight();
                let this_le = $(this).offset().left;
                let this_to = $(this).offset().top;
                let this_top = this_to+this_hi*1.5;
                let data_sbidx = $("nav > ul").attr("data-subdex");
                
                $('.top_subMenu_area').slideDown('300');
                    $(".mline").css({
                        "width":this_wi,
                        "left":this_le,
                        "top":this_top,
                        "opacity":"1",
                    });
                    $("nav > ul").attr("data-subdex", this_idx);
                    $(".top_subMenu_ls > ul").css({"display":"none"});
                    $(".top_subMenu_ls > ul:eq("+this_idx+")").css({"display":"block"});
                });

                $('#header_Area').mouseleave( function(){
                    $('.top_subMenu_area').slideUp('300'); 
                    $(".mline").css({
                        "left": "0",
                        "opacity":"0",
                    });
                    $(".top_subMenu_ls > ul").css({"display":"none"});
                });
        });
    </script>
</head>
<body>
    <header id="header_Area">
        <div class="mline"></div>
        <div class="top_sec">
            <div class="top_art">
                <div class="top_logo">COMPANY LOGO</div>
                <nav>
                    <ul data-subdex="1">
                        <li><a href="#" class="main_menu">MENU_01</a></li>
                        <li><a href="#" class="main_menu">MENU_02</a></li>
                        <li><a href="#" class="main_menu">MENU_03</a></li>
                        <li><a href="#" class="main_menu">MENU_04</a></li>
                        <li><a href="#" class="main_menu">MENU_05</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="top_subMenu_area">
            <div class="top_subMenu_sec">
                <div class="top_subMenu_ls">
                    <ul>
                        <li>sub_menu_01</li>
                        <li>sub_menu_01</li>
                        <li>sub_menu_01</li>
                    </ul>
                    <ul>
                        <li>sub_menu_02</li>
                        <li>sub_menu_02</li>
                        <li>sub_menu_02</li>
                    </ul>
                    <ul>
                        <li>sub_menu_03</li>
                        <li>sub_menu_03</li>
                        <li>sub_menu_03</li>
                    </ul>
                    <ul>
                        <li>sub_menu_04</li>
                        <li>sub_menu_04</li>
                        <li>sub_menu_04</li>
                    </ul>
                    <ul>
                        <li>sub_menu_05</li>
                        <li>sub_menu_05</li>
                        <li>sub_menu_05</li>
                    </ul>
                </div>
                <div class="top_search">
                        검색영역
                </div>
            </div>
        </div>
    </header>
    <section>
        <article>
            영역테스트
        </article>
    </section>

COMPANY LOGO