左側に表示するナビゲーションメニューについて調べたときに参考にしたサイト

ナビゲーションのメニューがまとまっているサイトです。

http://photoshopvip.net/97481

こういったサイトはよく見ます。とても助かりますね。

この中で使えそうだなと思ったものを紹介したいと思います。

まずはこれです。

https://codepen.io/MrsColombo/pen/mEeQwy

htmlがきれいで、templateの構文を使ってforでリストを生成できそうだと思った
cssで書かれているので、scssに直しやすい
jsが複雑じゃない

もちろん、少し修正は必要ですが、少ない工数できれいなメニューを作れそうです。 (左側に固定するメニューではないようで残念です…)

明るいサイトに合いそうです。

どんどん紹介します。

これですが、見た目はよいですが、少し片手落ちだと思いました。

https://codepen.io/maggiben/pen/rCIFu

クリックした際に、右側の矢印がアニメーションされない。つまり、なんであるのかわからないです。

このくらいならcssを追加して対応できそうです。

リストがabsolute指定されているので、要件によっては少し修正が必要かもしれません。

fixedではないということは、スクロール時に残らないということです。

スクロールするとリストが途切れているように見えてしまいます。

参考にする場合はcssの変更が必要そうですね。

いいかな？と思いましたがコードを見たら大変そうだったやつです。

https://codepen.io/andytran/pen/rsegt

haml(htmlではない)で書かれているので、htmlに直したほうが良いでしょう。 hamlで書きたい場合はそのままで無問題

ほとんどclassやidを使っていないので、独自定義するスタイルに影響しそうです。 (reset.scssとか、css フレームワークとか)

↓のように、タグにスタイルを入れているので、ページ内でリストを使っている場合は影響しそうです。（許容範囲内かな?）

nav ul li a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  transition: 0.2s linear;
  border-left: 2px solid transparent;
}
nav ul li a:hover {
  background: #fff;
  padding-left: 20px;
  border-left: 2px solid #1abc9c;
  color: #1abc9c;
}