ヤバい！

と思ったのは、4月のあたま。

このところ、エディターを変えたりして、
コーディング欲がわいてきた！

なので、サイトの見直しをしていたところ。

ほんと、ヤバい！！

もう 2年もたってたのね。
ただの 2年だったらいいんだけどね・・・。

原型は、5年前。 レスポンシブデザインが言われはじめたころのものだった！

いまさら、状況はかなり進んでいることに気づきました。


リニューアルしよう！


とはいえ、商品ページはもともとシンプルに作ってる。
コンテンツ内容も変化なし。
こちらは、見かけを変えるくらいになっちゃうと思う。


直したいのは、メニューとホームページだ。

現在のはデスクトップ表示をある意味捨ててるので、
もう少しなんとかしたいなぁって思ってます。

まだ思案中。 とりあえず、できるところからいこう！


まずは、メニューです。

あの三本線がハンバーガーっていうのをはじめてしりました。
そして、ぬっっ てでてくるのをドロワーっていうのも・・・。

遅すぎです。

今のも、ドロワーなんだけどね。

今回も、ドロワーにします。


たくさんのソースが公開されていますね。
毎度感謝しかありません。

自分のサイトにあうものを選ぶのが難しい。

悩んだ末に、css ベースのものにしました。




メニューと本体をレイヤーで重ねて本体をすべらせるってものです。

みなさんのアイデアには、毎回感心させられます。
そして勉強になります。


さて、オリジナルのソースをサイトになじませるべく、
どうカスタマイズするのかが問題。

せっかく公開していただいたのに、
不恰好にしてしまっては申し訳がたちません！

結果、とてもがんばりました・・・。
私に実力がないだけだけど。


このメニューの気に入ったところは、
引き戸のように動くこと。

外からでてくるのはよく見るでしょ？

そこがかっこよくて使わせていただきました！


でも、だからこその問題もありました。

本体よりメニューが長いと見えちゃうんですよねー。
実際はコンテンツが入るからめったに見えることはないと思いますが。

もう一つ落とし穴があった。

position を変えて、本体とメニューを別々にスクロールさせたところ、
PC では問題なかったけど、iPhone ですよ・・・てか、Safari？

画面を下に引っぱれるじゃないですか？

見えちゃうんですよ！

あーん。でもこの動きをあきらめたくない。


ということで、むりやり力技だ。

メニューは本体と一緒に動くように。
また、万が一コンテンツが短くても大丈夫なボディに設定しました。

ヘッダーとハンバーガーは天に固定したい。
本体はいいにしても、メニューが画面外に上がっちゃうのが困る。


だったら、見失わなければいいんでしょ？


フロートするトップボタンを、これまた別レイヤーにして、
メニュー開閉時にも現れるように。




大きく目立つようにして誘導できればと。


これで、なんとか！ 思ってた感じになりました！！


すっごく、z-index つけちゃった。

順番まちがうと、ぐだぐだになる危険性大・・・。

関連記事

• リニューアルしなければ！vol.03 【スライダーどうする？】
• リニューアルしなければ！vol.02 【メニューどうする？】
• リニューアルしなければ！vol.01 【一ヶ月間】