Rails scssでドロップダウンメニューを作ろう!

Rails scssでドロップダウンメニューを作ろう!

Rails scssでドロップダウンメニューを作ろう!

Rails scssでドロップダウンメニューを作ろう! へのコメントはまだありません

エンジニアというものは基本デザインに弱い。Bootstrapを使うと、そこそこ簡単に綺麗なデザインを作ることはできますが、やっぱりCSSの基本をマスターしておかなきゃなと思い、CSSをそこそこ真面目に学習中。あちこちのサイトからカットアンドペーストしても良いのですが、基本を理解をするには、1からコツコツとCSSを手書きするほうが堅いので、そんなスタイルで学習しています。

今回はRailsでデフォルトになっている scssを使って、上辺右寄せ+ドロップダウンありのメニューを作ってみましょう。

scssについては詳しくわかっていないのですが、大雑把にいうと、Railsが実行時にCSSにコンパイルしてくれるもので、CSSと違い、構造のネストや変数が使えたり、何かと便利なやつです。

では、まず完成形のメニューをご紹介。

今回は、下図の黄色く囲んだメニュー部分を実装します。

scssmenu-1

この部分です。

scssmenu-2

まず、ど基本ですが、ページに対してdivを定義し、上辺にぴったりくっつくようにします。

scssmenu-3

htmlはこんな感じ。

では、このHTMLをSCSS(CSS)でぴったり上辺にくっつくようにしてみましょう。

ポイントは 2点。
1つは、bodyのmarginとpaddingを0として、隙間なくコンテンツがうまるようにします。
もう1つは、ul を float:right しているところぐらいでしょうか。

ではULタグの内部に LIタグを追加し、メニューを構築します。ここでのポイントは、ULタグは子供であるLIタグを下方へ下方へと追加するタグであるということです。この基本の動作をCSSで変更して、右へ右へコンテンツを追加していくようにします。

HTML

SCSS

次に メニューのアクティブな要素に色を付け、ホバーした際も色を付けるようにしてみます。

SCSS

$base-color と出てきますが、これが scssの変数機能です。scssの先頭あたりに変数宣言部を作り、scss内部で使う変数を宣言します。ここでは、ベースの色となる変数 $base-colorを宣言します。その変数の値を上記の記述で参照できるということになります。

次に、サブメニューの基本CSS。
ポイントは displayをnoneにしておくこと。サブメニューの文字が折り返してしまうと見栄えが不細工になるので、overflow/whitespaceなどを設定。

トップメニューをホバーした時に、サブメニューが存在すれば、表示します。その部分のSCSSです。
ポイントは displayをblockに変え、positionをabsolute、z-indexをそれなりに大きな値いに変更することです。

おまけです。トップメニューに新着を表すポップアップをつけてみます。

HTML

CSS

なんとか理解出来ましたか?

以下にメニュー部分のHTML全文、SCSS全文を示しておきます。

HTML全文

SCSS全文


About the author:

Tags:

Related Posts

Leave a comment

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Back to Top