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

代码语言：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 {
          position: fixed;
          bottom: 5%;
          left: 5%;
        }
        
        #intructions {
          float: left;
          margin-left: 1rem;
          padding: 10px;
          background-color: white;
          border-radius: 1rem;
          box-shadow: 0 0 15px #999;
        }
        
        #intructions > ol {
          margin: 0 0 0 20px;
          padding: 0;
        }
        
        #intructions > ol > li.done {
          text-decoration: line-through;
        }
        
        #mouseIndicator {
          --mouse-accent: #555;
          position: relative;
          height: 85px;
          width: 54px;
          background-color: white;
          border-radius: 2rem;
          overflow: hidden;
          float: left;
          box-shadow: 0 0 15px #999;
        }
        
        /* Mouse button separator */
        #mouseIndicator:after {
          content: "";
          position: absolute;
          top: 0;
          left: 50%;
          background-color: var(--mouse-accent);
          height: 50%;
          width: 2px;
          transform: translate(-1px, 0);
        }
        
        /* Middle mouse button */
        #mouseIndicator:before {
          content: "";
          position: absolute;
          top: 22%;
          left: 50%;
          height: 20%;
          width: 12%;
          background-color: var(--mouse-accent);
          border-radius: 5px;
          transform: translate(-50%, -50%);
        }
        
        #mouseIndicator > .btn {
          float: left;
          height: 50%;
          width: 50%;
          background-color: white;
        }
        
        #mouseIndicator > .btn.pressed {
          background-color: khaki;
        }
        
        scroll-container {
          display: block;
          height: 100vh;
          width: 100%;
          overflow-y: scroll;
          scroll-behavior: smooth;
        }
        
        section {
          height: 100vh;
          overflow: auto;
          display: flex;
        }
        
        section.home {
          background-color: dodgerblue;
          color: white;
        }
        
        section.about {
          background-color: limegreen;
          color: white;
        }
        
        section.more {
          background-color: orangered;
          color: white;
        }
        
        section > .main-content {
          margin: auto;
          text-align: center;
        }
        
        section > .main-content > h2 {
          margin: 0 0 1rem;
          font-weight: 100;
          font-size: 5rem;
          line-height: 1;
        }
        
        section > .main-content > p {
          margin: 0;
          font-weight: 100;
          font-size: 1.5rem;
        }
        
        scroll-page:nth-of-type(1) > section > .main-content > p {
          font-style: italic;
        }
        
        scroll-page:nth-of-type(3) > section > .main-content > p {
          font-weight: normal;
        }
    </style>



</head>

<body>
    <nav>
        <ul>
            <li><a href="#Home">Home</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#More">More</a></li>
        </ul>
    </nav>

    <div id="fixedContent">

        <div id="mouseIndicator">
            <div class="left btn"></div>
            <div class="right btn"></div>
        </div>

        <div id="intructions">
            <ol>
                <li>Press and hold both mouse buttons.</li>
                <li>Hover onto a menu item.</li>
                <li>Release any mouse button!</li>
            </ol>
        </div>

    </div>

    <scroll-container>
        <main>
            <scroll-page id="Home".........完整代码请登录后点击上方下载按钮下载查看