リンクじゃない見出しにhoverしてリストを表示するテンプレート

リンクじゃない見出しにhoverしてリストを表示するテンプレート

左カラムにナビゲーションがついた、簡単なHTMLテンプレートです。
職場のHTML/CSSをあまり知らない人が作業するのでわからないところ教えてやってと言われたのですが、要件を聞いたら最新版以外のOperaとかも入っていたので(;´Д`)
組み方教えても実際に表示できなかったら申し訳ないので、自分でもサンプル作ったという経緯。

See the Pen html5/css3 nav template by natsumi (@mayo31) on CodePen.18228

全体表示はこちら(新規タブで開きます)
左カラムナビゲーション付きHTMLテンプレート

左ナビのhover表示にjavascriptを使用していません。
:hoverが効いている要素(見出し)の次のulに対して、displayの値を変えるようにしています。

tabindexを指定している要素は:focusも効くので、それを利用すればナビゲーション以外のコンテンツでも、

  1. 見出しをクリック
  2. そのセクションの本文が表示される
  3. ほかの見出しをクリック
  4. 先に開いたセクションは閉じ、クリックされたセクションが開く
  5. セクション以外の領域(ページ内のどこか)をクリック
  6. セクションが全部閉じる

なんていう見せ方も可能。
CSSのみでアコーディオンリスト2パターンでも紹介したような、ずるずると出てくるアニメーションやフェードイン、フェードアウトを設定してもおもしろいですね(`・ω・´)