渐入佳境，精准点击，用户账户下拉菜单的妙用

前端

2023-12-12 01:55:35

Ten Mins Effect】 - 03 用户账户下拉菜单效果

大家好，欢迎来到 10 mins css。今天，我们一起来实现一个用户账户下拉菜单的效果。这个效果非常适合那些需要在网站上提供用户账户相关功能的场景，比如个人中心、登录/注册页面等。

效果预览

首先，我们先来看一下这个效果的预览图：

[图片]

实现步骤

HTML 结构

首先，我们先来搭建一下这个效果的 HTML 结构：

<div class="user-account-dropdown">
  <button class="user-account-dropdown__toggle">
    <img src="/path/to/user-avatar.png" alt="User Avatar">
    <span>用户名</span>
  </button>
  <div class="user-account-dropdown__menu">
    <a href="#">个人中心</a>
    <a href="#">设置</a>
    <a href="#">退出登录</a>
  </div>
</div>

CSS 样式

接下来，我们来写一下这个效果的 CSS 样式：

.user-account-dropdown {
  position: relative;
}

.user-account-dropdown__toggle {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

.user-account-dropdown__toggle:hover {
  background-color: #efefef;
}

.user-account-dropdown__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.user-account-dropdown__menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.user-account-dropdown__menu a:hover {
  background-color: #efefef;
}

JavaScript

最后，我们来写一下这个效果的 JavaScript 代码：

const userAccountDropdownToggle = document.querySelector('.user-account-dropdown__toggle');
const userAccountDropdownMenu = document.querySelector('.user-account-dropdown__menu');

userAccountDropdownToggle.addEventListener('click', () => {
  userAccountDropdownMenu.classList.toggle('active');
});