jquery - 我可以在 CSS 中制作 Off-Canvas 滑出式菜单吗？

Question

我想制作一个 Canvas 外菜单滑过菜单。我找到了一个很好的示例，但它使用 SCSS，是否可以改用 CSS 创建完全相同的示例？

Codepen demo here:

<div data-off-canvas="true">
<div class="off-canvas-menu">
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
  </ul>
</div>

<div id="off-body" class="container-fluid">
  <div class="container-inner">
    <div class="container-content">

      <button type="button" class="btn btn-primary btn-sm" data-toggle="off-canvas" data-target="#off-body">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <h1 class="page-header">
        <i class="glyphicon"></i> Simple Off-Canvas 
      </h1>


[data-off-canvas="true"],
.container-fluid,
.container-inner,
.container-info {
 height: 100%;
}

.container-inner {
 display: table;
 width: 90%;
 margin-left: auto;
 margin-right: auto;
}

.container-content {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}

.page-header {
 font-family: "Bitter";
 font-weight: bold;
 font-size: 64px;
 letter-spacing: -1px;
 border-bottom: 0 none;
 text-shadow: 0 2px 8px darken(#05bb0e, 10%);
}

p.lead {
 font-weight: 300;
}

*:focus { outline: 0 none !important; }

[data-off-canvas="true"] {
 height: 100%;

 &.active {
  overflow-x: hidden;
 }
}

.col-xs-12 > .btn {
 margin-top: 15px;
 padding-left: 8px;
 padding-right: 8px;
}

.icon-bar {
 display: block;
 clear: both;
 width: 23px;
 height: 4px;
 margin-top: 2px;
 margin-bottom: 2px;
 background-color: #fff;
}

.off-canvas-menu {
 @include transition(left 155ms ease-out);
 position: fixed;
 top: 0;
 z-index: 100;
 left: -250px;
 width: 250px;
 height: 100%;
 padding: 10px;
 box-shadow: -1px 0 1px 0 #313131 inset;
 border-right: 1px solid #000;
 background-color: #191919;

 &.active {
  @include transition(left 155ms ease);
  left: 0;
 }
}

.off-canvas-target {
 @include transition(transform 150ms ease);
 @include translate(0, 0);

&.active {
 @include transition(transform 150ms ease);
 @include translate(250px, 0);
 }
}

+function ($) { 'use strict'; 

var OffCanvas = function (element, options) {
this.element = (element) ? element : '[data-toggle="off-canvas"]';
this.options = (options) ? options : this.defaults;

return this;
};

OffCanvas.defaults = {};

OffCanvas.prototype.engage = function () {
var $target = $($(this.element).data('target'));

$target.addClass('off-canvas-target');

$(this.element).on('click', function (event) {
  var offCanvas    = '[data-off-canvas=true]',
      slideTarget  = $(this).data('target'),
      slideMenubar = '.off-canvas-menu';

  event.preventDefault();

  $(offCanvas).toggleClass('active');
  $(slideTarget).toggleClass('active');
  $(slideMenubar).toggleClass('active');

 });
};

Answer 1

代码笔中的 CSS 部分有一个“查看已编译”按钮，它将 SCSS 转换为 CSS。