inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

반응형 웹사이트 포트폴리오(Architecture Agency)

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

423

audlovewns

작성한 질문수 7

2

수업진행을 하는 과정에 있어서 제가 문제를 찾아볼려고 했는데 못찾아서 질문을 드립니다.

PC에서 모바일 화면으로 전환되면 GNB메뉴가 항시 OPEN되어있는 상태로 화면이 보이게 되면서 계속 GNB메뉴를 닫아야하더라구요. 선생님께서는 그런 문제가 없어보여서요.

선생님 소스를 복사해서 붙여넣기도 해봤는데요.. 제 쪽에서는 항시 OPEN되서 보이더라구요

제가 문제해결을 하지 못해서 여쭈어봅니다. 소스는 많지만.. 아래와 같습니다.

반응형이미지.jpg

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
	<title>DesignAgency SIYU Family</title>
  <link rel="icon" href="images/favicon.png">
  <script src="/js/jquery-2.1.4.js"></script>
  <!-- <script src="/js/velocity/modernizr.js"></script> -->
  <script src="/js/velocity/velocity.min.js"></script>
  <script src="/js/velocity/velocity.ui.min.js"></script>
  <script src="/js/velocity/main.js"></script>
  <link rel="stylesheet" href="/js/velocity/velocity.css">
  <!-- smooth Scrolling -->
  <script src="js/jquery.scrollTo.min.js"></script>
  <!-- slick.js -->
  <script src="js/slick/slick.min.js"></script>
  <link rel="stylesheet" href="js/slick/slick-theme.css">
  <link rel="stylesheet" href="js/slick/slick.css">
  <!-- featherlight.js -->
  <script src="js/featherlight/featherlight.js"></script>
  <link rel="stylesheet" href="js/featherlight/featherlight.css">
  <!-- custom Js & CSS -->
  <script src="custom.js"></script>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="responsive.css">
  <!-- fontawesome -->
  <script src="https://kit.fontawesome.com/f7c955b0b1.js" crossorigin="anonymous"></script>
  
  

</head>
<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->

<body data-hijacking="on" data-animation="rotate">
  
  <!-- S : container -->
	<div class="container">
    <!-- S : Home -->
		<section class="cd-section visible" id="home">
			<div>
				<div class="content">
          <div class="home-inner">
            <h3 class="welcome-text">
              You can do it 
              <span>with SIYU family <i class="fa fa-heart"></i></span>
            </h3>
            <div class="opacity-image"></div>
            <div class="home-heading">
              <span>Creative</span>
              <span>Architecture</span>
              <span>Specialists</span>
            </div>
          </div>
        </div>
			</div>
		</section>
    <!-- E : Home -->

     <!-- S : header -->
    <header class="active">
      <div class="gnb-inner">
        <div class="logo">
          <a href="/">
            <img src="images/logo.png" alt="로고" />
          </a>
        </div>
        <!-- S : gnb -->
        <div class="gnb active">
          <div class="menu">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#project">Project</a>
            <a href="#plan">Plan & History</a>
            <a href="#awards">Awards</a>
            <a href="#location">Location</a>
            <a href="#contact">Contact</a>
          </div>
          <div class="slogan">We design places, not projects.</div>
        </div>
        <div class="trigger active">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <!-- E : gnb -->
      </div>
    </header>
    <!-- E : header -->
	</div>
  <!-- E : container -->

  <a href="#" class="gototop">
    <img src="images/gototop.png" alt="맨 위로">
  </a>
  <a href="hiring.html" class="btn-hiring" data-featherlight="iframe">
    <i class="fa-solid fa-comment-dots"></i>
    Hiring
</a>

	<nav>
		<ul class="cd-vertical-nav">
			<li><a href="#0" class="cd-prev inactive">Next</a></li>
			<li><a href="#0" class="cd-next">Prev</a></li>
		</ul>
	</nav>
</body>
</html>

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

답변 1

0

코딩웍스(Coding Works)

지방일 때문에 답변이 좀 늦었습니다.

html에 .gnb와 .trigger에 active 클래스를 없애 주시면 됩니다.

html에 .gnb와 .trigger에 active 클래스를 넣어준건 active 상태에서 디자인을 확인하기 위해서 넣어준 것이고, 디자인이 완료되면 active 클래스를 지워주면 정상적으로 됩니다.

 

image

0

audlovewns

감사합니다 :)

full reload 질문

1

178

3

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

1

148

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

308

1

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

2

260

1

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

1

215

1

section about에 관련.. 궁금해요

1

255

1

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

1

194

2

개발자도구

2

482

6

트리거메뉴 제이쿼리

3

432

2