_s(Underscores)でヘッダーナビゲーションとバーガーメニューの仲を取り持とう

前回の「_s(Underscores)にバーガーメニューを付けてみよう」の続きです。

 

「_s(Underscores)でヘッダーナビゲーションに凝ってみる」

のヘッダーナビゲーションと組み合わさったことによって、

画面をスクロールしてヘッダーは縮んでいるのに、

バーガーメニューが取り残されるという少し間抜けな状態になりました。

 

「_s(Underscores)でヘッダーナビゲーションに凝ってみる」

の「header-navi.js」を少し応用して、以下のように追記してみました。

ハイライトが追記した箇所です。

 

一定以上スクロールしたり、戻したりすると、

バーガーメニューボタンのクラスに「transform」が追記されたり、

削除されたりするようになっています。

 

続いて、「style.css」に以下の追記をしました。

バーガーメニューボタンのクラスに「transform」が追加・削除されることで、

トップからの位置が変動する(48⇄8)という記述になります。

 

transitionに「!important」が付いているのは、

プラグインの「Responsive Menu」のCSSと競合してしまったので、

仕方なく強制的に適用させました。

 

「!important」を使うのはあまり美しくないし、

負けた感があるので、キライなんですけど…

 

 

 

さて、ここではすんなり書いてますが、

実は書いてから動くまで、2〜3時間ハマってました。

 

完全に行き詰まって、数時間寝かせたら動くようになったっていう…

えーえーきっとブラウザのキャッシュとかでしょーよ。

 

知識が足らなくて探り探りやっている時ほど、

単純なミスに気付かないんですよね。

 

なぜかって自分の記述に自信がないから。

先に「やり方が間違ってるんだ」って思っちゃうんですねぇ。

きっと。

 

日々精進ですw

シェアする

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


コメントする