英文:
Responsive dropdown menu in CSS
问题
我正在尝试在CSS中实现一个下拉菜单。它几乎完成了,但我需要在下拉菜单下面的项目上移,以便为下拉菜单的项目腾出空间。当我关闭下拉菜单时,我希望项目再次上移,就像在显示下拉菜单之前一样。
以下是我使用的代码:
<!-- 开始代码片段: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function toggleDropdown(id) {
var dropdown = document.getElementById(id);
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}
document.addEventListener('click', function(event) {
var dropdown = document.getElementById('introduccion-dropdown');
var trigger = document.querySelector('.dropdown');
if (!trigger.contains(event.target)) {
dropdown.style.display = 'none';
}
});
<!-- language: lang-css -->
@import url('font-sets.css');
@import url('common.css');
/* 下拉菜单的样式 */
* {
list-style: none;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
left: 49%;
}
.dropdown-content li {
display: block;
}
.items-below-dropdown {
position: relative;
margin-top: 400px; /* 根据下拉菜单的高度调整值 */
}
/* 课程和测试卡片的样式 */
.button-stack {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.card {
background-color: var(--primary-color);
color: var(--text-color);
position: relative;
width: 700px;
height: 113px;
border-radius: 15px;
border: none;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
cursor: pointer;
transition: transform 0.2s;
}
.card:hover {
transform: scale(1.15);
}
.card::before {
content: "";
position: absolute;
top: 10%;
bottom: 10%;
left: 20%;
transform: translateX(-50%);
width: 2px;
background-color: var(--text-color);
}
.card .number,
.card .letter {
position: absolute;
top: 50%;
left: 10%;
transform: translate(-50%, -50%);
font-size: 48px;
font-weight: bold;
}
.card-content {
width: 55%;
padding: 0 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.card-title {
font-size: 25px;
font-weight: bold;
margin-bottom: 10px;
}
.card-subtitle {
font-size: 18px;
color: var(--text-color);
}
.lesson-card {
width: 600px;
height: 90px;
background: var(--primary-color);
color: var(--text-color);
}
.test-card {
width: 600px;
height: 90px;
background: var(--accent-color);
color: var(--text-color);
}
<!-- language: lang-html -->
<div class="button-stack">
<li class="dropdown">
<button type="submit" class="card" onclick="toggleDropdown('introduction-dropdown')">
<div class="card-content">
<h2 class="card-title">Introduccion a Haskell</h2>
</div>
<div class="card-divider"></div>
<span class="letter">1</span>
</button>
<ul class="dropdown-content" id="introduction-dropdown">
<li>
<form action="/home" method="post">
<input type="hidden" name="lesson_id" value="1">
<button type="submit" class="card lesson-card">
<div class="card-content">
<h2 class="card-title">Titulo de leccion</h2>
</div>
<div class="card-divider"></div>
<span class="number">1.1</span>
</button>
</form>
</li>
<!-- 其他下拉项目... -->
</ul>
</li>
<div class="items-below-dropdown">
<!-- 下面的项目... -->
</div>
</div>
<!-- 结束代码片段 -->
我尝试更改margin-top
属性,但无论我是否按下下拉按钮,它只会将项目向下移动。我需要在按下下拉按钮时能够响应的解决方案。也许是一个JavaScript函数,但我不是JavaScript的专家。
英文:
I'm trying to implement a dropdown menu in CSS. It's pretty much done, but I need the items which are below the dropdown to move down so there's room for the dropdown items. And when I close the dropdown menu, I want the items to go up again just as they were before the dropdown was shown.
Here's the code I used:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function toggleDropdown(id) {
var dropdown = document.getElementById(id);
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}
document.addEventListener('click', function(event) {
var dropdown = document.getElementById('introduccion-dropdown');
var trigger = document.querySelector('.dropdown');
if (!trigger.contains(event.target)) {
dropdown.style.display = 'none';
}
});
<!-- language: lang-css -->
@import url('font-sets.css');
@import url('common.css');
/* Styles for the dropdown menu */
* {
list-style: none;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
left: 49%;
}
.dropdown-content li {
display: block;
}
.items-below-dropdown {
position: relative;
margin-top: 400px; /* Adjust the value based on the height of the dropdown menu */
}
/* Styles for the lesson and test cards */
.button-stack {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.card {
background-color: var(--primary-color);
color: var(--text-color);
position: relative;
width: 700px;
height: 113px;
border-radius: 15px;
border: none;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
cursor: pointer;
transition: transform 0.2s;
}
.card:hover {
transform: scale(1.15);
}
.card::before {
content: "";
position: absolute;
top: 10%;
bottom: 10%;
left: 20%;
transform: translateX(-50%);
width: 2px;
background-color: var(--text-color);
}
.card .number,
.card .letter {
position: absolute;
top: 50%;
left: 10%;
transform: translate(-50%, -50%);
font-size: 48px;
font-weight: bold;
}
.card-content {
width: 55%;
padding: 0 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.card-title {
font-size: 25px;
font-weight: bold;
margin-bottom: 10px;
}
.card-subtitle {
font-size: 18px;
color: var(--text-color);
}
.lesson-card {
width: 600px;
height: 90px;
background: var(--primary-color);
color: var(--text-color);
}
.test-card {
width: 600px;
height: 90px;
background: var(--accent-color);
color: var(--text-color);
}
<!-- language: lang-html -->
<div class="button-stack">
<li class="dropdown">
<button type="submit" class="card" onclick="toggleDropdown('introduction-dropdown')">
<div class="card-content">
<h2 class="card-title">Introduccion a Haskell</h2>
</div>
<div class="card-divider"></div>
<span class="letter">1</span>
</button>
<ul class="dropdown-content" id="introduction-dropdown">
<li>
<form action="/home" method="post">
<input type="hidden" name="lesson_id" value="1">
<button type="submit" class="card lesson-card">
<div class="card-content">
<h2 class="card-title">Titulo de leccion</h2>
</div>
<div class="card-divider"></div>
<span class="number">1.1</span>
</button>
</form>
</li>
<li>
<form action="/home" method="post">
<input type="hidden" name="lesson_id" value="1">
<button type="submit" class="card lesson-card">
<div class="card-content">
<h2 class="card-title">Titulo de leccion</h2>
</div>
<div class="card-divider"></div>
<span class="number">1.2</span>
</button>
</form>
</li>
<li>
<form action="/home" method="post">
<input type="hidden" name="lesson_id" value="1">
<button type="submit" class="card lesson-card">
<div class="card-content">
<h2 class="card-title">Titulo de leccion</h2>
</div>
<div class="card-divider"></div>
<span class="number">1.3</span>
</button>
</form>
</li>
<li>
<form action="/home" method="post">
<input type="hidden" name="test_id" value="1">
<button type="submit" class="card test-card">
<div class="card-content">
<h2 class="card-title">Test</h2>
<h3 class="card-subtitle">Temas del test</h3>
</div>
<div class="card-divider"></div>
<span class="letter">1.A</span>
</button>
</form>
</li>
</ul>
</li>
<div class="items-below-dropdown">
<li>
<button type="submit" class="card">
<div class="card-content">
<h2 class="card-title">Funciones</h2>
</div>
<div class="card-divider"></div>
<span class="letter">2</span>
</button>
</li>
<li>
<button type="submit" class="card">
<div class="card-content">
<h2 class="card-title">Monadas</h2>
</div>
<div class="card-divider"></div>
<span class="letter">3</span>
</button>
</li>
<li>
<button type="submit" class="card">
<div class="card-content">
<h2 class="card-title">Functores</h2>
</div>
<div class="card-divider"></div>
<span class="letter">4</span>
</button>
</li>
</div>
</div>
<!-- end snippet -->
I tried changing the margin-top
attribute, but that only moves the items down, no matter if I press the dropdown button or not. I need something that can respond when the dropdown button is pressed. Maybe is a JS function, but I'm no expert at JavaScript
答案1
得分: 0
尝试这个。我刚刚移除了所有的 position: absolute
部分和那个大的 margin-top
。没有添加任何内容,我只是注释掉了一些 CSS 行,我用 /*COMMENTED OUT*/
标记了它们,所以很容易找到。
英文:
Try this. I just removed all the position: absolute
stuff and that big margin-top
. Nothing was added, I only commented out a few lines of CSS, which I marked with /*COMMENTED OUT*/
so it's easy to find.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function toggleDropdown(id) {
var dropdown = document.getElementById(id);
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}
document.addEventListener('click', function(event) {
var dropdown = document.getElementById('introduccion-dropdown');
var trigger = document.querySelector('.dropdown');
if (!trigger.contains(event.target)) {
dropdown.style.display = 'none';
}
});
<!-- language: lang-css -->
@import url('font-sets.css');
@import url('common.css');
/* Styles for the dropdown menu */
* {
list-style: none;
}
.dropdown-content {
display: none;
/*COMMENTED OUT*/
/*position: absolute;*/
min-width: 160px;
z-index: 1;
/*COMMENTED OUT*/
/*top: 70%;
left: 50%;
transform: translate(-50%, -50%);
left: 49%;*/
}
.dropdown-content li {
display: block;
}
.items-below-dropdown {
position: relative;
/*COMMENTED OUT*/
/*margin-top: 400px;*/ /* Adjust the value based on the height of the dropdown menu */
}
/* Styles for the lesson and test cards */
.button-stack {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.card {
background-color: var(--primary-color);
color: var(--text-color);
position: relative;
width: 700px;
height: 113px;
border-radius: 15px;
border: none;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
cursor: pointer;
transition: transform 0.2s;
}
.card:hover {
transform: scale(1.15);
}
.card::before {
content: "";
position: absolute;
top: 10%;
bottom: 10%;
left: 20%;
transform: translateX(-50%);
width: 2px;
background-color: var(--text-color);
}
.card .number,
.card .letter {
/*COMMENTED OUT*/
/*position: absolute;
top: 50%;
left: 10%;
transform: translate(-50%, -50%);*/
font-size: 48px;
font-weight: bold;
}
.card-content {
width: 55%;
padding: 0 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.card-title {
font-size: 25px;
font-weight: bold;
margin-bottom: 10px;
}
.card-subtitle {
font-size: 18px;
color: var(--text-color);
}
.lesson-card {
width: 600px;
height: 90px;
background: var(--primary-color);
color: var(--text-color);
}
.test-card {
width: 600px;
height: 90px;
background: var(--accent-color);
color: var(--text-color);
}
<!-- language: lang-html -->
<div class="button-stack">
<li class="dropdown">
<button type="submit" class="card" onclick="toggleDropdown('introduction-dropdown')">
<div class="card-content">
<h2 class="card-title">Introduccion a Haskell</h2>
</div>
<div class="card-divider"></div>
<span class="letter">1</span>
</button>
<ul class="dropdown-content" id="introduction-dropdown">
<li>
<form action="/home" method="post">
<input type="hidden" name="lesson_id" value="1">
<button type="submit" class="card lesson-card">
<div class="card-content">
<h2 class="card-title">Titulo de leccion</h2>
</div>
<div class="card-divider"></div>
<span class="number">1.1</span>
</button>
</form>
</li>
<li>
<form action="/home" method="post">
<input type="hidden" name="lesson_id" value="1">
<button type="submit" class="card lesson-card">
<div class="card-content">
<h2 class="card-title">Titulo de leccion</h2>
</div>
<div class="card-divider"></div>
<span class="number">1.2</span>
</button>
</form>
</li>
<li>
<form action="/home" method="post">
<input type="hidden" name="lesson_id" value="1">
<button type="submit" class="card lesson-card">
<div class="card-content">
<h2 class="card-title">Titulo de leccion</h2>
</div>
<div class="card-divider"></div>
<span class="number">1.3</span>
</button>
</form>
</li>
<li>
<form action="/home" method="post">
<input type="hidden" name="test_id" value="1">
<button type="submit" class="card test-card">
<div class="card-content">
<h2 class="card-title">Test</h2>
<h3 class="card-subtitle">Temas del test</h3>
</div>
<div class="card-divider"></div>
<span class="letter">1.A</span>
</button>
</form>
</li>
</ul>
</li>
<div class="items-below-dropdown">
<li>
<button type="submit" class="card">
<div class="card-content">
<h2 class="card-title">Funciones</h2>
</div>
<div class="card-divider"></div>
<span class="letter">2</span>
</button>
</li>
<li>
<button type="submit" class="card">
<div class="card-content">
<h2 class="card-title">Monadas</h2>
</div>
<div class="card-divider"></div>
<span class="letter">3</span>
</button>
</li>
<li>
<button type="submit" class="card">
<div class="card-content">
<h2 class="card-title">Functores</h2>
</div>
<div class="card-divider"></div>
<span class="letter">4</span>
</button>
</li>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论