JQuery 내비게이션드로워 푸시 양쪽

jQuery 내비게이션드로워 푸시 양쪽

1 CSS

body { margin:0; }
ul {
  list-style: none;
  margin: 0; padding: 0;
}
.sidenav {
  width: 100%; height: 100%;
  background: #eaecf0;
}
.sidenav li {
  background: #fff;
  border-top: 1px solid #eaecf0;
}
.sidenav a {
  display: block;
  width: 100%;
  padding: 12px;
  text-decoration: none;
  color: #888;
  font-weight: bold;
  font-size: 14px;
}
.navbar {
  display: inline-block;
  width: 100%;
  background: hotpink;
}
.navbar div { float: left; }
.navbar .right { float: right; }
.navbar ul {
  float: left;
  margin: 0; padding: 0;
}
.navbar li {
  display: inline-block;
}
.navbar a {
  display: inline-block;
  text-decoration: none;
  padding: 10px 20px;
  color: white;
}
.navbar a:hover { background: deeppink; }
.content {
  padding: 0 16px;
}
.sidenav {
  position: fixed;
  z-index: -1;
  transition: .4s;
}
.sidenav-left {
  width: 150px;
}
.sidenav-right {
  width: 300px;
  right: 0;
}
#page {
  overflow-x: hidden;
}
#page-center {
  left: 0; top: 0;
  width: 100%; height:100%;
  position: relative;
  transition: .2s;
  background: #fff;
}
#dark {
  left: 0; top: 0;
  width: 100%; height:100%;
  position: absolute;
  background: rgba(0,0,0,0.2);
  z-index: 999;
  display: none;
}

2 HTML

<div id="page">
  <nav class="sidenav sidenav-left">
    <ul>
      <li><a href="#">왼쪽메뉴1</a></li>
      <li><a href="#">왼쪽메뉴2</a></li>
    </ul>
  </nav>
  <nav class="sidenav sidenav-right">
    <ul>
      <li><a href="#">오른쪽메뉴1</a></li>
      <li><a href="#">오른쪽메뉴2</a></li>
    </ul>
  </nav>
  <div id="page-center">
    <div class="navbar">
      <div><a href="#" id="btn-left">☰</a></div>
      <div>
        <ul class="my-navbar">
          <li><a href="#">메뉴1</a></li>
          <li><a href="#">메뉴2</a></li>
        </ul>
      </div>
      <div class="right"><a href="#" id="btn-right">▦</a></div>
    </div>
    <div class="content">
      <h1>훈민정음언해 서문</h1>
      <p>우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨 새로 스물여덟 자를 만드니 사람마다 하여금 쉽게 익혀 매일 쓰기에 편안하게 하고자 할 따름이다.</p>
    </div>
    <div id="dark"></div>
  </div>
</div>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
var go_center = function() {
	$("#dark").hide();
  $("#page-center").css("left", "0");
};
$("#dark").click(go_center);
$("#btn-left").click( function() {
  $("#dark").show();
  $("#page-center").css("left", "150px");
});
$("#btn-right").click( function() {
  $("#dark").show();
  $("#page-center").css("left", "-300px");
});
</script>

4 같이 보기

• jQuery 내비게이션드로워