[소스] 반응형 메뉴바 UI 소스1 (반응형)
2023.08.08
북마크 작성자 정보
작성일/수정일
2023-08-08 22:47:33 / 2023-08-08 22:47:33
** 메뉴바 소스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>
