inflearn logo
강의

Course

Instructor

Responsive Website Portfolio (Architecture Agency)

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스 js)2

261

audlovewns

7 asked

2

  /* document ready랑 같은거 = html을 다 읽은 후 실행해라고 표시 */
  /* Trigger */
$(function(){

  $('.trigger').click(function(){
    $(this).toggleClass('active')
    $('.gnb').toggleClass('active')
  })
  $('section, .menu a').click(function(){
    $('.gnb').removeClass('active')
    $('.trigger').removeClass('active')
  })

  /* smooth Scrolling */
  $('.menu a, .gototop').click(function(e){
    $.scrollTo(this.hash || 0, 900)
   })

   /* chacng CSS with Scroll */
   // 스크롤을 한 상태 if 스크롤을 안한상태 else
   $(window).scroll(function(){
    if($(window).scrollTop() > 50) {
      $('header, .gototop').addClass('active')
    }
    else {
      $('header, .gototop').removeClass('active')
    }
   })

   // slick.js History
   $('.history-slider').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 2,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]
   })


   // slick.js project photo1
   $('.project-photo').slick({
    dots : true,
    infinite : true,
    speed : 500,
    fade : true,
    autoplay : true,
    autoplaySpeed : 2000,
    cssEase : 'linear'
   })

})

HTML/CSS jquery 웹-디자인 반응형-웹

Answer 1

0

codingworks

첫번째 질문에 답변 올렸습니다. 확인해주세요~

0

audlovewns

감사합니다 :)

full reload 질문

1

180

3

섹션4에 있는 4번째 강의 질문(스크롤링)

1

149

2

안녕하세요. 질문있어서 조심스레 글을 올려봅니다.

1

197

1

브라켓 라이브 실행시 실행오류때문에 진도가안나갑니다..ㅠㅠ

1

317

3

css full reload 문제가 발생하여 질문드립니다!

1

315

3

파일 내 index.html에 대한 오류

1

264

1

모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 부분 해결되지 않아 재 질문 드립니다ㅠㅠ

1

207

1

모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 질문입니다

0

218

2

모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 다시 수정하여 질문드립니다!

1

201

2

모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 질문드립니다.

1

255

3

크로스브라우징-크롬

1

280

2

섹션 17 하드코딩으로 이미지맵 만들기 부분 연습파일이 없어요..

0

256

1

line-hieght를 em 단위로 쓰는 것에 대하여 질문 드립니다

1

217

1

슬릭 슬라이더 dots 보이게 하는 방법 질문 드립니다

1

274

1

이거 h2 가 안나오고 스크롤도 안되는데 왜이래요?

1

257

1

모바일 버전에서 메뉴 클릭 후 그 위치로 이동할 때 상단 영역

1

508

2

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4

2

233

1

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)3

2

309

1

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태

2

423

1

포지션 속성 중복과 관련해서

1

215

1

section about에 관련.. 궁금해요

1

256

1

섹션3 모바일네이게이션 퍼블리싱 모바일트리거 관련

1

194

2

개발자도구

2

483

6

트리거메뉴 제이쿼리

3

434

2