請問純 CSS 下拉選單問題

css

samjam 2021-09-14 17:09:54 ‧ 1471 瀏覽

分享至

我想用純 CSS 做下拉選單，不要用 JavaScript，
同時下拉選單不要浮在其他元素上，
而是下拉選單在 transition 的時候要把下方元素往下推。

// HTML
<label for="dropDown">drop down</label>
<input type="checkbox" id="dropDown">
<ul class="menu_list">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
<div class="other">other element</div>

//CSS
label {
    display: block;
    background-color: red;
}

input {
    display: none;
}

input:checked + .menu_list {
    max-height: 100px;
}

.menu_list {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s;
}

.other {
    background-color: gray;
}

這樣寫是可以有效果，
但 input:checked + .menu_list 的 max-height 必須設定固定尺寸，
如果我想要依照內容伸縮，要怎麼做？
或是有其他不是設定 max-height 的做法呢？
謝謝！

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

大河

iT邦新手 3 級 ‧ 2021-09-15 08:43:13

最佳解答

有個好用的 html 標籤，應該能符合您的要求

<details>
    <summary>Drop down</summary>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</details>

<details>
    <summary>Drop down 2</summary>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</details>

details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .3em;
  	transition: .3s;
    box-sizing: border-box;
    margin: .3em 0
}

Codepen:
https://codepen.io/mikuroda4402/pen/ZEyXjVN

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

samjam iT邦新手 3 級 ‧ 2021-09-15 11:05:30 檢舉

謝謝您的回答
我想要慢慢的移出來
而他的 transition 沒有效果ㄝ
另外瀏覽器支援的程度好像不夠
還不是我完美想要的結果
希望還有更好的方式

大河 iT邦新手 3 級 ‧ 2021-09-15 11:43:29 檢舉

可以看看這位國外大佬寫的語法，我覺得他的特效寫得很棒
他是用deatails 去實作的
https://www.youtube.com/watch?v=PQtpZZQU0u0&ab_channel=DesignCourse

samjam iT邦新手 3 級 ‧ 2021-09-15 22:36:17 檢舉

謝謝您，這個很棒。
只是有點擔心瀏覽器支援度不夠，真的要用會有點怕怕的ㄝ。

大河 iT邦新手 3 級 ‧ 2021-09-15 22:54:17 檢舉

除了IE，其他皆有支援
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

samjam iT邦新手 3 級 ‧ 2021-09-16 15:13:37 檢舉

謝謝您

登入發表回應

通靈亡

iT邦高手 1 級 ‧ 2021-09-14 22:32:07

line-height:0→1 + color: 非 transparent → transparent
這樣就不需要設定 max-height
https://codepen.io/ted59438/pen/rNwGaJj

input:checked + .menu_list {
    line-height: 1;
	color: black;
}

.menu_list {
    overflow: hidden;
	color: transparent;
    line-height: 0;
    transition: all 0.5s;
}