HTML + CSS 实现悬浮菜单

文章目录

- - 样式1
  - 样式2

样式1

在这里插入图片描述

<html>

<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; maximum-scale=1; user-scalable=no;">
  <title>TEST</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="apple-mobile-web-app-capable" content="yes">
</head>

<body id="body">
  <div id="app">
    <div class="head_position">
      <div style="width: 90%; text-align: center;">
        <div class="head_title">
          title
        </div>
      </div>
      <div style="width: 10%;" id="menu_icon">
        <button onclick="openMenu()">菜单</button>
        <!-- <img class="head_menu" src="./resources/menu.png" onclick="openMenu()" /> -->
      </div>
    </div>

    <!-- menu -->
    <div>
      <div id="menu" class="menu">
        <div class="menu_title">
          <div class="menu_url" id="menu1" onclick="handleClickMenu('menu1')">1</div>
          <div class="menu_url" id="menu2" onclick="handleClickMenu('menu2')">2</div>
          <div class="menu_url" id="menu3" onclick="handleClickMenu('menu3')">3</div>
        </div>
      </div>
      <!-- 遮罩层 -->
      <div id="menu-back" class="menu-back" onclick="closeMenu()"></div>
    </div>

  </div>

  <script>
    let currentMenu = null
    function handleClickMenu(id) {
      if (currentMenu) {
        currentMenu.setAttribute('class', 'menu_url')
      }

      const menu = document.getElementById(id)
      menu.setAttribute('class', 'menu_url menu_url_blod')
      currentMenu = menu

      closeMenu()
    }

    function openMenu() {
      const menu_icon = document.getElementById('menu_icon')
      var x = menu_icon.getBoundingClientRect().left
      // var y = menu_icon.getBoundingClientRect().top
      const menu = document.getElementById('menu')
      menu.style.display = 'block'
      // 可以在这里计算菜单位置
      menu.style.left = x - 170 + 'px'
      // menu.style.top = y + 'px'

      const menu_back = document.getElementById('menu-back')
      menu_back.style.display = 'block'
    }

    function closeMenu() {
      const menu = document.getElementById('menu')
      menu.style.display = 'none'
      const menu_back = document.getElementById('menu-back')
      menu_back.style.display = 'none'
    }
  </script>
</body>

</html>
<style>
  body {
    margin: 0px;
    width: 100%;
    height: auto;
  }

  .head_position {
    display: inline-flex;
    width: 100%;
    height: auto;
    background-color: #5279BB;
  }

  .head_title {
    line-height: 60px;
    height: auto;
  }

  .head_menu {
    width: 30px;
    height: 30px;
    margin-top: 15px;
  }

  /* menu start*/
  /* 在这里调整菜单样式 */
  .menu {
    width: 200px;
    height: 120px;
    z-index: 50;
    top: 45px;
    position: fixed;
    box-sizing: border-box;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    display: none;
  }

  .menu-back {
    width: 100%;
    z-index: 40;
    top: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    box-sizing: border-box;
    opacity: 1;
    background-color: rgba(0, 0, 0, .55);
    display: none;
  }

  .menu_url {
    display: flex;
    /* 子菜单高度 */
    height: 40px;
    color: #112238;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding-left: 1rem;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
  }

  .menu_url_blod {
    font-size: 18px;
    color: #000;
    background: rgb(36, 203, 153);
  }

  /* menu end */
</style>

样式2

在这里插入图片描述

修改代码

// js
 function openMenu() {
   const menu = document.getElementById('menu')
   menu.style.display = 'block'
   menu.style.left = '0px'

   const menu_back = document.getElementById('menu-back')
   menu_back.style.display = 'block'
 }

// css
 .menu {
   width: 200px;
   height: 100%;
   z-index: 50;
   top: 0;
   position: fixed;
   box-sizing: border-box;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255/var(--tw-bg-opacity));
   display: none;
 }

HTML + CSS 实现悬浮菜单

文章目录

样式1

样式2

悦读