모바일 전체 레이아웃 및 네비게이션 퍼블리싱(Mobile ver.)
591
Dabeen
작성한 질문수 3
1
모바일 전체 레이아웃 및 네비게이션 퍼블리싱(Mobile ver.)
style.css
.trigger {
style.css
.trigger {
display: none;
}
했는데 PC에서 계속 햄버거버튼 나와요
그래서 hiring 부분에서 모바일css
했는데 PC에서 계속 햄버거버튼 나와요
그래서 hiring 부분에서 모바일css
.btn-hiring {
right: 10px;
bottom: 20px;
}
수정했는데 피씨도 같이 움직여요 ㅠㅠ
수정했는데 피씨도 같이 움직여요 ㅠㅠ
답변 5
0
responsive.css 파일에서 /* Header */ 이하의 구문이 미디어쿼리 안에 있어야 하는데 밖에 있습니다.
그래서 PC의 .trigger 속성을 덮어써서 display: none이 안되고 있습니다.
@media (max-width: 768px) { ... }
0
@media (max-width: 768px) {
html {
scroll-behavior: smooth;
}
/* Entire Layout */
.cd-section {
height: auto;
}
.cd-section > div {
height: auto;
}
.contents {
position: static;
width: 100%;
height: 100%;
}
}
/* Header */
header {
transition: 0.5s;
z-index: 100;
}
header.active {
background-color: #fff;
border-bottom: 1px solid #eee;
}
.menu {
display: block;
}
.slogan {
display: none;
}
.gnb {
background-color: #fff;
position: fixed;
top: 0;
right: -270px;
width: 250px;
height: 100vh;
box-shadow: -5px 0 10px rgb(0, 0, 0, 0.05);
transition: 0.5s;
}
.gnb.active {
right: 0;
}
.menu {
line-height: 40px;
margin-top: 60px;
}
.menu a {
text-align: right;
display: block;
padding-right: 20px;
color: #000;
font-size: 20px;
}
/* Trigger */
.trigger {
display: block;
/* border: 1px solid red; */
width: 24px;
height: 14px;
position: fixed;
right: 20px;
top: 20px;
}
.trigger span {
position: absolute;
height: 1px;
width: 100%;
background-color: #000;
transition: 0.5s;
}
.trigger span:nth-child(1) {
top: 0;
}
.trigger span:nth-child(2) {
top: 50%;
width: 80%;
}
.trigger span:nth-child(3) {
top: 100%;
}
.trigger.active span:nth-child(1) {
top: 50%;
transform: rotate(45deg);
}
.trigger.active span:nth-child(2) {
top: 50%;
width: 80%;
opacity: 0;
}
.trigger.active span:nth-child(3) {
top: 50%;
transform: rotate(-45deg);
}
/* Gototop */
.gototop {
position: fixed;
bottom: 20px;
left: 22px;
border: 1px solid #fff;
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
line-height: 40px;
transform: translateY(30px);
opacity: 0;
transition: 0.5s;
}
.gototop.active {
opacity: 1;
transform: translateY(0);
}
.btn-hiring {
right: 10px;
bottom: 20px;
}
0
/* Google Web Font : Montserrat */
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap');
/* FontAwesome CDN 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
/* Reset CSS */
* { box-sizing: border-box; }
ul { list-style: none; }
a { text-decoration: none; }
/* Default CSS */
body {
font-family: 'Montserrat', sans-serif;
color: #222;
font-size: 15px;
margin: 0;
height: 100vh;
background-color: #fff;
}
/* Entire Layout */
.cd-section {
height: 100vh;
}
.cd-section > div {
height: 100%;
position: relative;
}
.contents {
background-color: #ddd;
position: absolute;
width: calc(100% - 40px);
height: calc(100% - 80px);
left: 20px;
bottom: 20px;
overflow: hidden;
}
/* Header */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.gnb-inner {
/* border: 1px solid #000; */
width: calc(100% - 40px);
margin: auto;
height: 60px;
line-height: 60px;
}
.logo {
float: left;
}
.logo img {
padding-top: 17px;
}
.gnb {
float: right;
}
.menu {
display: none;
}
.menu a {}
.slogan {
font-size: 16px;
font-style: italic;
}
.trigger {
display: none;
}
/* Hiring Button */
.btn-hiring {
position: fixed;
right: 50px;
bottom: 50px;
color: #fff;
background-color: #000;
padding: 10px 20px;
border-radius: 20px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.119);
transition: 0.5s;
}
.btn-hiring .fa {
transform: rotateY(180deg);
margin-right: 5px;
}
.btn-hiring:active {
transform: scale(0);
}
0
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DesignWorks Architecture Agency</title>
<script src="js/jquery-2.1.4.js"></script>
<!-- Page Scroll Effects Js & CSS -->
<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> -->
<!-- Custom js & CSS -->
<script src="custom.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
</head>
<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->
<body data-hijacking="on" data-animation="rotate">
<div class="container">
<section class="cd-section visible" id="home">
<div>
<div class="contents">
<img src="images/temp-section-01.jpg" alt="">
</div>
</div>
</section>
<section class="cd-section" id="about">
<div>
<div class="contents">
<img src="images/temp-section-02.jpg" alt="">
</div>
</div>
</section>
<section class="cd-section" id="project">
<div>
<div class="contents">
<img src="images/temp-section-03.jpg" alt="">
</div>
</div>
</section>
<section class="cd-section" id="plan">
<div>
<div class="contents">
<img src="images/temp-section-04.jpg" alt="">
</div>
</div>
</section>
<section class="cd-section" id="awards">
<div>
<div class="contents">
<img src="images/temp-section-05.jpg" alt="">
</div>
</div>
</section>
<section class="cd-section" id="location">
<div>
<div class="contents">
<img src="images/temp-section-06.jpg" alt="">
</div>
</div>
</section>
<section class="cd-section" id="contact">
<div>
<div class="contents">
<img src="images/temp-section-07.jpg" alt="">
</div>
</div>
</section>
<header>
<div class="gnb-inner">
<div class="logo">
<a href="none"><img
src="images/logo.png"></a>
</div>
<div class="gnb">
<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. Hiring</div>
</div>
<div class="trigger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
</div>
<a href="#" class="gototop"><img src="images/gototop.png"></a>
<a href="" class="btn-hiring"><i class="fa fa-commenting"></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> <!-- .cd-vertical-nav -->
<script src="js/jquery-2.1.4.js"></script:src>
<script src="js/velocity.min.js"></script>
<script src="js/velocity.ui.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
0
PC 버전에서는 .trigger가 안보여여 하는 지금은 보이네요.
이건 html, css 코드를 복사해서 올려주세요.
코드 올리시면 제가 확인해볼게요.
full reload 질문
1
182
3
섹션4에 있는 4번째 강의 질문(스크롤링)
1
150
2
안녕하세요. 질문있어서 조심스레 글을 올려봅니다.
1
199
1
브라켓 라이브 실행시 실행오류때문에 진도가안나갑니다..ㅠㅠ
1
318
3
css full reload 문제가 발생하여 질문드립니다!
1
316
3
파일 내 index.html에 대한 오류
1
264
1
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 부분 해결되지 않아 재 질문 드립니다ㅠㅠ
1
207
1
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 질문입니다
0
218
2
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 다시 수정하여 질문드립니다!
1
202
2
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 질문드립니다.
1
256
3
크로스브라우징-크롬
1
284
2
섹션 17 하드코딩으로 이미지맵 만들기 부분 연습파일이 없어요..
0
256
1
line-hieght를 em 단위로 쓰는 것에 대하여 질문 드립니다
1
217
1
슬릭 슬라이더 dots 보이게 하는 방법 질문 드립니다
1
277
1
이거 h2 가 안나오고 스크롤도 안되는데 왜이래요?
1
258
1
모바일 버전에서 메뉴 클릭 후 그 위치로 이동할 때 상단 영역
1
512
2
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4
2
234
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)3
2
311
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스 js)2
2
263
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태
2
425
1
포지션 속성 중복과 관련해서
1
217
1
section about에 관련.. 궁금해요
1
256
1
섹션3 모바일네이게이션 퍼블리싱 모바일트리거 관련
1
196
2
개발자도구
2
483
6