WordPressテーマ「Grider (tcd015)」

WordPressテーマ「Canvas (tcd017)」

WordPressテーマ「Chill (tcd016)」

© STUDIO-colorz All rights reserved.

20164/8

初心者でも簡単!CSSのみで右側左側実装可能なドロワー教えます。

レスポンシブのデザインに奮闘しているところなのですが、
横からニョキッと出てくるメニュー、よく見かけますよね。

jQueryで実装したりはよく見かけるのですが、
今回私はどうしてもCSSのみで実装したかった!


それは・・・在宅でお仕事しているので、
クライアントのサーバー内への侵入ができないから(T-T)

でも、大丈夫!
サーバー内に入れなくてもCSSのみで実装は可能なのだ!


記述するのはCSSとPHPへの記述のみ

参考にしたのはこちらのサイトです。

【参考URL】
CSS3ドロワーメニュー
http://kanri.nkdesk.com/homepage/sample3.php


こちらサイトには左側のドロワーメニューの方法が記載されています。
右側のドロワーメニューにアレンジしてみましたので、参考にしてみてください。

こちらのコードを表示させたいPHPに記述します。


CSSはこちらになります。


こちらのサイトもCSSで実装しています。
ぜひ参考にしてみてください。


null

関連記事

20181/10

インスタ映えするバレンタインチョコご紹介します。

他の女の子と差をつけたいなら、ぐっと目を引くチョコを選びたいところですよね。 今回はインスタ映えする、女子も惹きつけちゃうバレンタインチョ…

20181/9

ぐっと目を惹く、後藤由香子さん作雛人形が素敵すぎる

今も昔も変わらない、伝統ある雛人形がついに変貌を遂げた!? 雛人形って似たり寄ったり・・・と思っていましたが、 後藤由香子さんによっ…

201710/18

もしもディズニープリンセスが現実に存在したら?

ディズニーのプリンセスたちはとってもキュートに描かれているけど、想像上のキャラクターなだけに現実とはかけ離れているパーツの大きさだったります…

201710/17

今すぐ使えるHalloweenのかわいくておしゃれなイラスト無料素材

Halloweenの雰囲気を作るのに欠かせないのは、かわいくておしゃれなイラスト素材! 無料の素材の中でも厳選して、かわいくておしゃれな、…

201710/16

【2017年版】忘年会の招待状無料テンプレート作りました。

忘年会シーズンに向けて、そろそろ幹事さんが忘年会のプランを練る時期ではないでしょうか。 今回は忘年会の招待状テンプレート作ってみました。 …

ページ上部へ戻る