我可以在CSS中製作非畫布滑出菜單嗎？

Question

我想在菜單上製作一個畫外菜單。我發現一個很好的例子，但它使用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

在codepen CSS的部分具有按鈕 「編譯視圖」，並轉化到SCSS CSS。