11주차_webPublisher

210322

 

See the Pen 210322 by seung-gu shin (@nine_floor) on CodePen.

toggle / hover 로 동작하는 css 변환

 

 

---

210323

 

See the Pen 210323 by seung-gu shin (@nine_floor) on CodePen.

세로형 2단 메뉴와 사이드 팝업 (jQuery-ui 이용한 animate 속성값 활용)

서브메뉴가 메인메뉴 바깥에 따로 제작되는 경우

• .main>li와 ul.sub의 갯수가 같으므로 기본적으로는 $(this).index()를 활용해 eq값으로 호출
  → 이 상태에서는 .sub에 hover 시 사라지는 현상 발생

$('.main>li').hover(
    function(){
      menuIdx=$(this).index();
      $('.sub_bg').stop().animate({left:200},500,"easeOutQuint");
      $('.sub').eq(menuIdx).stop().animate({width:"toggle"},200,"swing");
    },
    function(){
      $('.sub_bg').stop().animate({left:0},500,"easeOutQuint");
      $('.sub').hide();
    }
  )

1. hover 이벤트가 .main>li에 걸려있기 때문에 mouseout이 되면 .sub_bg의 animate 값을 유지할 수가 없음
2. .sub_bg의 자식요소로 .sub가 있는 상황이라 같이 딸려 들어감

 

• mouseout에 해당되는 부분에 $('.sub').hover()를 추가로 사용
  → $('.sub').hover() 안에 들어가는 내용은 위에 들어간 내용과 거의 동일
  → hover를 이중으로 걸어주면서 ".main>li 에서 mouseout이지만 .sub에 mouseover인 상황"을 설정해줌

$('.main>li').hover(
    function(){
      menuIdx=$(this).index();
      $('.sub_bg').stop().animate({left:200},500,"easeOutQuint");
      $('.sub').eq(menuIdx).stop().animate({width:"toggle"},200,"swing");
    },
    function(){
      $('.sub').hover(
        function(){
          $('.sub_bg').stop().animate({left:200},500,"easeOutQuint");
          $(this).show();
        },
        function(){
          $('.sub_bg').stop().animate({left:0},500,"easeOutQuint");
          $('.sub').hide();
        }
      )
      $('.sub_bg').stop().animate({left:0},500,"easeOutQuint");
      $('.sub').hide();
    }
  )

1. $('.sub').hover() 안에 .sub_bg의 animate 값을 유지하도록 해서 들어가지 않게 함
2. .sub는 mouseover 되는 동안 유지해야하기 때문에 .show 추가로 적용
3. ".main>li와 .sub에 모두 mouseout인 상황"에 .sub_bg, .sub 모두 숨겨줌

---

210324

 

See the Pen 210324 by seung-gu shin (@nine_floor) on CodePen.

.scroll 과 .scrollTop 을 활용한 상단 고정형 헤더

 

---