사이드메뉴 관련 제이쿼리 질문입니다..
본문
<span class="spanclick" onclick="openNav()" style="float:right">☰ open</span>
<style>
@media screen and (max-width: 600px) {
.sidenav{
width: 100%;
height: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-y: hidden;
transition: 0.5s;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
}
@media screen and (min-width: 601px) {
.sidenav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
}
</style>
<div id="mySidenav" class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<script>
function openNav() {
$('.spanclick').click(function(){
$(window).resize(function() {
if($(window).width() >=601) {
$(".sidenav").css("width","250px");
$(".sidenav").css("z-index","2000");
$(".sidenav").css("float","left");
}
else{
$(".sidenav").css("height","800px");
$(".sidenav").css("z-index","2000");
$(".sidenav").css("float","left");
}
});
$(".spanclick").attr("class","spanclick_close");
$(".sidenav").attr("class","sidenav close");
});
$('.spanclick_close').click(function(){
$(window).resize(function() {
if($(window).width() >=601) {
$(".sidenav").css("width","0px");
}
else{
$(".sidenav").css("height","0px");
}
});
$(".spanclick_close").attr("class","spanclick");
$(".sidenav close").attr("class","sidenav");
});
}
function closeNav() {
$(window).resize(function() {
if($(window).width() >=601) {
$("#mySidenav").style.width = "0";
}
else{
$("#mySidenav").style.height = "0";
}
});
}
</script>
안녕하세요 제가 작성한 코드인데 제 바램은
화면의 가로길이가 600이상이면 왼쪽화면에서 옆으로 나오게 하고, 그 미만이면 위에서 내려오는 제이쿼리를 작성하고싶었습니다.
하지만 작성해보니 무엇이 문제인지 잘 모르겠습니다...
답변 1
@media screen and (max-width: 600px) {
@media screen and (min-width: 601px) { |
둘둥 하나는 디폴트로 하고 작은거나 큰거하나만 작성해 주시는게 좋습니다.
그리고 더 생각하셔야 할것이
클릭상태에서 화면을 줄이거나 키울때도 같이 생각하셔야 합니다.
답변을 작성하시기 전에 로그인 해주세요.
