반응형웹 조건부 스타일시트 질문 드립니다 ㅠ
본문
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr"/>
<title></title>
<meta name="author" content="Alvaro Trigo Lopez"/>
<meta name="description" content="fullPage fixed header and footer."/>
<meta name="keywords" content="fullpage,jquery,demo,screen,fixed, header,footer, absolute, positioned,css"/>
<meta name="viewport" content="initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="Resource-type" content="Document"/>
<link href="examples2.css" media="only screen and (min-width: 1px) and (max-width: 600px)" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css"/>
<link rel="stylesheet" type="text/css" href="examples.css"/>
<style>
/* Centered texts in each section
* --------------------------------------- */
.section{
text-align:center;
}
/* Fixed header and footer.
* --------------------------------------- */
#header, #footer{
position:fixed;
height: 5%;
-moz-box-shadow: inset 1px 1px 10px #222;
-webkit-shadow: inset 1px 1px 10px #222;
box-shadow: inset 1px 1px 10px #222;
display:block;
width: 100%;
z-index:9;
text-align:center;
color: #f2f2f2;
background-color:#535353;
padding: 15px 0 10px 0;
}
#header{
top:0px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
<script type="text/javascript" src="examples.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
<!--[if IE]>
<script type="text/javascript">
var console = { log: function() {} };
</script>
<![endif]-->
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000,
scrollOverflow: true
});
});
function initialize() {
var myLatlng = new google.maps.LatLng(37.874433, 127.734127);
var mapOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "" });
};
</script>
</head>
이값으로 좁아지면 메뉴를 사라지게 만들었습니다.
그래서 사라지게 하는건 성공했는데 반대로 none 값을 block 값을 줘서 나타나게 하려고 해도 나타나질않네요...
조언좀 부탁드립니다,ㅠ 기반으로 제이쿼리 사용하고 있습니다.
원 css 파일에 css id나 class 값이 선언되어 있으면 값이 안나오는거 같습니다.
해결방안이 있을까요? ㅠㅠ
원스크롤 페이지이고 보디 부분은 빼고 해드만 적었어요 ㅜㅠ
