DESIGN SAMPLE LISTHTML5とCSS3で実現出来るサンプルです

オーバーレイナビのサンプル

下記のボタンをクリックすると各デモページにジャンプします。デモページ右上のメニューボタンをクリックすると動作確認できます。

動きのあるプルダウンメニュー

マウスオーバーで画像切り替え

動きのあるナビゲーション

スライドナビゲーション

タブメニュー ①

タブで表示するコンテンツを切り替えるメニューのサンプルです。

img

ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。

img

ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。

img

ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。

img

ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。

img

ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。

img

ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。

20XX.00.00
ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。
20XX.00.00
ダミーの文章です。ダミーの文章です。
20XX.00.00
ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。
20XX.00.00
ダミーの文章です。ダミーの文章です。ダミーの文章です。
20XX.00.00
ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。

タブメニュー ②

ボタンで表示するコンテンツを切り替えるメニューのサンプルです。

img
img
img
img
img
img
img
img
img
img
img
img
img
img
img