前回、slicknavの左側にロゴを入れるやり方をご説明しました。

 

で、次回「slicknavのメニューを固定する」とかなんとかいって、違うこと紹介したので
1週飛びますが、ご紹介します。

 

単純にfiexd入れてしまえば、固定はするんですが、問題はスマホのとき。
メニューが長いとスクロールしない！

これは困った…ということでこの記事を備忘録として書きました。

まずは普通に固定します。実装からどうぞ。

 

See the Pen slicknavメニュー固定 by sayuri (@giraffeweb) on CodePen.0

 

css見てもらえばわかりますが、以下だけだとだと単純に固定しただけです。

 

.slicknav_menu {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000000;
}

 

これに以下のcssを追加すれば、メニューがスマホの高さより長くなってもスクロールするようになります。

 

.menu_var_scroll ul {
    height: 100% !important;
    overflow: auto !important;
}

 

実装したものがこちらです。

 

See the Pen 固定してメニューをスクロール by sayuri (@giraffeweb) on CodePen.0

 

ここで躓く人もいるので、ぜひ参考にしてみてください♪

• code,
• css3,
• web