Fork
0
Fav
0
View
321
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 23 lines
  • HTML 179 lines
  • CSS 11 lines
#ナビ開閉ボタン

*ナビ開閉ボタンに「.js-nav-toggle」を付与
*ナビ本体に「.js-nav-target」「.is-hide」を付与
*開くと「.is-open」と「.is-hide」がトグルする。


#アコーディオン

*トリガーになるリンクに「.js-list-toggle」を付与
*開閉を示すアイコン等を付けたい場合は「.flg-nav-down」を付与

.flg-nav-upと.flg-nav-downをトグルしている。
cssの:after疑似セレクタを使って文字「▼▲」を入れている。


#cssで設定しておくこと。

*.is-hideはdisplay:none;に設定しておく。
*.is-XXXXの状態を示すクラスはそれ自体に装飾用のスタイルを持たせない。
*状態によって使いわけたい場合は「.div-style.is-open」といった使い方をすること。
  • ナビ開閉ボタン+アコーディオン付きナビ
  • ナビ開閉ボタン+アコーディオン付きナビ

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

ohagi7

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags