북마크 작성자 정보
작성일/수정일
2023-01-17 14:20:30 / 2023-01-17 14:20:30
* 메뉴바 navi
- https://relation.co.kr/images_board/board_system_publishing/254/index.html
CSS
<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'; }
body.off { overflow:hidden; }
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 { width:800px; }
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 { width:calc( 100%/5); text-align:center; }
header .top_sec .top_art nav li a { text-decoration:none; }
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 .topSub { display:none; }
header .top_subMenu_area .top_subMenu_sec .top_seacrh { display:block; }
.bg_diemmed { display:none; position:fixed; left:0; top:0; z-index:99; background:rgba(0, 0, 0, 0.3); width:100vw; height:100vh; }
</style>
Javascript
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready( function(){
$('.main_menu').mouseenter( function(e){
e.preventDefault();
let subLs_now = $('.top_subMenu_ls').attr('data-subMenuNow');
let subLs_set = $(this).attr('data-subMenuSet');
//console.log('subLs_now:'+ subLs_now+'/n subLs_set:'+subLs_set);
if( subLs_now != subLs_set ){
$('.topSub').hide();
$('.top_subMenu_ls'+subLs_set).show();
$('.top_subMenu_ls').attr('data-subMenuNow', subLs_set);
$('.top_subMenu_area').slideDown('300');
$('body').addClass('off');
$('.bg_diemmed').show();
}
});
$('#header_Area').mouseleave( function(){
$('.top_subMenu_area').slideUp('300');
$('.top_subMenu_ls').attr('data-subMenuNow', '');
$('.topSub').hide();
$('body').removeClass('off');
$('.bg_diemmed').hide();
});
});
function console_text(txt){
console.log("test :"+ txt );
}
</script>
html
<body>
<header id="header_Area">
<div class="top_sec">
<div class="top_art">
<div class="top_logo">COMPANY LOGO</div>
<nav>
<ul>
<li><a href="#" class="main_menu" data-subMenuSet="1">MENU_01</a></li>
<li><a href="#" class="main_menu" data-subMenuSet="2">MENU_02</a></li>
<li><a href="#" class="main_menu" data-subMenuSet="3">MENU_03</a></li>
<li><a href="#" class="main_menu" data-subMenuSet="4">MENU_04</a></li>
<li><a href="#" class="main_menu" data-subMenuSet="5">MENU_05</a></li>
</ul>
</nav>
</div>
</div>
<div class="top_subMenu_area">
<div class="top_subMenu_sec">
<div class="top_subMenu_ls" data-subMenuNow="">
<ul class="topSub top_subMenu_ls1">
<li>sub_menu_01</li>
<li>sub_menu_01</li>
<li>sub_menu_01</li>
</ul>
<ul class="topSub top_subMenu_ls2">
<li>sub_menu_02</li>
<li>sub_menu_02</li>
<li>sub_menu_02</li>
</ul>
<ul class="topSub top_subMenu_ls3">
<li>sub_menu_03</li>
<li>sub_menu_03</li>
<li>sub_menu_03</li>
</ul>
<ul class="topSub top_subMenu_ls4">
<li>sub_menu_04</li>
<li>sub_menu_04</li>
<li>sub_menu_04</li>
</ul>
<ul class="topSub top_subMenu_ls5">
<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>
<article>
영역테스트
</article>
<article>
영역테스트
</article>
</section>
<div class="bg_diemmed"></div>
</body>
