開閉式メニューをCSSで実装してみた
いつかやろうと思っていた、ナビゲーションからのショートカット。
JavaScriptで行う方法は簡単だけど、検索エンジン対策(SEO)も兼ねてCSSによる実装。
スッキリ見せたいヘッダーにオススメで、マウスオーバーしたときだけ表示してくれる。
クリックで開閉することも出来るけど、基本的に次の行動を行うときにクリックするので混乱するかもとマウスオーバーのほうを選択した。
この記事の目次
ユーザービリティ向上を目指して
ユーザービリティも少しはよくなったハズ。
PC用エミュレータは人気記事なので、全てのページから一発で飛べるように。
しばらくは記事を書くよりもサイト構成を調整する時間に使います。
CSSの書き方は、普段は表示領域の外(-9999px)に出しておいて、マウスオーバーしたときに親リストと同じ座標(auto)まで戻すようにしてます。
overflowでやる方法もあるけど、ヘッダーから下が全て影響して崩れてしまうため、独立で動作するposition absoluteを採用。
ググれば出てくるけど分からない点があればコメントからどうぞ
