fixed header + gnb (header에 hover시 gnb 열리면서 on효과, 스크롤시 on효과)

See the Pen 풀사이즈 header + gnb by publisher.kim (@publisherkim) on CodePen.

 

 

 

html

<header id="header">
  <div class="gnb_bg"></div>
  <h1 class="logo"><a href="#"></a></h1>
  <nav id="gnb">
    <ul class="depth1">
      <li>
        <a href="#">대메뉴1</a>
        <ul class="depth2" >
          <li><a href="#">서브1</a></li>
          <li><a href="#">서브2</a></li>
          <li><a href="#">서브3</a></li>
          <li><a href="#">서브4</a></li>
        </ul>
      </li>
      <li>
        <a href="#">대메뉴2</a>
        <ul class="depth2" >
          <li><a href="#">서브1</a></li>
          <li><a href="#">서브2</a></li>
          <li><a href="#">서브3</a></li>
          <li><a href="#">서브4</a></li>
        </ul>
      </li>
      <li>
        <a href="#">대메뉴3</a>
        <ul class="depth2" >
          <li><a href="#">서브1</a></li>
          <li><a href="#">서브2</a></li>
          <li><a href="#">서브3</a></li>
          <li><a href="#">서브4</a></li>
        </ul>
      </li>
      <li>
        <a href="#">대메뉴4</a>
        <ul class="depth2" >
          <li><a href="#">서브1</a></li>
          <li><a href="#">서브2</a></li>
          <li><a href="#">서브3</a></li>
          <li><a href="#">서브4</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <a href="#" class="btn_gnb"></a>
</header>

 

css

/* header */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
* {font-family: 'pretendard';}
body{background: url(https://umings.github.io/images/bg_dark.jpg) no-repeat center / cover;}

#header{border-bottom: 1px solid rgba(255,255,255,0.4);transition: all 0.2s; position: fixed; height: 100px;  width: 100%;  top: 0; left: 0; z-index: 9990;}
#header.on, #header.scroll{background:#fff; border-bottom:1px solid #ddd !important;}

#header .logo{float: left; margin-top: 20px; margin-left: 30px; position: relative; z-index: 999;;}
#header h1 a{display:block; width:130px; height:60px; background:url(https://umings.github.io/images/logo_img_white.png) no-repeat center / 130px;}
#header.on h1 a, #header.scroll h1 a{background:url(https://umings.github.io/images/logo_img.png) no-repeat center / 130px;}

.gnb_bg {position:absolute; left:0; top:100px; width:100%; height:0; z-index:10; background:#fff; }
.gnb_bg.on{border-bottom:1px solid #cccccc;}

#gnb{position: absolute; text-align: center; width:100%; z-index:99; left: 0; top: 0px;}
#gnb .depth1{position:relative;}
#gnb .depth1>li{ margin:0;position: relative; display:inline-block; vertical-align:top; width:160px;} 
#gnb .depth1>li>a{display: block; font-size: 18px; line-height: 100px; position:relative; font-weight:bold; color: #fff;}
#gnb .depth1>li>a:hover{font-weight: bold;}
#gnb .depth1>li.on>a{color:#1a70df;}
#gnb .depth1>li.on>a::after{content:''; display:block; width:100%; height:3px; background:#0084e5; position:absolute; bottom:0; left:0;}
#gnb .depth1>li.on .depth2{background:#fafafa;}
#header.on #gnb .depth1>li>a, #header.scroll #gnb .depth1>li>a{color: #000;}
#gnb .depth2 {position:relative; z-index:9999; height:0px; overflow:hidden;}
#gnb .depth2 li:nth-of-type(1){margin-top:15px;}
#gnb .depth2 li a {display:block; width:100%; height:100%; font-size:15px; color:#000000 !important; line-height:40px; font-weight:normal;}
#gnb .depth2 li a:hover{color:#0084e5 !important; font-weight:bold;}

.btn_gnb{display:block; width:100px; height:100px; background:url(https://umings.github.io/images/btn_gnb_open.png) no-repeat center; position:absolute; right:0; top:0; z-index:9999;}
.btn_gnb.on{background:url(https://umings.github.io/images/btn_gnb_close.png) no-repeat center;}

 

js  *jquery필요

$(document).ready(function(){
  // gnb show, hide
  function gnbshow(){
    $("#header").addClass("on")
    $(".gnb_bg").stop().animate({"height":"230px"},300);
    $(".gnb_bg").addClass("on")
    $(".depth2").stop().animate({"height":"230px"},300);
  }
  function gnbhide(){
    $(".gnb_bg").stop().animate({"height":"0px"},300);
    $(".depth2").stop().animate({"height":"0px"},300,function(){
      $("#header").removeClass("on")
    });
    $(".gnb_bg").removeClass("on")
  }
  $("#gnb, .logo").mouseover(function(){gnbshow();})
  $("#gnb").mouseleave(function(){gnbhide();})

  // depth1>li hover
  $("#gnb .depth1>li").mouseover(function(){
    $("#gnb .depth1>li").removeClass("on")
    $(this).addClass("on")
  })
  $("#gnb .depth1>li").mouseleave(function(){
    $("#gnb .depth1>li").removeClass("on")
  })


// btn_gnb click
$(".btn_gnb").click(function(){	
  if($(this).hasClass("on")){
    $(this).removeClass("on")
    gnbhide();
    $("#gnb, .logo").mouseover(function(){gnbshow();})
    $("#gnb").mouseleave(function(){gnbhide();})	
  } else {
    $(this).addClass("on")
    gnbshow();
    $("#gnb").unbind();
  }
  return false;
})
  
  // scroll시 header에 scroll 클래스 추가, 맨 상단으로 가면 다시 삭제
  $(window).scroll(function(){
    var wintop = $(window).scrollTop();
    if(wintop > 100){
      $("#header").addClass("scroll")
    }else{
      $("#header").removeClass("scroll")
    }
  })
})