如何使这个下拉菜单出现在点击而不是 hover 上？
[英]How to make this drop down menus appear on click rather than on hover?
问题描述
我正在关注一个关于如何创建这个漂亮的侧边栏的教程，该侧边栏在悬停和淡入元素时会展开，但它有一个下拉菜单，在悬停时也会展开（桌面版），我需要它仅在单击它时展开。
如果您在配置文件和通知菜单项上使用 hover，它们会在悬停时切换，我需要在单击时切换。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--========== BOX ICONS ==========-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<!--========== CSS ==========-->
<link rel="stylesheet" href="assets/css/styles.css">
<title>Responsive sidebar submenus</title>
</head>
<body>
<!--========== HEADER ==========-->
<header class="header">
<div class="header__container">
<img src="https://pruebaapp.ga/wp-content/uploads/2021/03/profile-1-150x150.jpeg" alt="" class="header__img">
<a href="#" class="header__logo">YOUR LOGO</a>
<div class="header__search">
<input type="search" placeholder="Search" class="header__input">
<i class='bx bx-search header__icon'></i>
</div>
<div class="header__toggle">
<i class='bx bx-menu' id="header-toggle"></i>
</div>
</div>
</header>
<!--========== NAV ==========-->
<div class="nav" id="navbar">
<nav class="nav__container">
<div>
<a href="#" class="nav__link nav__logo">
<i class='bx bxs-disc nav__icon' ></i>
<span class="nav__logo-name">Bedimcode</span>
</a>
<div class="nav__list">
<div class="nav__items">
<h3 class="nav__subtitle">Profile</h3>
<a href="#" class="nav__link active">
<i class='bx bx-home nav__icon' ></i>
<span class="nav__name">Home</span>
</a>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='bx bx-user nav__icon' ></i>
<span class="nav__name">Profile</span>
<i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">Passwords</a>
<a href="#" class="nav__dropdown-item">Mail</a>
<a href="#" class="nav__dropdown-item">Accounts</a>
</div>
</div>
</div>
<a href="#" class="nav__link">
<i class='bx bx-message-rounded nav__icon' ></i>
<span class="nav__name">Messages</span>
</a>
</div>
<div class="nav__items">
<h3 class="nav__subtitle">Menu</h3>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='bx bx-bell nav__icon' ></i>
<span class="nav__name">Notifications</span>
<i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">Blocked</a>
<a href="#" class="nav__dropdown-item">Silenced</a>
<a href="#" class="nav__dropdown-item">Publish</a>
<a href="#" class="nav__dropdown-item">Program</a>
</div>
</div>
</div>
<a href="#" class="nav__link">
<i class='bx bx-compass nav__icon' ></i>
<span class="nav__name">Explore</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-bookmark nav__icon' ></i>
<span class="nav__name">Saved</span>
</a>
</div>
</div>
</div>
<a href="#" class="nav__link nav__logout">
<i class='bx bx-log-out nav__icon' ></i>
<span class="nav__name">Log Out</span>
</a>
</nav>
</div>
<!--========== CONTENTS ==========-->
<main>
<section>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>
</section>
</main>
<!--========== MAIN JS ==========-->
<script src="assets/js/main.js"></script>
</body>
我用这个元素制作了一支笔，所以你可以看到它：
2 个解决方案
解决方案1
1 已采纳 2021-03-22 19:27:40
- 替换这个：
/* Show dropdown collapse */
.nav__dropdown:hover {
max-height: 100rem;
}
/* Rotate icon arrow */
.nav__dropdown:hover .nav__dropdown-icon {
transform: rotate(180deg);
}
有了这个：
/* Show dropdown collapse */
.nav__dropdown.open {
max-height: 100rem;
}
/* Rotate icon arrow */
.nav__dropdown.open .nav__dropdown-icon {
transform: rotate(180deg);
}
- 将此添加到 javascript：
const navDropdown = document.querySelectorAll(".nav__dropdown");
for (let i = 0; i < navDropdown.length; i++) {
navDropdown[i].addEventListener("click", () =>
navDropdown[i].classList.toggle("open")
);
}
这是我们得到的：
/*==================== SHOW NAVBAR ====================*/ const showMenu = (headerToggle, navbarId) => { const toggleBtn = document.getElementById(headerToggle), nav = document.getElementById(navbarId); // Validate that variables exist if (headerToggle && navbarId) { toggleBtn.addEventListener("click", () => { // We add the show-menu class to the div tag with the nav__menu class nav.classList.toggle("show-menu"); // change icon toggleBtn.classList.toggle("bx-x"); }); } }; showMenu("header-toggle", "navbar"); /*==================== LINK ACTIVE ====================*/ const linkColor = document.querySelectorAll(".nav__link"); function colorLink() { linkColor.forEach((l) => l.classList.remove("active")); this.classList.add("active"); } linkColor.forEach((l) => l.addEventListener("click", colorLink)); const navDropdown = document.querySelectorAll(".nav__dropdown"); for (let i = 0; i < navDropdown.length; i++) { navDropdown[i].addEventListener("click", () => navDropdown[i].classList.toggle("open") ); }
/*========== GOOGLE FONTS ==========*/ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); /*========== VARIABLES CSS ==========*/:root { --header-height: 3.5rem; --nav-width: 219px; /*========== Colors ==========*/ --first-color: #6923d0; --first-color-light: #f4f0fa; --title-color: #19181b; --text-color: #58555e; --text-color-light: #a5a1aa; --body-color: #f9f6fd; --container-color: #ffffff; /*========== Font and typography ==========*/ --body-font: "Poppins", sans-serif; --normal-font-size: 0.938rem; --small-font-size: 0.75rem; --smaller-font-size: 0.75rem; /*========== Font weight ==========*/ --font-medium: 500; --font-semi-bold: 600; /*========== z index ==========*/ --z-fixed: 100; } @media screen and (min-width: 1024px) {:root { --normal-font-size: 1rem; --small-font-size: 0.875rem; --smaller-font-size: 0.813rem; } } /*========== BASE ==========*/ *, ::before, ::after { box-sizing: border-box; } body { margin: var(--header-height) 0 0 0; padding: 1rem 1rem 0; font-family: var(--body-font); font-size: var(--normal-font-size); background-color: var(--body-color); color: var(--text-color); } h3 { margin: 0; } a { text-decoration: none; } img { max-width: 100%; height: auto; } /*========== HEADER ==========*/.header { position: fixed; top: 0; left: 0; width: 100%; background-color: var(--container-color); box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1); padding: 0 1rem; z-index: var(--z-fixed); }.header__container { display: flex; align-items: center; height: var(--header-height); justify-content: space-between; }.header__img { width: 35px; height: 35px; border-radius: 50%; }.header__logo { color: var(--title-color); font-weight: var(--font-medium); display: none; }.header__search { display: flex; padding: 0.4rem 0.75rem; background-color: var(--first-color-light); border-radius: 0.25rem; }.header__input { width: 100%; border: none; outline: none; background-color: var(--first-color-light); }.header__input::placeholder { font-family: var(--body-font); color: var(--text-color); }.header__icon, .header__toggle { font-size: 1.2rem; }.header__toggle { color: var(--title-color); cursor: pointer; } /*========== NAV ==========*/.nav { position: fixed; top: 0; left: -100%; height: 100vh; padding: 1rem 1rem 0; background-color: var(--container-color); box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1); z-index: var(--z-fixed); transition: 0.4s; }.nav__container { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 3rem; overflow: auto; scrollbar-width: none; /* For mozilla */ } /* For Google Chrome and others */.nav__container::-webkit-scrollbar { display: none; }.nav__logo { font-weight: var(--font-semi-bold); margin-bottom: 2.5rem; }.nav__list, .nav__items { display: grid; }.nav__list { row-gap: 2.5rem; }.nav__items { row-gap: 1.5rem; }.nav__subtitle { font-size: var(--normal-font-size); text-transform: uppercase; letter-spacing: 0.1rem; color: var(--text-color-light); }.nav__link { display: flex; align-items: center; color: var(--text-color); }.nav__link:hover { color: var(--first-color); }.nav__icon { font-size: 1.2rem; margin-right: 0.5rem; }.nav__name { font-size: var(--small-font-size); font-weight: var(--font-medium); white-space: nowrap; }.nav__logout { margin-top: 5rem; } /* Dropdown */.nav__dropdown { overflow: hidden; max-height: 21px; transition: 0.4s ease-in-out; }.nav__dropdown-collapse { background-color: var(--first-color-light); border-radius: 0.25rem; margin-top: 1rem; }.nav__dropdown-content { display: grid; row-gap: 0.5rem; padding: 0.75rem 2.5rem 0.75rem 1.8rem; }.nav__dropdown-item { font-size: var(--smaller-font-size); font-weight: var(--font-medium); color: var(--text-color); }.nav__dropdown-item:hover { color: var(--first-color); }.nav__dropdown-icon { margin-left: auto; transition: 0.4s; } /* Show dropdown collapse */.nav__dropdown.open { max-height: 100rem; } /* Rotate icon arrow */.nav__dropdown.open.nav__dropdown-icon { transform: rotate(180deg); } /*===== Show menu =====*/.show-menu { left: 0; } /*===== Active link =====*/.active { color: var(--first-color); } /* ========== MEDIA QUERIES ==========*/ /* For small devices reduce search*/ @media screen and (max-width: 320px) {.header__search { width: 70%; } } @media screen and (min-width: 768px) { body { padding: 1rem 3rem 0 6rem; }.header { padding: 0 3rem 0 6rem; }.header__container { height: calc(var(--header-height) + 0.5rem); }.header__search { width: 300px; padding: 0.55rem 0.75rem; }.header__toggle { display: none; }.header__logo { display: block; }.header__img { width: 40px; height: 40px; order: 1; }.nav { left: 0; padding: 1.2rem 1.5rem 0; width: 68px; /* Reduced navbar */ }.nav__items { row-gap: 1.7rem; }.nav__icon { font-size: 1.3rem; } /* Element opacity */.nav__logo-name, .nav__name, .nav__subtitle, .nav__dropdown-icon { opacity: 0; transition: 0.3s; } /* Navbar expanded */.nav:hover { width: var(--nav-width); } /* Visible elements */.nav:hover.nav__logo-name { opacity: 1; }.nav:hover.nav__subtitle { opacity: 1; }.nav:hover.nav__name { opacity: 1; }.nav:hover.nav__dropdown-icon { opacity: 1; } }
<:--========== BOX ICONS ==========--> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min:css"> <header class="header"> <div class="header__container"> <img src="https.//pruebaapp.ga/wp-content/uploads/2021/03/profile-1-150x150,jpeg" alt="" class="header__img"> <a href="#" class="header__logo">YOUR LOGO</a> <div class="header__search"> <input type="search" placeholder="Search" class="header__input"> <i class='bx bx-search header__icon'></i> </div> <div class="header__toggle"> <i class='bx bx-menu' id="header-toggle"></i> </div> </div> </header> <.--========== NAV ==========--> <div class="nav" id="navbar"> <nav class="nav__container"> <div> <a href="#" class="nav__link nav__logo"> <i class='bx bxs-disc nav__icon'></i> <span class="nav__logo-name">Bedimcode</span> </a> <div class="nav__list"> <div class="nav__items"> <h3 class="nav__subtitle">Profile</h3> <a href="#" class="nav__link active"> <i class='bx bx-home nav__icon'></i> <span class="nav__name">Home</span> </a> <div class="nav__dropdown"> <a href="#" class="nav__link"> <i class='bx bx-user nav__icon'></i> <span class="nav__name">Profile</span> <i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i> </a> <div class="nav__dropdown-collapse"> <div class="nav__dropdown-content"> <a href="#" class="nav__dropdown-item">Passwords</a> <a href="#" class="nav__dropdown-item">Mail</a> <a href="#" class="nav__dropdown-item">Accounts</a> </div> </div> </div> <a href="#" class="nav__link"> <i class='bx bx-message-rounded nav__icon'></i> <span class="nav__name">Messages</span> </a> </div> <div class="nav__items"> <h3 class="nav__subtitle">Menu</h3> <div class="nav__dropdown"> <a href="#" class="nav__link"> <i class='bx bx-bell nav__icon'></i> <span class="nav__name">Notifications</span> <i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i> </a> <div class="nav__dropdown-collapse"> <div class="nav__dropdown-content"> <a href="#" class="nav__dropdown-item">Blocked</a> <a href="#" class="nav__dropdown-item">Silenced</a> <a href="#" class="nav__dropdown-item">Publish</a> <a href="#" class="nav__dropdown-item">Program</a> </div> </div> </div> <a href="#" class="nav__link"> <i class='bx bx-compass nav__icon'></i> <span class="nav__name">Explore</span> </a> <a href="#" class="nav__link"> <i class='bx bx-bookmark nav__icon'></i> <span class="nav__name">Saved</span> </a> </div> </div> </div> <a href="#" class="nav__link nav__logout"> <i class='bx bx-log-out nav__icon'></i> <span class="nav__name">Log Out</span> </a> </nav> </div> <,--========== CONTENTS ==========--> <main> <section> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit, Incidunt vel illum fuga unde cum? voluptates magni molestias eveniet culpa autem ut, totam veniam. suscipit tempore ullam pariatur est at asperiores,</p> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit, Incidunt vel illum fuga unde cum? voluptates magni molestias eveniet culpa autem ut, totam veniam. suscipit tempore ullam pariatur est at asperiores,</p> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit, Incidunt vel illum fuga unde cum? voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p> </section> </main>
如果您希望在导航关闭时关闭下拉菜单，请将其添加到脚本中：
const main = document.querySelector("main");
main.addEventListener("mousemove", (e) => {
for (let i = 0; i < navDropdown.length; i++) {
navDropdown[i].classList.remove("open");
}
});
解决方案2
0 2021-03-22 19:10:08
.nav:hover {
width: var(--nav-width);
}
改成
.nav.active {
width: var(--nav-width);
}
然后在你的js中，当你点击它时，你在元素上添加class
如何在不使用值的情况下使2个下拉菜单依赖于另一个菜单
[英]How to make 2 drop down menus dependent on another without using values
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.