semantic实现右侧悬浮按钮点击弹出全屏菜单效果代码-html代码-BFW代码库

semantic实现右侧悬浮按钮点击弹出全屏菜单效果代码

代码语言：html

代码描述：semantic实现右侧悬浮按钮点击弹出全屏菜单效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/semantic.min.css">

    <style>
        /* ======================== Menu mobile: text fade animation ========================  */
        .col-nav-menu {
          position: relative;
          padding: 20px;
          overflow: auto;
        }
        .nav-item {
        	font-size: 30px;
        	padding: 10px;
        	margin-top: 20px;
        	z-index:100;
          display: block;
        	position: relative;
        	opacity: 1;
        	color: transparent;
          text-align: center;
          right: 30%;
          -webkit-transition-property: all;
          -webkit-transition-duration: 1s;
        }
        .nav-item:nth-child(1) {
        	transition-delay: .05s;
        }
        .nav-item:nth-child(2) {
        	transition-delay: .1s;
        }
        .nav-item:nth-child(3) {
        	transition-delay: .15s;
        }
        .open .nav-item {
        	color: black;
        	opacity: 1;
          right: 0%;
        }
        /* ======================== Menu mobile: background colored slides  ========================  */
        .col-nav-layer {
        	display: block;  
        	position:absolute;
        	height: 100%;
          width: 0px;
          opacity: 0;
        	left:0;
        	right:0;
        	top:0;
        	bottom:0;
        }
        .col-nav-layer.a { 
        	background-color: #FF0000;
        	z-index: 99;
          -webkit-transition: all .9s cubic-bezier(0, 1, 0.5, 1);
          transition: all .9s cubic-bezier(0, 1, 0.5, 1);
        }
        .col-nav-layer.b { 
        	background-color: #FFA500;
        	z-index: 98;
        	-webkit-transition: all .3s cubic-bezier(0, 1, 0.5, 1);
          transition: all .3s cubic-bezier(0, 1, 0.5, 1);
        }
        .open .col-nav-layer {
          opacity: 1;
          width: 100%;
        }
        /* ======================== Menu mobile: Hamburger menu icon animation  ========================  */
        a.target-burger {
          margin: 1.125em;
          right: 1.050em;
          top: 1.050em;
          position: fixed;
          display: block;
          -webkit-transition: all 0.5s ease;
          -moz-transition: all 0.5s ease;
          -o-transition: all 0.5s ease;
          transition: all 0.5s ease;
        	z-index: 100;
        	
        }
        /*
        a.target-burger:hover {
          cursor: pointer;
          -webkit-opacity: 0.45;
          -moz-opacity: 0.45;
          opacity: 0.45;
        }*/
        .open a.target-burger ul.buns li.bun {
          -webkit-transform: rotate(45deg) translateZ(0);
          transform: rotate(45deg) translateZ(0);
        }
        .open a.target-burger ul.buns li.bun:last-child {
          -w.........完整代码请登录后点击上方下载按钮下载查看