オンラインRPGのプレイ日記や攻略メインのブログです。稀にWeb製作記事も更新。

2016年12月7日 レイドボス:コアの鍵開け条件と有効デバフを更新しました。

開閉式メニューをCSSで実装してみた

2012年2月27日 【Web製作メモ

いつかやろうと思っていた、ナビゲーションからのショートカット。
JavaScriptで行う方法は簡単だけど、検索エンジン対策(SEO)も兼ねてCSSによる実装。

スッキリ見せたいヘッダーにオススメで、マウスオーバーしたときだけ表示してくれる。
クリックで開閉することも出来るけど、基本的に次の行動を行うときにクリックするので混乱するかもとマウスオーバーのほうを選択した。

開閉式のナビゲーションリンク

開閉式のナビゲーションリンク

ユーザービリティ向上を目指して

ユーザービリティも少しはよくなったハズ。
PC用エミュレータは人気記事なので、全てのページから一発で飛べるように。
しばらくは記事を書くよりもサイト構成を調整する時間に使います。

CSSの書き方は、普段は表示領域の外(-9999px)に出しておいて、マウスオーバーしたときに親リストと同じ座標(auto)まで戻すようにしてます。
overflowでやる方法もあるけど、ヘッダーから下が全て影響して崩れてしまうため、独立で動作するposition absoluteを採用。

ググれば出てくるけど分からない点があればコメントからどうぞ

記事に対してコメントする

投稿ルール
  • 記事内容に関することであれば特に制限はありません。
  • コメントに画像を添付することも可能です。補足説明として使いたいときなど。
  • 投稿ボタンを押すとすぐにページ反映されます。
    (URLを含むコメントは安全性確保のためストックに保留されます。)

名前 (Name) ※無記名にすると「匿名さん」になります

内容 (Contents)

10MB以下のJPG/GIF/PNG形式の画像をアップロードできます。

  1. ホーム
  2. 雑記
  3. Web製作メモ
  4. 開閉式メニューをCSSで実装してみた
サイトに関するご要望や意見はこちらから

開閉式メニューをCSSで実装してみた

2012年2月27日 20:00

▲ページの先頭へ戻る