728x90
반응형
html 마크업
네비게이션 마크업
모바일 바 마크업
CSS 편집
●row 넣는 이유는 완충작용으로 여백에 여유를 주어 다양한 크기의 디바이스에 글씨가 잘리지 않도록함
●반응형 크기적용하기
● container width: 100% 설정 해야 화면 조정시 같이 크기가 변함
row값은 화면 크기에 따라 다르게 설정한다. 화면 크기가 작을수록 작게 설정
[ min-960px media 설정]
네비게이션 스타일설정
navBG 의 기준점을 container로 잡는다.
네비게이션 마우스오버 시 하단 바 나오게 하기
네비게이션 슬라이드 다운 효과
960px 이상일 때 네비게이션 슬라이드 효과 지정
●.width() : 요소의 너비값만 구할 경우
●.innerWidth() : 요소의 너비 값 + padding을 더한 값
● .outerWidth() : 요소의 너비값과 padding + border를 더한 값
● .outerWidth(true) : 파리미터에 true를 넣을 경우 요소의 width, padding, border, margin 을 모두 포함한 값을 나타낸다.
[ max-960px media 설정]
barMenu 클릭이벤트
submenu 가상요소 넣기
<html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header id="header clearfix">
<div class="container">
<!--왼쪽과 오른쪽에 여백 -->
<div class="row">
<div class="header">
<h1 class="logo">
<!-- 로고는 반드시 메인 인덱스로 넘어가야함, 링크걸기 -->
<a href="#">LOGO</a>
</h1>
<nav class="gnb">
<ul class="clearfix">
<li><a href="#">회사소개</a>
<ul class="submenu">
<li><a href="#">CEO 인사말</a></li>
<li><a href="#">오시는 길</a></li>
</ul>
</li>
<li><a href="#">제품소개</a>
<ul class="submenu">
<li><a href="#">스폰지</a></li>
<li><a href="#">플라스틱</a></li>
<li><a href="#">제품 테스트</a></li>
</ul>
</li>
<li><a href="#">응용분야</a>
<ul class="submenu">
<li><a href="#">필터</a></li>
<li><a href="#">자동차</a></li>
<li><a href="#">선물센트 내장지</a></li>
</ul>
</li>
<li><a href="#">고객지원</a>
<ul class="submenu">
<li><a href="#">고객센터</a></li>
<li><a href="#">공지사항</a></li>
</ul>
</li>
</ul>
</nav>
<div id="barMenu">
<div class="bar"></div>
</div><!--barMenu-->
</div><!--header-->
</div><!--row-->
</div><!--container-->
<!-- gnbBG의 기준점을 container로 잡아줌-->
<div id="gnbBG"></div><!--gnbBG-->
</header>
<section id="banner">
<img src="./img/banner.png" alt="배너이미지">
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// barMenu 클릭 이벤트
$("#barMenu").click(function(e){
e.preventDefault();
$(".gnb").toggleClass("on");
});
// 모바일 네비게이션
$(".gnb>ul>li>a").click(function(e){
let winW = $(window).outerWidth();
if(winW <=960){
e.preventDefault();
$(".header .gnb>ul>li>.submenu").stop().slideUp();
$(this).next("ul").stop().slideToggle();
$(this).parents(".header .gnb>ul>li").toggleClass("open");
}
});
// pc 네비게이션
$(".gnb>ul>li").mouseenter(function(e){
// 반응형 960px
let winW = $(window).outerWidth();
// console.log(winW)
// 마우스 올렸을 때 브라우저 너비값
if(winW > 960){
e.preventDefault();
$(".gnb>ul>li").find(".submenu").stop().slideDown();
$("#gnbBG").stop().slideDown();
}
});
$(".gnb>ul>li").mouseleave(function(e){
// 마우스 떠났을 때 브라우저 너비값
let winW = $(window).outerWidth();
if(winW > 960){
e.preventDefault();
$(".gnb>ul>li").find(".submenu").stop().slideUp();
$("#gnbBG").stop().slideUp();
}
});
</script>
</body>
</html>
<css>
@charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
color: #222;
}
li{
list-style: none;
}
a{
color: #222;
text-decoration: none;
}
.clearfix::before, .clear::after{
content: "";
display: block;
clear: both;
}
#header{
width: 100%;
height: 95px;
}
#banner{
width: 100%;
height: 600px;
/* background: url(../img/banner.png) no-repeat;
background-size: cover; */
/* 배경으로 사용했을 때 전체사이즈 */
}
#banner img{
/* 배경 전체사이즈할 때 사용 화면 줄일 때 같이 축소 */
width: 100%;
}
.container{
width: 1280px;
margin: 0 auto;
/* container 에 기준점을 주어 gnbBg위치 잡아줌 */
position: relative;
}
.row{
padding: 0 28px;
}
@media(max-width:1290px){
/* 반응형을 할때는 container 100%로 설정 */
.container{width: 100%;}
}
@media(max-width:1024px){}
/* PC 버전 */
@media(min-width:960px){
/* row값을 화면 크기에 따라 다르게 설정 */
.row{padding: 0 28px;}
.header{}
.header .logo{
width: 184px;
height: 95px;
display: flex;
align-items: center;
justify-content: center;
float: left;
}
.header .logo a{}
.header .gnb{
float: right;
}
.header> .gnb> ul{}
.header> .gnb> ul> li{
float: left;
width: 136px;
/* 높이값대신 패딩값으로 적용 */
padding: 35px 0;
position: relative;
}
/* 네비게이션 마우스오버 시 표시바 만들기 */
.header> .gnb> ul> li::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background-color: #193a6f;
transform: scaleX(0);
transition: all 0.5s;
}
.header> .gnb> ul> li:hover::after{
transform: scaleX(100%);
}
.header> .gnb> ul> li> a{
display: block;
font: 18px;
font-weight: bold;
text-align: center;
}
.header> .gnb> ul> li> .submenu{
position: absolute;
width: 100%;
left: 0;
top: 95px;
z-index: 10;
display: none;
}
.header> .gnb> ul> li> .submenu> li{}
.header> .gnb> ul> li> .submenu> li> a{
font-size: 16px;
display: block;
padding: 20px 0;
font-weight: 500;
text-align: center;
}
#gnbBG{
width: 100%;
height: 200px;
background-color: #f5f5f5;
position: absolute;
left: 0;
top: 95px;
z-index: 9;
display: none;
}
}
/* 모바일 네비게이션 */
@media(max-width:960px){
.row{padding: 0 20px;}
.header{}
.header .logo{
width: 100%;
height: 95px;
display: flex;
justify-content: center;
align-items: center;
}
.header .gnb{
position: absolute;
background-color: rgba(255, 255, 255, 0.8);
width: 250px;
left: -300px;
top: 95px;
height: calc( 100vh - 95px);
transition: all 0.5s;
}
/* barMenu 클릭 이벤트 */
.header .gnb.on{
left: 0;
}
.header .gnb > ul{
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.header .gnb > ul > li{
width: 100%;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
position: relative;
}
.header .gnb > ul > li::after{
content: "+";
position: absolute;
top: 7px;
right: 30px;
width: 0;
height: 0;
color: #1d1d1f;
font-weight: 500;
}
.header .gnb > ul > li:hover::after{
color: #ccc;
}
.header .gnb > ul > li.open::after{
content: "-";
}
.header .gnb > ul > li > a{
display: block;
font-size: 16px;
font-weight: 700;
padding: 15px 30px;
}
.header .gnb > ul > li > .submenu{
height: auto;
display: none;
}
.header .gnb > ul > li > .submenu > li{
border-top: 1px solid #fff;
}
.header .gnb > ul > li > .submenu > li > a{
display: block;
font-size: 14px;
font-weight: 500;
padding: 10px 60px;
}
/* 클래스 밑에 아이디를 넣지 않지만, 위치가 밖에있을 때랑 안에 있을 때랑 위치 비교-> 아이디 나중에 이동할 거임 */
.header #barMenu{
width: 40px;
height: 25px;
/* background-color: #ccc; */
position: absolute;
top: 35px;
left: 20px;
cursor: pointer;
}
.header #barMenu .bar{
width: 100%;
height: 4px;
background-color: #1d1d1f;
position: relative;
}
.header #barMenu .bar::after,.header #barMenu .bar::before{
content: "";
position: absolute;
width: 100%;
height: 4px;
background-color: #1d1d1f;
top: 10px;
}
.header #barMenu .bar::before{
top: 20px;
}
/* @media(max-width:768px){
.row{padding: 0 16px;}
}
@media(max-width:600px){} */
/* 갤럭시사이즈 */
/* @media(max-width:480px){}
@media(max-width:320px){} */
}
728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
비주얼 스튜디오 코드 60_ parallax 06 (0) | 2023.07.04 |
---|---|
비주얼 스튜디오 코드 59_하이시네마 웹페이지 만들기 (0) | 2023.07.03 |
비주얼 스튜디오 코드 57 _ parallax 05 (0) | 2023.06.30 |
비주얼 스튜디오 코드 56_ 반응형 메뉴(모바일 네비게이션) (0) | 2023.06.30 |
비주얼 스튜디오 코드 55_ parallax04 (0) | 2023.06.29 |