スライドメニュー「Sidr」にアイコンを追加 (レスポンシブ)
2015年2月28日
Categories | ホームページ
スライドメニュー「Sidr」の最終カスタマイズ。
closeにだけですが、アイコンを追加しました。
スライドメニューを開いた時、どのボタンで閉じるか戸惑いそうなので、
アイコン追加して目立たせた。どっかのサイトから貰っていたアイコンをSidr用に加工。
必要ならばコピペして使って下さい。
参考まで(CSS)
.sidr-class-close a { background:url(../images/close.png) no-repeat; background-position:11px 15px; } .sidr-class-close a:hover { background: #00ffff url(../images/close.png) no-repeat; background-position:11px 16px; }
以上
※ 最後の最後になりましたが、スマホ(アンドロイド)で検証してみたら、
いけてないことに気付きました。
スライドメニューを表示させ閉じるボタンをすると、画面サイズが固定され、
縦で使っていたスマホを横にしてみると、縦のサイズが依存されてしまう。
再読み込みすると元に戻るけど、これってブラウザによって違いがあるみたいだ。