Home > TagScript > html、css、Java

ベクトルドロー・レベルゼロ

CSSで、ボタンを押すと表示されるメニューを作成する

新規作成日 2017-02-08
最終更新日

サイトが、携帯端末からも閲覧されることから、グローバルメニューは、携帯端末から表示される際は、ボタンを押すとメニューが表示される、ボタンに格納するデザインにすると、情報を表示する領域を広く取ることができます。cssで実現する方法を確認します。

まず、最小サイズを想定した、メニューをcssで作成します。

Javascriptを使わずに、cssでメニューを作成しようと思います。

マウスホバーを使用したドロップダウンメニューを使用して、ボタンメニューを作成する

ドロップダウンメニューを使用して、ボタンメニューを作成しようと思います。この方法の問題は、iPhoneで使われているブラウザが、ホバー(カーソルをボタンの上に重ねる)動作に対応していないため、動作しないことです。

ドロップダウンメニューを使用したボタンメニュー

サンプルサイト

トグルボタンを使用して、メニューを作成する

トグルボタンを利用することで、ボタンを押して、メニューを表示・非表示する事ができます。

 

トグルボタンを使用して、メニューを作成する

サンプルページ

参考サイト

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011-2018 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」