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

smart-menu

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

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

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

sponsored

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

CSSだけで出来ます。

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

smart-menu

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

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

@media only screen and (max-width: 780px){
nav#s-navi {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 100;
    height: 50px;  
    box-shadow: 0px 1px 2px #ccc;
}
#s-navi dd.acordion_tree {
    background: #fff;
}
dt.trigger {
    padding: 5px 0px;
}
#wrapper {
    padding-top: 50px;
}
}

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

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

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

dt.trigger {
    padding: 5px 0px;
}

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

 

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

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

-ブログ運営
-