HTML+CSS+Query实现二级菜单加注解

可可鸭~

已于 2024-08-22 13:56:11 修改

阅读量451

点赞数 10

分类专栏： html 文章标签： html css 前端

于 2024-08-22 13:50:31 首次发布

本文链接：https://blog.csdn.net/qq_43547255/article/details/141426180

版权

html 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
   
    <link href="./base-v3.0.min.css" type="text/css" rel="stylesheet" />
    <style>
      .mhti_login {
        margin: 0 auto;
        position: relative;
      }
      .mhti_login_tp {
        display: flex;
        align-items: center;
      }
      .mhti_login_tp p {
        font-size: 14px;
        line-height: 74px;
        color: #191919;
        transition: all 0.36s;
      }
      .mhti_login_tp_icon {
        margin-right: 8px;
        width: 24px;
      }
      .mhti_login_tp_arrow {
        width: 13px;
        transition: all 0.36s;
        margin-left: 8px;
      }
      .mhti_login_bt {
        width: 135px;
        border-radius: 5px;
        border-bottom: 1px solid #dfdfdf;
        background: #fbfbfb;
        box-shadow: 0px 4px 10.2px 0px rgba(113, 113, 113, 0.1);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 66px;
        padding: 30px 0;
        display: none;
        z-index: 5;
      }
      .mhti_login_bt a {
        font-size: 14px;
        line-height: 2;
        color: #5a5a5a !important;
        transition: all 0.36s;
        text-align: center;
        display: block;
      }
      .mhti_login_bt li {
        margin-bottom: 20px;
      }
      .mhti_login_bt li:last-child {
        margin-bottom: 0;
      }
      .mhti_login_bt li.active a {
        color: orange !important;
      }
        .mhti_login.act .mhti_login_tp_arrow {
        transform: rotate(180deg);
      }
    </style>
    <script src="./jquery.min.js"></script>
  </head>
  <body>
    <div class="mhti_login">
      <div class="mhti_login_tp">
        <img
          src="https://cdn-www.huorong.cn/Public/Cn/images/com_icon03.svg"
          alt=""
          class="mhti_login_tp_icon"
        />
        <p>登录</p>
        <img
          src="https://cdn-www.huorong.cn/Public/Cn/images/com_icon08.svg"
          alt=""
          class="mhti_login_tp_arrow"
        />
      </div>
      <div class="mhti_login_bt">
        <ul>
          <li><a href="#" target="_blank">企业登录</a></li>
          <li><a href="#" target="_blank">代理商登录</a></li>
        </ul>
      </div>
    </div>
    <script>
      // 登录
      if ($(window).width() > 1199) {
        // 判断窗口宽度大于 1199px 时的行为

        // 鼠标进入登录区域时显示下拉菜单并添加激活类名
        $('.mhti_login').mouseenter(function () {
          $(this).find('.mhti_login_bt').stop().slideDown()
          $(this).addClass('act')
        })

        // 鼠标离开登录区域时隐藏下拉菜单并移除激活类名
        $('.mhti_login').mouseleave(function () {
          $(this).find('.mhti_login_bt').stop().slideUp()
          $(this).removeClass('act')
        })

        // 鼠标悬停在登录下拉菜单项时添加激活类名，并移除兄弟节点的激活类名
        $('.mhti_login_bt li').hover(
          function () {
            $(this).addClass('active').siblings().removeClass('active')
          },
          function () {
            // 鼠标离开时移除激活类名，确保原激活项保留类名
            $(this).removeClass('active')
            $('.mhti_login_bt li.act').addClass('active')
          }
        )
      } else {
        // 判断窗口宽度小于或等于 1199px 时的行为

        // 点击登录区域时切换下拉菜单显示状态，并切换激活类名
        $('.mhti_login').click(function (e) {
          e.stopPropagation()
          $(this).find('.mhti_login_bt').stop().slideToggle()
          $(this).toggleClass('act')
        })

        // 点击页面其他区域时隐藏下拉菜单并移除激活类名
        $('body').click(function () {
          $('.mhti_login').find('.mhti_login_bt').stop().slideUp()
          $('.mhti_login').removeClass('act')
        })
      }
    </script>
  </body>
</html>