CSS中的响应式下拉菜单

huangapple
go评论63阅读模式
英文:

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 === &#39;block&#39; ? &#39;none&#39; : &#39;block&#39;;
}
document.addEventListener(&#39;click&#39;, function(event) {
var dropdown = document.getElementById(&#39;introduccion-dropdown&#39;);
var trigger = document.querySelector(&#39;.dropdown&#39;);
if (!trigger.contains(event.target)) {
dropdown.style.display = &#39;none&#39;;
}
});

<!-- language: lang-css -->

@import url(&#39;font-sets.css&#39;);
@import url(&#39;common.css&#39;);
/* 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: &quot;&quot;;
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 -->

&lt;div class=&quot;button-stack&quot;&gt;
&lt;li class=&quot;dropdown&quot;&gt;
&lt;button type=&quot;submit&quot; class=&quot;card&quot; onclick=&quot;toggleDropdown(&#39;introduction-dropdown&#39;)&quot;&gt;
&lt;div class=&quot;card-content&quot;&gt;
&lt;h2 class=&quot;card-title&quot;&gt;Introduccion a Haskell&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;letter&quot;&gt;1&lt;/span&gt;
&lt;/button&gt;
&lt;ul class=&quot;dropdown-content&quot; id=&quot;introduction-dropdown&quot;&gt;
&lt;li&gt;
&lt;form action=&quot;/home&quot; method=&quot;post&quot;&gt;
&lt;input type=&quot;hidden&quot; name=&quot;lesson_id&quot; value=&quot;1&quot;&gt;
&lt;button type=&quot;submit&quot; class=&quot;card lesson-card&quot;&gt;
&lt;div class=&quot;card-content&quot;&gt;
&lt;h2 class=&quot;card-title&quot;&gt;Titulo de leccion&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;number&quot;&gt;1.1&lt;/span&gt;
&lt;/button&gt;
&lt;/form&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;form action=&quot;/home&quot; method=&quot;post&quot;&gt;
&lt;input type=&quot;hidden&quot; name=&quot;lesson_id&quot; value=&quot;1&quot;&gt;
&lt;button type=&quot;submit&quot; class=&quot;card lesson-card&quot;&gt;
&lt;div class=&quot;card-content&quot;&gt;
&lt;h2 class=&quot;card-title&quot;&gt;Titulo de leccion&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;number&quot;&gt;1.2&lt;/span&gt;
&lt;/button&gt;
&lt;/form&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;form action=&quot;/home&quot; method=&quot;post&quot;&gt;
&lt;input type=&quot;hidden&quot; name=&quot;lesson_id&quot; value=&quot;1&quot;&gt;
&lt;button type=&quot;submit&quot; class=&quot;card lesson-card&quot;&gt;
&lt;div class=&quot;card-content&quot;&gt;
&lt;h2 class=&quot;card-title&quot;&gt;Titulo de leccion&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;number&quot;&gt;1.3&lt;/span&gt;
&lt;/button&gt;
&lt;/form&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;form action=&quot;/home&quot; method=&quot;post&quot;&gt;
&lt;input type=&quot;hidden&quot; name=&quot;test_id&quot; value=&quot;1&quot;&gt;
&lt;button type=&quot;submit&quot; class=&quot;card test-card&quot;&gt;
&lt;div class=&quot;card-content&quot;&gt;
&lt;h2 class=&quot;card-title&quot;&gt;Test&lt;/h2&gt;
&lt;h3 class=&quot;card-subtitle&quot;&gt;Temas del test&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;letter&quot;&gt;1.A&lt;/span&gt;
&lt;/button&gt;
&lt;/form&gt;
&lt;/li&gt;
&lt;/ul&gt;  
&lt;/li&gt;
&lt;div class=&quot;items-below-dropdown&quot;&gt;
&lt;li&gt;
&lt;button type=&quot;submit&quot; class=&quot;card&quot;&gt;
&lt;div class=&quot;card-content&quot;&gt;
&lt;h2 class=&quot;card-title&quot;&gt;Funciones&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;letter&quot;&gt;2&lt;/span&gt;
&lt;/button&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;button type=&quot;submit&quot; class=&quot;card&quot;&gt;
&lt;div class=&quot;card-content&quot;&gt;
&lt;h2 class=&quot;card-title&quot;&gt;Monadas&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;letter&quot;&gt;3&lt;/span&gt;
&lt;/button&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;button type=&quot;submit&quot; class=&quot;card&quot;&gt;
&lt;div class=&quot;card-content&quot;&gt;
&lt;h2 class=&quot;card-title&quot;&gt;Functores&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;letter&quot;&gt;4&lt;/span&gt;
&lt;/button&gt;
&lt;/li&gt;
&lt;/div&gt;  
&lt;/div&gt;

<!-- 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 === &#39;block&#39; ? &#39;none&#39; : &#39;block&#39;;
}
document.addEventListener(&#39;click&#39;, function(event) {
var dropdown = document.getElementById(&#39;introduccion-dropdown&#39;);
var trigger = document.querySelector(&#39;.dropdown&#39;);
if (!trigger.contains(event.target)) {
dropdown.style.display = &#39;none&#39;;
}
});

<!-- language: lang-css -->

@import url(&#39;font-sets.css&#39;);
@import url(&#39;common.css&#39;);
/* 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: &quot;&quot;;
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 -->

&lt;div class=&quot;button-stack&quot;&gt;
&lt;li class=&quot;dropdown&quot;&gt;
&lt;button type=&quot;submit&quot; class=&quot;card&quot; onclick=&quot;toggleDropdown(&#39;introduction-dropdown&#39;)&quot;&gt;
&lt;div class=&quot;card-content&quot;&gt;
&lt;h2 class=&quot;card-title&quot;&gt;Introduccion a Haskell&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;letter&quot;&gt;1&lt;/span&gt;
&lt;/button&gt;
&lt;ul class=&quot;dropdown-content&quot; id=&quot;introduction-dropdown&quot;&gt;
&lt;li&gt;
&lt;form action=&quot;/home&quot; method=&quot;post&quot;&gt;
&lt;input type=&quot;hidden&quot; name=&quot;lesson_id&quot; value=&quot;1&quot;&gt;
&lt;button type=&quot;submit&quot; class=&quot;card lesson-card&quot;&gt;
&lt;div class=&quot;card-content&quot;&gt;
&lt;h2 class=&quot;card-title&quot;&gt;Titulo de leccion&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;number&quot;&gt;1.1&lt;/span&gt;
&lt;/button&gt;
&lt;/form&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;form action=&quot;/home&quot; method=&quot;post&quot;&gt;
&lt;input type=&quot;hidden&quot; name=&quot;lesson_id&quot; value=&quot;1&quot;&gt;
&lt;button type=&quot;submit&quot; class=&quot;card lesson-card&quot;&gt;
&lt;div class=&quot;card-content&quot;&gt;
&lt;h2 class=&quot;card-title&quot;&gt;Titulo de leccion&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;number&quot;&gt;1.2&lt;/span&gt;
&lt;/button&gt;
&lt;/form&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;form action=&quot;/home&quot; method=&quot;post&quot;&gt;
&lt;input type=&quot;hidden&quot; name=&quot;lesson_id&quot; value=&quot;1&quot;&gt;
&lt;button type=&quot;submit&quot; class=&quot;card lesson-card&quot;&gt;
&lt;div class=&quot;card-content&quot;&gt;
&lt;h2 class=&quot;card-title&quot;&gt;Titulo de leccion&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;number&quot;&gt;1.3&lt;/span&gt;
&lt;/button&gt;
&lt;/form&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;form action=&quot;/home&quot; method=&quot;post&quot;&gt;
&lt;input type=&quot;hidden&quot; name=&quot;test_id&quot; value=&quot;1&quot;&gt;
&lt;button type=&quot;submit&quot; class=&quot;card test-card&quot;&gt;
&lt;div class=&quot;card-content&quot;&gt;
&lt;h2 class=&quot;card-title&quot;&gt;Test&lt;/h2&gt;
&lt;h3 class=&quot;card-subtitle&quot;&gt;Temas del test&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;letter&quot;&gt;1.A&lt;/span&gt;
&lt;/button&gt;
&lt;/form&gt;
&lt;/li&gt;
&lt;/ul&gt;  
&lt;/li&gt;
&lt;div class=&quot;items-below-dropdown&quot;&gt;
&lt;li&gt;
&lt;button type=&quot;submit&quot; class=&quot;card&quot;&gt;
&lt;div class=&quot;card-content&quot;&gt;
&lt;h2 class=&quot;card-title&quot;&gt;Funciones&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;letter&quot;&gt;2&lt;/span&gt;
&lt;/button&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;button type=&quot;submit&quot; class=&quot;card&quot;&gt;
&lt;div class=&quot;card-content&quot;&gt;
&lt;h2 class=&quot;card-title&quot;&gt;Monadas&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;letter&quot;&gt;3&lt;/span&gt;
&lt;/button&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;button type=&quot;submit&quot; class=&quot;card&quot;&gt;
&lt;div class=&quot;card-content&quot;&gt;
&lt;h2 class=&quot;card-title&quot;&gt;Functores&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;letter&quot;&gt;4&lt;/span&gt;
&lt;/button&gt;
&lt;/li&gt;
&lt;/div&gt;  
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月21日 02:27:59
  • 转载请务必保留本文链接：https://go.coder-hub.com/76296788.html
  • css
  • dropdown
  • html
  • javascript
  • sinatra
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定