본문 바로가기
퍼블리셔일기

반응형 헤더/메뉴 만들기 responsible header nav menu css html

by 지짱히메 2021. 2. 3.
반응형

1개의 마크업으로 만드는 방법

 

head

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-animate-css-rotate-scale.js"></script>

html (만약 헤더 1뎁스가 아니라 2뎁스인경우 depth01 li 안에 depth02 ul을추가해주시면됩니다)

<div id="A_Header">

<p class="logo"><a href="index.html"><img src="logo.png" alt=""></a></p>
<ul class="menubar">
<li></li>
<li></li>
<li></li>
</ul>
<div class="gnbWrap">
<div class="gnb_logo">
<a href="index.html"><img src="logo_black.png" alt="brainadcom"></a>
</div>
<ul class="depth01">
<li><a href="#">about iaa</a>
</li>
<li><a href="#">archive</a>
<li><a href="#">oral history</a>
</li>
<li><a href="#">collection</a>
</li>
<li><a href="#">ifac</a>
</li>
</ul>
</div>


</div>

css(만약 헤더 1뎁스가 아니라 2뎁스인경우 주석 풀면 됩니다)

반응형 사이즈는 알아서 조절하면 됩니다.

/* header */
#A_Header {position: fixed; top: 0; left: 0; right: 0; box-sizing: border-box; width: 100%; height: 100px; z-index: 80; transition: all 0.4s;}
.logo {position: absolute; top: 50%;transform: translateY(-55%);left: 75px; width: 222px;}
.logo a{display: block;width: 100%; height: 100%;}
.logo a img{width: 222px;}
/* .util {position: absolute; top: 0; right: 60px;}
.util li {float: left;}
.util li a {display: block; height: 79px; line-height: 79px; padding: 0 15px 0 20px; font-size: 0.875rem; color: #000; text-align: center;}
.util li:last-child a {position: relative; padding: 0 0 0 20px;}
.util li:last-child a:before {position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 4px; height: 4px; background-color: #000; border-radius: 50%; content: '';} */
.menubar {display: none; position: fixed; top: 22px; right: 30px; width: 24px; height: 19px; cursor: pointer; z-index: 90;}
.menubar li {position: absolute; width: 100%; height: 2px; background-color: #fff;}
.menubar li:nth-child(1) {top: 0;}
.menubar li:nth-child(2) {top: 8px;}
.menubar li:nth-child(3) {top: 16px;}
.menubar.black li {background-color: #333;}
.gnbWrap {display: block; position: absolute;right: 75px;}
.gnbWrap .gnb_logo {display: none;}
.gnbWrap .gnb:after {display: block; clear: both; *zoom: 1; content: '';}
.gnbWrap .gnb > li {position: relative; float: left; padding: 0 25px; text-align: center;}
.gnbWrap .gnb > li:before {position: absolute; top: 32.5px; left: 0; width: 1px; height: 14px; background-color: #ddd; content: '';}
.gnbWrap .gnb > li:first-child::before {display: none;}
.gnbWrap .gnb .depth1 {display: block; line-height: 79px; font-size: 1.125rem; font-weight: 500; color: #444; cursor: pointer;}
.gnbWrap .gnb .depth1 a{display: block;}
/* .gnbWrap .gnb .lnb {display: none; position: absolute; top: 78px; left: 50%; transform: translateX(-50%); box-sizing: border-box; width: 170px; padding: 20px 10px 20px 20px; text-align: left; background-color: #fff;
	border-top: 2px solid #01a1ff; box-shadow: 5px 15px 30px rgba(0,0,0,0.3);}
.gnbWrap .gnb .lnb a {display: block; line-height: 3.75; font-size: 1rem; color: #333; transition: all 0.4s;}
.gnbWrap .gnb .lnb a:hover {color: #48b6f4;} */

.gnbWrap .depth01:after {display: block; clear: both; *zoom: 1; content: '';}
.gnbWrap .depth01 > li {position: relative; float: left; padding: 0 35px; text-align: center;}
.gnbWrap .depth01 li a {display: block; padding: 40px 0;font-size:16px; font-weight: 400; color: #fff; cursor: pointer; font-family: 'Montserrat', sans-serif;text-transform: uppercase;}
.gnbWrap .depth01 li a.black{color: #333; }
/* .gnbWrap .depth01 .depth02 {display: none; position: absolute; top: 78px; left: 50%; transform: translateX(-50%); box-sizing: border-box; width: 170px; padding: 20px 10px 20px 20px; text-align: left; background-color: #fff;
	border-top: 2px solid #01a1ff; box-shadow: 5px 15px 30px rgba(0,0,0,0.3);}
.gnbWrap .depth01 .depth02 a {display: block; line-height: 3.75; font-size: 1rem; color: #333; transition: all 0.4s;}
.gnbWrap .depth01 .depth02 a:hover {color: #48b6f4;} */

/*헤더스크롤*/
#A_Header.header_scroll {background: #fff;border-bottom: 1px solid #eee;}
@media screen and (min-width: 320x) and (max-width: 1023px) {
#A_Header{height: 80px;}
  .inner {
    box-sizing: border-box;
    width: 100%;
  }
  .logo {width: 150px;left: 25px;}
  .logo a img{width: 150px;}
	/* .util {right: 90px;} */
	.menubar {display: block; top: 30.5px; right: 30px;}
	.gnbWrap {display: none; overflow-y: scroll; position: fixed; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 81;}
	.gnbWrap .gnb_logo {display: block; box-sizing: border-box; width: 80%; padding: 20px; margin: 0 0 0 auto; border-bottom: 1px solid #ddd; background-color: #fff;height: 80px;}
  .gnbWrap .gnb_logo img{width: 150px;    transform: translateY(-2px);}
  .gnbWrap .depth01 {width: 80%; height: 100%; margin: 0 0 0 auto; background-color: #fff;}
	.gnbWrap .depth01 > li {float: none; width: 100%; padding: 0; text-align: left; border-bottom: 1px solid #ddd;}
	.gnbWrap .depth01 > li:before {display: none;}
	.gnbWrap .depth01 li a {line-height: 59px; padding: 0 0 0 30px;}
	/* .gnbWrap .depth01 .depth02 {position: static; top: auto; transform: none; width: 100%; padding: 30px; box-shadow: none;}
	.gnbWrap .depth01 .depth02 a {line-height: 3;} */
}

js (만약 헤더 1뎁스가 아니라 2뎁스인경우 주석 풀면 됩니다)

$(document).on('ready', function() {
  // 스크롤 시 헤더
  window.onscroll = function() {
    if ($(document).scrollTop() > 1) {
      $("#A_Header").addClass("header_scroll");
      $('#A_Header .logo a img').attr('src', 'images/common/logo_black.png');
      $('.menubar').addClass('black');
      $('.gnbWrap .depth01 li a').addClass('black');
      // $("#visual").addClass("scroll");
      $("#A_Header").mouseleave(function() {
        $(this).addClass('header_scroll');
        $('#A_Header .logo a img').attr('src', 'images/common/logo_black.png');
        $('.menubar').addClass('black');
        $('.gnbWrap .depth01 li a').addClass('black');
      });
    } else {
      $("#A_Header").removeClass("header_scroll");
      $('#A_Header .logo a img').attr('src', 'images/common/logo.png');
      $('.menubar').removeClass('black');
      $('.gnbWrap .depth01 li a').removeClass('black');
      // $("#visual").removeClass("scroll");
      $("#A_Header").mouseleave(function() {
        $(this).removeClass('header_scroll');
        $('#A_Header .logo a img').attr('src', 'images/common/logo.png');
        $('.menubar').removeClass('black');
        $('.gnbWrap .depth01 li a').removeClass('black');
        // $('.lnb').stop().slideUp(200);
      });
    }
  }


  // // PC 서브 메뉴
  // $(".gnb").mouseover(function() {
  //   $(".lnb_wrap").stop().slideDown(400);
  // });
  // $(".lnb_wrap").mouseleave(function() {
  //   $(this).stop().slideUp(400);
  //   $('.gnb > li').removeClass('active');
  // });
  //
  // $('.lnb > li').mouseover(function() {
  //   var activeLnb = $(this).attr('class');
  //   var lnbNum = activeLnb.substring(3, 5);
  //   $('.gnb > li').removeClass('active');
  //   $('.gnb' + lnbNum).addClass('active');
  // });




  var posY;

  function bodyFreezeScroll() {
    posY = $(window).scrollTop();
    $("html").addClass('fix');
    $("html").css("top", -posY);
  }

  function bodyUnfreezeScroll() {
    $("html").removeAttr('class');
    $("html").removeAttr('style');
    posY = $(window).scrollTop(posY);
  }


  // menu open
  menu_bt = 0;
  $('.menubar').click(function() {
    if (menu_bt == 0) {
      $('.menubar li:eq(0)').animate({
        'rotate': '45deg',
        'top': '8px'
      }, 300)
      $('.menubar li:eq(1)').fadeOut();
      $('.menubar li:eq(2)').animate({
        'rotate': '-45deg',
        'top': '8px'
      }, 300)
      $('.gnbWrap').fadeIn();
      $("body").css('overflow', 'hidden').css('display', 'fixed');
      $('.menubar').addClass('black');
      $('.gnbWrap .depth01 li a').addClass('black');
      bodyFreezeScroll();

      menu_bt = 1;
    } else if (menu_bt == 1) {
      $('.menubar li:eq(0)').animate({
        'rotate': '0',
        'top': '0'
      }, 300)
      $('.menubar li:eq(1)').fadeIn();
      $('.menubar li:eq(2)').animate({
        'rotate': '0',
        'top': '16px'
      }, 300)
      $('.gnbWrap').fadeOut();
      $('.gnbWrap').removeAttr('style');
      $("body").css('overflow', 'auto');
      $('.menubar').removeClass('black');
      $('.gnbWrap .depth01 li a').removeClass('black');
      bodyUnfreezeScroll();

      menu_bt = 0;
    }

  });

  $(window).resize(function() {
    if (matchMedia("screen and (min-width: 1024px)").matches) {
       $('.gnbWrap').fadeIn();
     } else {
       $('.gnbWrap').fadeOut();
     }
  }).trigger("resize");



  // 창크기에 따른 메뉴오픈
  // if ($(window).innerWidth() <= 1200) {
  //   $(".gnbWrap .depth01 > li > a").attr('href', '#');
  //   $(".gnbWrap .depth01 > li").click(function() {
  //
  //     if ($(this).hasClass('on')) {
  //       $(this).children(".depth02").slideUp(400);
  //       $(".gnbWrap .depth01 > li").removeClass("on");
  //     } else {
  //
  //       $(".gnbWrap .depth01 > li .depth02").slideUp(400);
  //       $(this).children(".depth02").slideDown(400);
  //       $(".gnbWrap .depth01 > li").removeClass("on");
  //       $(this).addClass("on");
  //     }
  //   });
  //
  // } else {
  //   $(".gnbWrap .depth01 > li").mouseover(function() {
  //     $(this).children(".depth02").slideDown(400);
  //   });
  //   $(".gnbWrap .depth01 > li, .depth02").mouseleave(function() {
  //     $(this).children(".depth02").slideUp(400);
  //   });
  // }
  //



});
반응형

'퍼블리셔일기' 카테고리의 다른 글

이미지 첨부 미리보기 파일이미지 만들기 html,css, js  (0) 2021.03.04
css로만 텍스트 애니메이션 부드럽게 주기 슬라이드와함께 효과 (팁)  (0) 2021.02.03
들어가자마자, 페이지 로딩시 레이어팝업창 띄우기 css로만 only css  (1) 2021.02.02
css 말줄임 처리  (0) 2021.01.29
클릭시 (누르면)레이어팝업 or 박스 나오게 하기  (0) 2021.01.26

관련글

티스토리툴바