iT邦幫忙

0

請問純 CSS 下拉選單問題

css

我想用純 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 的做法呢?
謝謝!

2 個回答

4
大河
iT邦新手 5 級 ‧ 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

看更多先前的回應...收起先前的回應...
samjam iT邦新手 4 級 ‧ 2021-09-15 11:05:30 檢舉

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

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

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

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

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

大河 iT邦新手 5 級 ‧ 2021-09-15 22:54:17 檢舉
samjam iT邦新手 4 級 ‧ 2021-09-16 15:13:37 檢舉

謝謝您

2
通靈亡
iT邦研究生 2 級 ‧ 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;
}
samjam iT邦新手 4 級 ‧ 2021-09-15 10:23:42 檢舉

謝謝您的回答
但這樣的效果看起來是文字先被壓扁後慢慢展開
我想要是正常的文字移出來

咖咖拉 iT邦研究生 3 級 ‧ 2021-09-15 13:48:48 檢舉

我覺得用line-height 動態反而是最自然的

我要發表回答

立即登入回答