Contoh Website Membuat Sidebar Slide Modern Style

Diterbitkan Oleh Muaz Ramdany September 05, 2017 Loading... views 4 Komentar

Membuat seperti ini sangatlah mudah cukup dengan teknik pemograman CSS dan jQuery untuk membuat dengan judul di atas.

Di bawah ini adalah contoh kode membuatnya

File index.php
<!DOCTYPE html>
<html>
<head>
 <title>Cara Membuat Sidebar Slide Modern Style</title>
 <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!--bootstrap-CSS-->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  
 <style type="text/css">
 .btn {
  position: relative;
  z-index: 10;
 }
 .left-sidebar h3, 
 .right-sidebar h3 {
  padding-top: 80px;
  color: #fff;
 }
  
 .top-sidebar.slide {
  transform: translateY(0);
 }
 .top-sidebar {
  position: fixed;
  min-height: 60px;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  display: block;
  padding: 0;
  background-color: #2196F3;
  transform: translateY(-60px);
  transform-style: preserve-3d;
  will-change: transform;
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-property: transform;
  z-index: 6;
 }
 
 .left-sidebar.slide {
  transform: translateX(0) !important;
 }
 .left-sidebar {
  position: fixed;
  width: 250px;
  top: 0px;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: block;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #607D8B;
  color: #fff;
  transform: translateX(-260px);
  transform-style: preserve-3d;
  will-change: transform;
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-property: transform;
  transition-property: transform,-webkit-transform;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
 }
 
 .right-sidebar.slide {
  transform: translateX(0) !important;
 }
 .right-sidebar {
  width: 250px;
  height: calc(100vh - -60px);
  position: fixed;
  right: 0;
  top: 0px;
  z-index: 5;
  background: #F44336;
  -webkit-box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.1);
  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transform: translateX(283px);
  transform-style: preserve-3d;
  will-change: transform;
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-property: transform;
  transition-property: transform,-webkit-transform;
  border-top: 1px solid #ddd;
 }
 
 .overlay.active {
  pointer-events: auto;
  opacity: 0.5;
  background-color: rgba(0,0,0,.5);
  visibility: visible;
 }
 .overlay {
  cursor: pointer;
  background-color: rgba(0,0,0,.5);
  opacity: 0;
  transition-property: opacity;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  transition-property: background-color;
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  z-index: 0;
 }
 </style>
</head>
<body>

<div id="js-top-sidebar" class="top-sidebar">
 <h3 class="text-center" style="color: #fff;">Slide Top</h3>
</div>
<div id="js-left-sidebar" class="left-sidebar">
 <h3 class="text-center">Slide Left</h3>
</div>
<div id="js-right-sidebar" class="right-sidebar">
 <h3 class="text-center">Slide Right</h3>
</div>

<div class="container">
 <div style="margin: 180px auto; max-width: 800px; text-align:center;">
  <h3>Cara Membuat Sidebar Slide Modern Style</h3>
  <hr />
  <div class="row">
   <div class="col-md-4">
    <a href="#!" onclick="$.ws.style.leftsidebar();" class="btn btn-primary btn-lg btn-block">Toggle Sidebar Left</a>
   </div>
   <div class="col-md-4">
    <a href="#!" onclick="$.ws.style.topsidebar();" id="js-toggle-top-sidebar" class="btn btn-primary btn-lg btn-block">Toggle Sidebar Top</a>
   </div>
   <div class="col-md-4">
    <a href="#!" onclick="$.ws.style.rightsidebar();" class="btn btn-primary btn-lg btn-block">Toggle Sidebar Right</a>
   </div>
  </div>
  <hr />
  <span class="help-block">2017 Copyrighted by Webme Studio</span>
 </div>
</div>

<div id="js-overlay" class="overlay" onclick="$.ws.style.overlay(this);"></div>

<!--jQuery-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js"></script>
<!--bootstrap-js-->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script type="text/javascript">
$.ws = {};

$.ws.style = {
 overlay : function(e) {
  $(e).removeClass('active');
  
  $('#js-right-sidebar').removeClass('slide');
  $('#js-top-sidebar').removeClass('slide');
  $('#js-left-sidebar').removeClass('slide');
 },
 leftsidebar : function() {
  $('#js-left-sidebar').addClass('slide');
  
  $('#js-right-sidebar').removeClass('slide');
  $('#js-top-sidebar').removeClass('slide');
  $('#js-overlay').addClass('active');
 },
 topsidebar : function() {
  $('#js-top-sidebar').addClass('slide');
  
  $('#js-right-sidebar').removeClass('slide');
  $('#js-left-sidebar').removeClass('slide');
  $('#js-overlay').addClass('active');
 },
 rightsidebar : function() {
  $('#js-right-sidebar').addClass('slide');
  
  $('#js-left-sidebar').removeClass('slide');
  $('#js-top-sidebar').removeClass('slide');
  $('#js-overlay').addClass('active');
 },
}
</script>

</body>
</html>

Atau bisa lihat demo nya secara langsung di bawah ini
Live Demo

Pos Terkait

Komentar Pada `Contoh Website Membuat Sidebar Slide Modern Style`

4 Komentar Pada `Contoh Website Membuat Sidebar Slide Modern Style`

  1. Pakai script dari CDN semua bisa kan ini? kalau gak punya server host kan susah letakin file css bootstrapnya. Gak ada demonya ya.

    ReplyDelete
    Replies
    1. bisa bos asalkan sesuai saja sama yg di atas, kalau soal demo nanti nyusul hehe

      Delete