반응형 네비게이션 2
2022. 1. 11. 12:40ㆍStudy/Example & Plug-in
반응형 네비게이션 2
해상도 별 다르게 표현되는 네비게이션
<!DOCTYPE html>
<html lang="ko">
<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>Responsive WebDesign</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" href="app_icon.png">
<link rel="apple-touch-startup-image" href="startup.png">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/layout.css">
<script src="js/prefixfree.min.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-migrate-1.4.1.min.js"></script>
<script>
$(document).ready(function() {
$(".menuOpen").toggle(function() {
$(".mainMenu").slideDown('slow');
}, function() {
$(".mainMenu").slideUp('fast');
});
var current=0;
$(window).resize(function(){
var screenSize = $(window).width();
if( screenSize > 768){
$(".mainMenu").show();
current=1;
}
if(current==1 && screenSize <= 768){
$(".mainMenu").hide();
current=0;
}
});
});
</script>
</head>
<body>
<div id="wrap">
<header>
<a class="menuOpen" href="#">햄버거먹구잡다</a>
<nav class="mainMenu">
<ul>
<li><a href="#">조아란1</a></li>
<li><a href="#">조아란2</a></li>
<li><a href="#">조아란3</a></li>
<li><a href="#">조아란4</a></li>
<li><a href="#">조아란5</a></li>
</ul>
</nav>
</header>
<div class="main">
<img src="images/main.jpg" width="100%">
</div>
</div>
</body>
</html>
CSS
/* 와이드 pc */
header{ height:60px; background:#F90; padding-top:20px}
header .menuOpen{position:absolute; right:20px; top:20px; display:none}
header .mainMenu{width: 450px; margin:0 auto; background:#FC3;}
header .mainMenu ul{overflow:hidden;}
header .mainMenu li{ float:left; margin-right:15px}
header .mainMenu li a{display:block; color:#333; font-weight:bold; font-size:1.5em; padding:10px 0}
header .mainMenu ul li a:hover{ color:#f00}
/* 일반 pc */
@media screen and (max-width:1280px) {
}
/* 테블릿 */
@media screen and (max-width:1024px) {
}
/* 소형 테블릿 */
@media screen and (max-width:768px) {
header .menuOpen{ display:block}
header .mainMenu{position:absolute; top:80px; left:0; width:100%; background:#6CF; display:none;}
header .mainMenu li{float:none; margin:0; text-align:center}
}
/* 모바일 */
@media screen and (max-width:640px) {
}
/* 최소 사이즈 처리 */
@media screen and (max-width:480px) {
#wrap { min-width:320px; }
}
'Study > Example & Plug-in' 카테고리의 다른 글
| 인터렉티브 웹 2 - 원페이지 슬라이드 (0) | 2022.03.15 |
|---|---|
| 인터렉티브 웹 1 - 3D rotate (0) | 2022.03.15 |
| 반응형 네비게이션 1 (0) | 2022.01.11 |
| Plug-in Nwagon (0) | 2021.12.20 |
| JavaScript Plug-in Calendar (0) | 2021.12.20 |
