[ RESPONSIVE ] 24 전체메뉴 (스크립트)

[ RESPONSIVE ] 24 전체메뉴 (스크립트)

 

 

See the Pen [ RESPONSIVE ] 24 전체메뉴 (스크립트) by larmong (@larmong) on CodePen.

 

 

 

 

GitHub에서 보기 Click!

 

 

 

---

 

 

* 메뉴 접고, 펼치기 + 아이콘 변경 + 반응형일때 펼쳐져 있지 않게 처리

// 전체 메뉴 (접기, 펼치기)
$(".btn").click(function(e){
	e.preventDefault();
	$(".nav").slideToggle();
	$(".btn").toggleClass("open");

	if($(".btn").hasClass("open")) {
		// open이 있을떄
		$(".btn").find("i").attr("class","fa fa-angle-up");
	} else {
      // open이 없을떄
      $(".btn").find("i").attr("class","fa fa-angle-down");
    }
});

// 반응형일때 펼쳐져 있지 않게 스크립트로 none 처리 해줌
$(window).resize(function(){
  var wWidth = $(window).width();
  if(wWidth > 600){
  	$(".nav").removeAttr("style");
  }
});

 

 

 

---

 

 

* 반응형 사이트 강의 보는곳(WEBSTORYBOY) click!