Asp.net MVC 如何製作Multi-Level Accordion Menu

multi-level accordion menu

samte1968 2019-05-31 14:40:09 ‧ 1376 瀏覽

分享至

我想用JS 跟 CSS 去製作一個Multi-Level Accordion Menu
我希望是多層式的
滑鼠移至選單上會自動展開縮放
我找了許多網路上的資源
找不到能夠自動縮放的
我希望是直立的

謝謝各位

https://codyhouse.co/demo/multi-level-accordion-menu/index.html

看更多先前的討論...收起先前的討論...

dragonH iT邦超人 5 級 ‧ 2019-05-31 16:16:59 檢舉

自動縮放我大概可以猜到是什麼意思

直立是什麼意思

samte1968 iT邦新手 5 級 ‧ 2019-06-03 08:09:19 檢舉

@dragonH 我有附上連結了

dragonH iT邦超人 5 級 ‧ 2019-06-03 11:23:07 檢舉

所以你想要得是這種的

差別在於游標 hover 會自動展開嗎

samte1968 iT邦新手 5 級 ‧ 2019-06-03 14:42:11 檢舉

對的~~我是從網路上的資源找所以我不知道要如何加入那一段程式碼

登入發表討論

直播研討會

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

直播中

1 個回答

dragonH

iT邦超人 5 級 ‧ 2019-06-03 18:45:36

最佳解答

codepen

依照你的需求

大概改一下給你參考

這種好像都是用 checkbox 來控制展開的

用 hover 感覺有點奇怪就是

animation我還沒研究出來怎麼改先註解掉了

.cd-accordion__input:hover ~ .cd-accordion__sub {
    display: block
}
.cd-accordion__input:hover+.cd-accordion__label::after {
    background-position: -32px 0
}

回應 10
分享
檢舉

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

samte1968 iT邦新手 5 級 ‧ 2019-06-04 11:24:16 檢舉

這樣改選到下面的選項他會自動縮起來

dragonH iT邦超人 5 級 ‧ 2019-06-04 11:35:00 檢舉

點一下可以維持展開唷

因為他還是checkbox

samte1968 iT邦新手 5 級 ‧ 2019-06-04 11:39:15 檢舉

QQ有辦法滑鼠放著也可以持續的方法嗎

samte1968 iT邦新手 5 級 ‧ 2019-06-04 11:42:13 檢舉

也可以不一定要這個SOURCE 也可以別的
我只是舉例QQ

samte1968 iT邦新手 5 級 ‧ 2019-06-04 11:42:31 檢舉

上班需要QQ謝謝大大你的幫忙

samte1968 iT邦新手 5 級 ‧ 2019-06-04 13:22:27 檢舉

https://pjchender.blogspot.com/2015/03/jquery_25.html

還有這個方法只是我需要多1-2層

dragonH iT邦超人 5 級 ‧ 2019-06-04 14:25:36 檢舉

抱歉這麼晚回

留言好像都不會通知

所以說這種也可以囉

samte1968 iT邦新手 5 級 ‧ 2019-06-04 14:27:13 檢舉

沒有沒有~要直立的不能往旁邊的

dragonH iT邦超人 5 級 ‧ 2019-06-05 10:29:47 檢舉

這樣的呢

samte1968 iT邦新手 5 級 ‧ 2019-06-05 10:44:50 檢舉

謝謝我就是要這種的

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22203 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙