js+css实现异类菜单幽灵菜单弹出导航分屏效果代码-html代码-BFW代码库

js+css实现异类菜单幽灵菜单弹出导航分屏效果代码

代码语言：html

代码描述：js+css实现异类菜单幽灵菜单弹出导航分屏效果代码，需要同时按下鼠标左键与右键不放，弹出菜单后需要将鼠标移动到菜单选项上松开鼠标左右键，页面滚动到指定的内容。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        :root {
          --distance-from-cursor: 20px;
        }
        
        body {
          margin: 0;
          font-family: "Segoe UI", "Lucida Grande", sans-serif;
        }
        
        nav {
          position: absolute;
          background-color: #999;
          display: inline-block;
          opacity: 0;
          visibility: hidden;
          border-radius: 1rem;
          box-shadow: 0 0 10px -2px #333;
          transform: translate(0);
          transition: transform ease 0.5s, opacity ease 0.5s, visibility ease 0.5s;
          overflow: hidden;
        }
        
        nav.shown {
          opacity: 1;
          visibility: visible;
        }
        
        nav.show-noraml {
          transform: translateX(var(--distance-from-cursor));
        }
        
        nav.show-alt-x {
          transform: translateX(calc(var(--distance-from-cursor) * -1));
        }
        
        nav.show-y {
          transform: translateY(var(--distance-from-cursor));
        }
        
        nav.show-alt-y {
          transform: translateY(calc(var(--distance-from-cursor) * -1));
        }
        
        nav > ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        
        nav > ul > li > a {
          background-color: white;
          color: #333;
          padding: 10px 12px;
          display: block;
          text-decoration: none;
          border-bottom: solid 1px #ddd;
        }
        
        nav > ul > li:last-of-type > a {
          border-bottom: none;
        }
        
        nav > ul > li > a:hover {
          background-color: #eee;
        }
        
        nav:hover + #fixedContent > #intructions > ol > li:nth-last-of-type(2) {
          text-decoration: line-through;
        }
        
        #fixedContent {
          posi.........完整代码请登录后点击上方下载按钮下载查看