홈페이지 소스
[소스] 홈페이지 상단 메뉴#1 (언더라인)
작성자
꿘쓰
작성일/수정일
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
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>
sub_menu_01
sub_menu_01
sub_menu_01
sub_menu_02
sub_menu_02
sub_menu_02
sub_menu_03
sub_menu_03
sub_menu_03
sub_menu_04
sub_menu_04
sub_menu_04
sub_menu_05
sub_menu_05
sub_menu_05
검색영역
영역테스트