© STUDIO-colorz All rights reserved.
初心者でも簡単!CSSのみで右側左側実装可能なドロワー教えます。
レスポンシブのデザインに奮闘しているところなのですが、
横からニョキッと出てくるメニュー、よく見かけますよね。
jQueryで実装したりはよく見かけるのですが、
今回私はどうしてもCSSのみで実装したかった!
それは・・・在宅でお仕事しているので、
クライアントのサーバー内への侵入ができないから(T-T)
でも、大丈夫!
サーバー内に入れなくてもCSSのみで実装は可能なのだ!
記述するのはCSSとPHPへの記述のみ
参考にしたのはこちらのサイトです。
【参考URL】
CSS3ドロワーメニュー
http://kanri.nkdesk.com/homepage/sample3.php
こちらサイトには左側のドロワーメニューの方法が記載されています。
右側のドロワーメニューにアレンジしてみましたので、参考にしてみてください。
こちらのコードを表示させたいPHPに記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!— ドロワーメニュー —> <input type="checkbox" id="navTgl"> <label for="navTgl" class="open">≡</label> <label for="navTgl" class="close"></label> <nav class="menu"> <p>menu</p> <ul> <li><a href="#article1">Menu Text</a></li> <li><a href="#article2">Menu Text</a></li> <li><a href="#article3">Menu Text</a></li> <li><a href="#article4">Menu Text</a></li> <li><a href="#article5"><?php get_search_form(); ?></a></li> </ul> </nav> |
CSSはこちらになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
/* :::::: toggle button (right):::::: */ #navTgl { display: none; } label.open, label.close { cursor: pointer; position: fixed; top: 0; right: 0; } .open { z-index: 2; width: 80px; height: 80px; color: white; background-color: #dfbe92; font-size: 3em; text-align: center; -webkit-transition: background-color .6s, -webkit-transform .6s; transition: background-color .6s, transform .6s; } #navTgl:checked + .open { background-color: rgba(0, 0, 0, 0.6); -webkit-transform: translateX(-250px); transform: translateX(-250px); } .close { pointer-events: none; z-index: 1; width: 100%; height: 100%; transition: background-color .6s; } #navTgl:checked ~ .close { pointer-events: auto; background-color: rgba(0,0,0,.3); } /* :::::: drawer menu :::::: */ .menu { z-index: 1; position: fixed; top: 0; right: 0; width: 250px; height: 100%; background-color: rgba(0,0,0,.6); -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform .6s; transition: transform .6s; } #navTgl:checked ~ .menu { -webkit-transform: translateX(0); transform: translateX(0); } .menu p, .menu li a { color: white; } .menu p { text-align: center; } .menu ul { padding: 0; list-style-type:none; } .menu li { border-bottom: 1px solid rgba(255,255,255,.6); font-size: .8em; line-height: 1.4; } .menu li:first-child { border-top: 1px solid rgba(255,255,255,.6); } .menu li a { display: block; padding: 1em 2em; text-decoration: none; transition: background-color .6s; } .menu li a:hover { background-color: black; } |
こちらのサイトもCSSで実装しています。
ぜひ参考にしてみてください。
使いやすそうなサイトを厳選!AIが顔画像を加工しているサイト6選
結婚式の集合写真で目をつむってしまったり、ネクタイが歪んでいたり、昔そういう写真の修正をしていたこともあります。また、少し痩せているように…
コロナで注目されている契約書 ネットで契約書を結ぶ時代【CloudSign – クラウドサイン】
今日は私がお世話になっているオンライン契約書をご紹介致します。 フリーランスでお仕事をする場合、欠かせないのが契約書になってきます…
WEBデザイナーさん必見! おすすめのポートフォリオ【無料WordPressテーマ】
WEBデザイナーさんが自分の作品を見せる時に、 ポートフォリオがまとめられたら見やすいですよね。 私が使ったことのあるテーマから、これか…