PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4
233
작성한 질문수 7
@media (max-width:768px) {
/* html {
scroll-behavior: smooth;
}
*/
/* Entire Layout */
.cd-section {
height: auto;
}
.cd-section > div {
height: auto;
}
.content {
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 rgba(0, 0, 0, 0.1);
transition: 0.5s;
}
.gnb.active {
right:0;
}
.menu {
margin-top: 60px;
line-height: 40px;
}
.menu a {
display: block;
text-align: right;
padding-right: 20px;
color: #000;
font-size: 20px;
}
/* Trigger */
.trigger {
display: block;
width: 24px;
height: 14px;
position: absolute;
top: 20px;
right: 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);
}
/* go to top */
.gototop {
position: fixed;
bottom: 20px;
left: 20px;
border: 1px solid #fff;
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
line-height: 50px;
transform: translateY(0px);
opacity: 0;
}
.gototop.active {
opacity: 1;
}
.btn-hiring {
right: 20px;
bottom: 20px;
}
.cd-vertical-nav {
display: none;
}
/* Show Hide Section */
/* #home,
#about,
#project,
#plan,
#awards,
#location,
#contact {
display: none;
}
*/
/* ############# section : Home ############# */
.home-inner {
height: 100vh;
}
.welcome-text {
transform: translate(-50%, -50%) scale(0.7);
width: 100%;
/* border: 2px solid red; */
}
.home-heading {
left: 20px;
}
.home-heading span {
font-size: 50px;
}
}
답변 1
full reload 질문
1
178
3
섹션4에 있는 4번째 강의 질문(스크롤링)
1
148
2
안녕하세요. 질문있어서 조심스레 글을 올려봅니다.
1
197
1
브라켓 라이브 실행시 실행오류때문에 진도가안나갑니다..ㅠㅠ
1
316
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
507
2
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)3
2
308
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스 js)2
2
259
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태
2
422
1
포지션 속성 중복과 관련해서
1
213
1
section about에 관련.. 궁금해요
1
253
1
섹션3 모바일네이게이션 퍼블리싱 모바일트리거 관련
1
190
2
개발자도구
2
479
6
트리거메뉴 제이쿼리
3
430
2





