ヘッダー再び

スクロールダウンした時に、ヘッダー非表示

スクロールアップした時に、ヘッダーを表示

 

これをぜひとも導入したい。

昨日は、コピペでだめだったので、もう一度丁寧にやろう。

コピペすればOK~!というのは、やはりだめですな。。

あらためて、これに挑戦してみる。

weboook.blog22.fc2.com

 

HTMLからSlimに置換するのが億劫だった。

置換してくれないかなぁー。と思い調べる。

erb2slim.com

 

いやぁ。あるんですな。

素晴らしい。

 

うーん、動かない。

固定表示はされているし・・・

 

ででで、、、できたー!!

Javascriptをちゃんと読み込み出来ていなかった。

 

よっしゃ!これで微調整して進めれる!

デザインの問題発生。

うぅむ・・・ヘッダーの高さを固定

いや、ナビゲーションメニューを上に持ってくることにしよう。

 

ナビメニューのサイズも固定しないと、この固定ヘッダー使えないな。

という事で、サイズを固定しよう。

昨日 vh とか vw設定してたものを一度破棄。

 

よし、微調整終了!これで、ヘッダーメニューを完成としよう。

 

このページだけで、コンテンツを表示したい!

そう思って調べて、便利なコードを発見。

if current_page?(設定したパス) == true

これを用いれば、トップページのみ表示したい場合など、追加できる!!

 

下階層のページに、パンくずリストを追加するぞ!

junk-blog.com

ページタイトルが長くなるので、パンくずリストは横スクロール出来るようにしておきたいね。

と、その前にどうやって各ページのパンくずリストまとめるんだ・・・

 

グーグルで調べまくりだ。そして何らかの答えが見つかる。

 

 

life.hint.jp.net

 

gretel gem使ってパンくずリストの設定をしてみよう。

何か新しい事する前に、現状をPush Push!

 

はい、また適当にしたため、エラーがでましたよっと。

ちゃんと理解しましょうね。俺。

github.com

 

ちゃんと読みましょうね、ドキュメント。

 

No methodのエラーはもう怖くない!

サーバーを再起動で確認だ。
Bundle installした場合は、基本サーバーを再起動だね。

 

うまく行かなかったけど、読み込みはされている。

はて、なぜテキストで出てしまっていたのか。

それは、=で結んでいたからだった。

 

slimでの記載は、==で結ばなきゃだめだという事に気が付き、無事に対応完了!

 

ナビゲーションメニューを一つの管理画面で作って、まとめて管理する事をしたい。

 

qiita.com

 

これ良いまとめだなぁ。

 

と、脱線するのではなく、まずパンくずリストのデザインもちゃんとしないと。

 

パンくずリストの表示ができた・・・!

各ページのパンくずリストを作ろう。

 

ホームをアイコンに変更したいなぁ、どうしたラインだろう。

出来ないなぁ。

 

よし!パンくずリストの追加は、無事に完了!

今日は順調に進んでいるなっ!

 

今日は、あとはパンくずリストを横スクロールをつけるのを導入して終わろう。

俺の携帯で試しに表示したら、めっちゃ文字小さかった・・・
@mediaで微調整は後ほどしよう。

 

パンくずリストのよこスクロール。

まずはコピペで試してガッテン!

 

スクロールの出来たけど、ものすごく微妙。。

よし!できた!

 

今日は、ヘッダーのスクロール、パンくずリストパンくずリストの横並べ表示の3つ完成。

なかなか良いんじゃないっすか!?