반응형 네비게이션 1
2022. 1. 11. 11:52ㆍStudy/Example & Plug-in
jQuery 반응형 네비게이션 1
해상도 별 다르게 표현되는 네비게이션
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/prefixfree.min.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
var documentHeight = $(document).height();
$(".box").css('height',documentHeight);
$(".btn").click(function() {
$("#nav").animate({right:0,opacity:1}, 'fast');
$(".box").show();
});
$(".box,.close").click(function() {
$("#nav").animate({right:'-100%',opacity:0}, 'fast');
$(".box").hide();
});
var current=0;
$(window).resize(function(){ //웹브라우저 크기 조절시 반응하는 이벤트 메소드()
var screenSize = $(window).width();
if( screenSize > 768){
current=1;
$("#nav").css({right:0,opacity:1});
$(".box").hide();
}
if(current==1 && screenSize <= 738){
$("#nav").css({right:'-100%',opacity:0});
$(".box").hide();
current=0;
}
});
});
</script>
</head>
<body>
<div id="wrap">
<div class="box"></div>
<header>
<a href="#" class="btn"><i class="fa fa-bars" aria-hidden="true"></i></a>
<nav id="nav">
<ul>
<li><a href="#">menu01</a></li>
<li><a href="#">menu02</a></li>
<li><a href="#">menu03</a></li>
<li><a href="#">menu04</a></li>
<li><a href="#">menu05</a></li>
</ul>
<a href="#" class="close"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
</nav>
</header>
</div>
</body>
</html>
CSS
/* CSS Document */
html,body{height: 100%;}
*{margin:0; padding:0}
a{ color:#333; text-decoration:none}
ul{ list-style:none}
#wrap{position:relative; width:1200px; height:100%; margin:0 auto; border:1px solid #ccc; overflow:hidden;}
header{width:300px; height:100%; background:#ccc}
.btn{ font-size:1.2rem; color:#333; display:none}
.box{position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.7; display:none; z-index:10;}
#nav{}
#nav li{font-size:2rem; text-align:center}
#nav li a{display: block; line-height: 4rem;}
#nav .close{display:none;}
@media screen and (max-width:1280px) {
#wrap{ width:90%; margin:0 5%}
header{width:auto; height:50px; background:#ccc}
#nav li{float:left; width:20%;}
#nav li a{line-height: 50px;}
}
@media screen and (max-width:1024px) {
#wrap{ width:auto; margin:0}
#nav li{font-size:1.2rem}
}
@media screen and (max-width:768px) {
.btn{ display:block; position:absolute; top:10px; right:10px}
#nav{position:absolute; right:-100%; top:50px; width:70%; height:400px; background:#acbc59; clear:both; opacity:0; z-index:20;}
#nav li{float:none; width:auto}
#nav .close{position:absolute; left:-25px; top:0; display:block; font-size:1.5rem; color:#fff }
}
@media screen and (max-width:640px) {
}
'Study > Example & Plug-in' 카테고리의 다른 글
| 인터렉티브 웹 1 - 3D rotate (0) | 2022.03.15 |
|---|---|
| 반응형 네비게이션 2 (0) | 2022.01.11 |
| Plug-in Nwagon (0) | 2021.12.20 |
| JavaScript Plug-in Calendar (0) | 2021.12.20 |
| jQuery Plug-in waypoint-sticky 예시 (0) | 2021.12.20 |
