js 사이드바 기본 닫혀있게 하려면 어떤 이벤트를 추가해야 할까요.
관련링크
본문
원소스 링크
https://www.jqueryscript.net/demo/Multi-Level-Sliding-Sidebar-Navigation-with-jQuery-CSS3/
구글링으로 찾아낸 소스를 적용했는데요. 이 소스가 기본 열려있는 상태에서 클릭하면
닫히게 되어 있습니다.
그런데 이게 기본으로 열려있다보니 컨텐츠의 일부를 가린상태에서 페이지가 로딩되버립니다.
그래서 페이지 로딩시 기본적으로 사이드바가 닫혀있게 하려고 하는데 3시간 동안 파봐도 모르겠습니다. (스크립트 단에서 정의된 토글에 뭘 추가하고 수정해도 에러만 뿜뿜하네요 ㅎㅎ)
(초보 짜지퍼의 슬픔 ㅠ)
스크롤 압박 있습니다.
<css>
.page-container {
min-width: 1260px;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: 0px auto;
z-index: 1 !important;
}
.content {
max-width: 800px;
min-width: 600px;
display: block;
padding: 50px;
margin: 50px auto;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
overflow: hidden;
}
.page-container.sidebar-collapsed {
padding-right: 55px;
transition: all 100ms linear;
transition-delay: 300ms;
}
.page-container.sidebar-collapsed-back {
padding-right: 280px;
transition: all 100ms linear;
}
.page-container.sidebar-collapsed .sidebar-snavi {
width: 55px;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.page-container.sidebar-collapsed-back .sidebar-snavi {
width: 280px;
transition: all 100ms ease-in-out;
}
.page-container.sidebar-collapsed .sidebar-icon {
transform: rotate(180deg);
transition: all 300ms ease-in-out;
}
.page-container.sidebar-collapsed-back .sidebar-icon {
transform: rotate(0deg);
transition: all 300ms ease-in-out;
}
.page-container.sidebar-collapsed .slogo {
padding: 21px;
height: 136px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.page-container.sidebar-collapsed-back .slogo {
width: 100%;
padding: 21px;
height: 136px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
}
.page-container.sidebar-collapsed #slogo {
opacity: 0;
transition: all 200ms ease-in-out;
}
.page-container.sidebar-collapsed-back #slogo {
opacity: 1;
transition: all 200ms ease-in-out;
transition-delay: 300ms;
}
.page-container.sidebar-collapsed #snavi span {
opacity: 0;
transition: all 50ms linear;
}
.page-container.sidebar-collapsed-back #snavi span {
opacity: 1;
transition: all 200ms linear;
transition-delay: 300ms;
}
.sidebar-snavi {
position: fixed;
float: left;
width: 280px;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
color: #aaabae;
font-family: "Segoe UI";
/*box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);*/
border:1px solid #eee;
}
#snavi {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#snavi li {
position: relative;
margin: 0;
font-size: 12px;
border-bottom: 1px solid #eee;
padding: 0;
}
#snavi li ul {
opacity: 0;
height: 0px;
}
#snavi li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 10px 20px;
color: #aaabae;
white-space: nowrap;
z-index: 2;
}
#snavi li a:hover {
color: #000;
/*background-color: #333944;*/
transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
}
#snavi li.active > a {
/*background-color: #2b303a;*/
color: #000;
}
#snavi ul li { background-color: #fff; border:1px solid #eee; }
#snavi ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#snavi li ul {
position: absolute;
visibility: hidden;
right: 100%;
top: -1px;
background-color: #2b303a;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.1s linear;
border-top: 1px solid #eee;
}
#snavi li:hover > ul {
visibility: visible;
opacity: 1;
}
#snavi li li ul {
right: 100%;
visibility: hidden;
top: -1px;
opacity: 0;
transition: opacity 0.1s linear;
}
#snavi li li:hover ul {
visibility: visible;
opacity: 1;
}
#snavi .fa { margin-right: 5px; }
.slogo {
width: 100%;
padding: 21px;
box-sizing: border-box;
}
.sidebar-icon {
position: absolute;
float: right;
margin-top: 82px;
margin-left:-29px;
/*border: 1px solid #eee;*/
background-color:#333;
text-align: center;
line-height: 1;
font-size: 18px;
padding: 6px 8px;
/*border-radius: 3px;*/
color: #fff;
background-clip: padding-box;
/*text-shadow: 4px 4px 6px rgba(0,0,0,0.4);*/
}
/*#slogo
{
width: 150px;
height: 64px;
vertical-align: middle;
-webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
}*/
.fa-html5 {
color: #000;
margin-left: 50px;
}
<JS>
var toggle = true;
$(".sidebar-icon").click(function() {
if (toggle)
{
$(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back");
$("#snavi span").css({"position":"absolute"});
}
else
{
$(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back");
setTimeout(function() {
$("#snavi span").css({"position":"relative"});
}, 400);
}
toggle = !toggle;
});
<html>
<div class="page-container">
<div class="sidebar-snavi" style="padding-top:270px;">
<a href="javascript:void(0)" onclick="yourFunction()" class="sidebar-icon"> <span class="fa fa-chevron-right"></span> </a>
<div></div>
<div class="snavi">
<ul id="snavi" >
<li id="snavi-home" ><a href="http://angelbona.co.kr"><i class="fa fa-home"></i><span>Home</span></a></li>
<li><a href="#"><i class="fa fa-share-alt"></i><span>Share</span><span class="fa fa-angle-right" style="float: right"></span></a>
<ul>
<li><a href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
<li><a href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
<li><a href="#"><i class="fa fa-pinterest"></i> Pinterest</a></li>
</ul>
</li>
<li id="snavi-comunicacao" ><a href="#"><i class="fa fa-anchor"></i><span>Category</span><span class="fa fa-angle-double-right" style="float: right"></span></a>
<ul id="snavi-comunicacao-sub" >
<li id="snavi-mensagens" style="width: 120px" ><a href="#">Item 1<i class="fa fa-angle-right" style="float: right; margin-right: -8px; margin-top: 2px;"></i></a>
<ul id="snavi-mensagens-sub" >
<li id="snavi-mensagens-enviadas" ><a href="#">Item 1.1</a></li>
<li id="snavi-mensagens-recebidas" ><a href="#">Item 1.2</a></li>
<li id="snavi-mensagens-nova" ><a href="#">Item 1.3</a></li>
</ul>
</li>
<li id="snavi-arquivos" ><a href="#">Item 2</a></li>
</ul>
</li>
<li id="snavi-academico" ><a href="#"><i class="fa fa-envelope"></i><span>About</span><span class="fa fa-angle-right" style="float: right"></span></a>
<ul id="snavi-academico-sub" >
<li id="snavi-academico-avaliacoes" ><a href="#">Contact us</a></li>
<li id="snavi-academico-boletim" ><a href="#">About us</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-history"></i><span>Blog</span></a></li>
<li><a href="#"><i class="fa fa-gears"></i><span>Settings</span></a></li>
</ul>
</div>
</div>
답변 1
jquery 문을 추가하면 되지 않을까요!
<script>
(function($) {
$(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back");
})(jQuery);
</script>
답변 고맙습니다. 말씀하신데로 해보니 닫힌 상태로 로딩이 되네요. 그런데 열고 닫고 두번 했더니
사이드바는 열려있는데 닫혀있을때처럼 visible이 hidden 상태의 위치로 이동해 있네요 ㅎ ㅠㅠ
산넘어 산입니다. 한번 더 뚝딱거려보고 안되면 다른 소스로 교체해야겠습니다.
답변 정말 고맙습니다. 시원한 주말 보내십시오 :)
답변을 작성하시기 전에 로그인 해주세요.
