あなたの生活をちょっと豊かにするLIFE STYLEマガジン【WEBLEDGE(ウェブレッジ)】

コピペでできる!スティンガーのスマホメニューを上部に固定する方法

   

smart-menu

最近はスマートフォン向けに縦長のサイトが増えています。特にブログなんかだとサイドバーはメインカラムの下に付いてくるのでより長くなる。

そんなときにスマートフォンのメニューが固定されていれば便利ですよね?

ということで今回はスマートフォンのメニューを上部に固定する方法をご紹介します。スティンガーの方はコピペで出来るはずなので、ぜひ参考にしてください。

スポンサーリンク

スティンガーでスマートフォンのメニューを上部に固定する方法。

CSSだけで出来ます。

まずはヘッダーを探しましょう。

smart-menu

Google Chromeの「要素の検証」で見てみると一発でわかります。僕のサイトはid=”smaNavi”となっているようですね。スティンガー6ではid=”s-navi”となっています。

これを上部に固定します。まずはCSSコードをお見せします。

こんな感じ。上のコードはスティンガー6,スティンガー7のstyle.cssの一番下にコピペで動作出来ます。

さて、ざっくりとした説明ですが、固定といえばposition:fixed;が思い付くとは思うのですが、これって結構動作がややこしくて初めてだと厄介に感じます。

width:100%はもちろんですが、top:0; left:0; とかをわすれる方は非常に多いです。ここがないとwrapperのpaddingに合わせて100%になってしまうので左右に隙間が出来てしまいます。

この部分はstinger7でメニューボタンを押した時に表示される部分とヘッダーに隙間が出来てしまうので、それをなくしています。

 

今回はヘッダーの高さが50pxだったのでwrapperには padding-top:50px; を付けました。ヘッダーの高さを70pxなんかにしたいときはこのpaddingの部分もそれに合わせて変更してあげてください。

また、ドロップダウンしたときのメニューの編集などはCSSをいじってあげてくださいね!

次回記事の予告!

塗る!iPhoneの画面フィルムがきになる!実際に使ってみた

↓↓気になる方は登録を!

 - Web知識, wordpress , , , ,

PAGE TOP