css实现14种左侧菜单栏边栏弹出方式效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现14种左侧菜单栏边栏弹出方式效果代码，包括滑入顶部揭示、推滑动、反向滑出、旋转推杆、3D旋、转3D、旋转出来、缩小推杆、放大、缩放、旋转、推杆、开门、摔倒、延迟、 3D 旋转。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.min.css">
    <style>

        body {
        	background:#444;
        	color:#48a770;
        	font-weight:300;
        	font-family:'Lato',Calibri,Arial,sans-serif;
        }
        a {
        	text-decoration:none;
        	color:#48a770;
        	outline:none;
        }
        a:hover,a:focus {
        	color:#2c774b;
        	outline:none;
        }
        /* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
        .clearfix:before,.clearfix:after {
        	display:table;
        	content:" ";
        }
        .clearfix:after {
        	clear:both;
        }
        .codrops-header,.codrops-top {
        	font-family:'Lato',Arial,sans-serif;
        }
        .codrops-header {
        	margin:0 auto 3em;
        	padding:3em;
        	text-align:center;
        }
        .codrops-header h1 {
        	margin:0;
        	font-weight:300;
        	font-size:2.625em;
        	line-height:1.3;
        }
        .codrops-header span {
        	display:block;
        	padding:0 0 0.6em 0.1em;
        	font-size:60%;
        	color:#aca89a;
        }
        /* To Navigation Style */
        .codrops-top {
        	width:100%;
        	text-transform:uppercase;
        	font-size:0.69em;
        	line-height:2.2;
        	font-weight:400;
        	background:rgba(255,255,255,0.3);
        }
        .codrops-top a {
        	display:inline-block;
        	padding:0 1em;
        	text-decoration:none;
        	letter-spacing:0.1em;
        }
        .codrops-top a:hover {
        	background:rgba(255,255,255,0.4);
        	color:#333;
        }
        .codrops-top span.right {
        	float:right;
        }
        .codrops-top span.right a {
        	display:block;
        	float:left;
        }
        .codrops-icon:before {
        	margin:0 4px;
        	text-transform:none;
        	font-weight:normal;
        	font-style:normal;
        	font-variant:normal;

        	line-height:1;
        	speak:none;
        	-webkit-font-smoothing:antialiased;
        }
        .codrops-icon-drop:before {
        	content:"\e001";
        }
        .codrops-icon-prev:before {
        	content:"\e004";
        }
        .main {
        	max-width:69em;
        	margin:0 auto;
        }
        .column {
        	float:left;
        	width:50%;
        	padding:0 2em;
        	min-height:300px;
        	position:relative;
        	text-align:right;
        }
        .column:nth-child(2) {
        	box-shadow:-1px 0 0 rgba(0,0,0,0.1);
        	text-align:left;
        }
        .column p {
        	font-weight:300;
        	font-size:2em;
        	padding:0 0 0.5em;
        	margin:0;
        	line-height:1.5;
        }
        button {
        	border:none;
        	padding:0.6em 1.2em;
        	background:#388a5a;
        	color:#fff;
        	font-family:'Lato',Calibri,Arial,sans-serif;
        	font-size:1em;
        	letter-spacing:1px;
        	text-transform:uppercase;
        	cursor:pointer;
        	display:inline-block;
        	margin:3px 2px;
        	border-radius:2px;
        }
        button:hover {
        	background:#2c774b;
        }
        .info {
        	text-align:center;
        	font-size:1.5em;
        	margin-top:3em;
        	clear:both;
        	padding:3em 0;
        	opacity:0.7;
        	color:#aca89a;
        }
        .info a {
        	font-weight:700;
        	font-size:0.9em;
        }
        @media screen and (max-width:46.0625em) {
        	.column {
        	width:100%;
        	min-width:auto;
        	min-height:auto;
        	padding:2em;
        	text-align:center;
        }
        .column p {
        	font-size:1.5em;
        }
        .column:nth-child(2) {
        	text-align:center;
        	box-shadow:0 -1px 0 rgba(0,0,0,0.1);
        }
        }@media screen and (max-width:25em) {
        	.codrops-header {
        	font-size:80%;
        }
        .codrops-top {
        	font-size:120%;
        }
        .codrops-icon span {
        	display:none;
        }
        }
        
        
        *,*:after,*::before {
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        html,body,.st-container,.st-pusher,.st-content {
            height: 100%;
        }
        
        .st-content {
            overflow-y: scroll;
            background: #f3efe0;
        }
        
        .st-content,.st-content-inner {
            position: relative;
        }
        
        .st-container {
            position: relative;
            overflow: hidden;
        }
        
        .st-pusher {
            position: relative;
            left: 0;
            z-index: 99;
            height: 100%;
            -webkit-transition: -webkit-transform 0.5s;
            transition: transform 0.5s;
        }
        
        .st-pusher::after {
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            background: rgba(0,0,0,0.2);
            content: '';
            opacity: 0;
            -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
            transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
        }
        
        .st-menu-open .st-pusher::after {
            width: 100%;
            height: 100%;
            opacity: 1;
            -webkit-transition: opacity 0.5s;
            transition: opacity 0.5s;
        }
        
        .st-menu {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            visibility: hidden;
            width: 300px;
            height: 100%;
            background: #48a770;
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
        }
        
        .st-menu::after {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.2);
            content: '';
            opacity: 1;
            -webkit-transition: opacity 0.5s;
            transition: opacity 0.5s;
        }
        
        .st-.........完整代码请登录后点击上方下载按钮下载查看