Sliding Top Menu

SeeKeR5084

License: MIT License

Fork
2
Fav
6
View
5071
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 127 lines
  • HTML 48 lines
  • CSS 37 lines
以前作成したTop Menuを新たに作り変えました。

〔変更箇所〕

・メニューの角丸め。
前回のメニューの角は、画像を使って丸を表現していたために、メニュー自体のロードが遅く、また色の変更も自由にできませんでした。そこで今回はCSSで角丸を再現しました。

・アニメーション
メニューを開く際のアニメーションを変更しました。

・イベント管理方法
特に<body>のonloadイベントに関するお話。前回まではイベントと要素を一対一で対応付けていたため、同じ要素に複数のイベントを付加すると、イベント同士が干渉し合って上手く動作しませんでした。今回イベントの付加方法を変更したため、この問題は解決されました。

・メニュー項目
前回では、メニュー内に表示する項目をJavaScriptで動的に生成してからメニューに挿入していました。今回からは、<body>タグ内に<div>要素をid="nav"で挿入すれば、その<div>自体がメニュー項目になるので、項目の編集、管理がしやすくなりました。

・透明化
前回まで、ページ中の要素がこのメニューに重なってしまうと、zIndexの値によって要素が隠れてしまい、内容を把握し難くなってしまっていました。そこで、収納時だけメニューを半透明にしました。zIndexの値は498。透明度は70%です。
  • Sliding Top Menu
  • Sliding Top Menu

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

SeeKeR5084

Author

URLはウェブログ"The Strange Storage"です。 私の脳内記憶専用の外部ストレージとして使用しています。

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

ItukiItuki:

slideスライド

Forked

sort by