CSS3ドロワーメニュー

このサイトのサンプルを自分で理解しやすいように成形した健忘ページ。

ドロワーメニュー

基本骨格

チェックボックスのlabelをオープン用とクローズ用の２つ用意する。

メニュー部分は予め画面外に隠しておき、オープンボタンを押す（チェックが入る）とtransformで０地点へ移動するようにする。再びオープンボタンを押せばチェックが外れてメニューが隠れる。

また、クローズボタンは画面全体であるが、メニュー部分よりはz-indexが下で、メニューが開いた時（チェックが入った時）のみ、背景を付けて、マウス操作（チェックのオフ）を可能にする。

#navTgl:checked + .openで、チェックが入ったらクラスがopenのラベルに対してする操作を、#navTgl:checked ~ .closeで、クラスがcloseのラベルに対してする操作をそれぞれ指定できる。

これがjavascriptでいうonclickとかに相当する。 

<!--html-->
  <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">会社概要</a></li>
      <li><a href="#article2">店舗情報</a></li>
      <li><a href="#article3">アクセスマップ</a></li>
      <li><a href="#article4">採用情報</a></li>
      <li><a href="#article5">企業理念</a></li>
      </ul>
  </nav>

/*css*/
/* :::::: toggle button :::::: */
 
#navTgl {
  display: none;
}
 
label.open,
label.close {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
}
 
.open {
  z-index: 2;
  width: 50px;
  height: 50px;
  color: white;
  background-color: lightSeaGreen;
  font-size: 2em;
  line-height: 50px;
  text-align: center;
  -webkit-transition: background-color .6s, -webkit-transform .6s;
  transition: background-color .6s, transform .6s;
}
 
#navTgl:checked + .open {
  background-color: indianRed;
  -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;
  left: 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;
}

コメントor補足情報orご指摘あればをお願いします。

（件名or本文内でキーワード検索できます）



記事No1588　題名:Re: 管理人tera様　投稿者:Tomokui　投稿日：2021-01-18 13:19:39

再度のご回答ありがとうございました！
> サイトの状況に応じてほかの数値も修正をかける必要もあるかと思います。
>
・・ですよね？
という点に気付いて自分でカスタマイズしてみたらそれとなく形になってます。
　↓
http://ictaga.com/members/okui/

今は上司さんに報告して別の箇所の指摘をいただいてそちらをどうしようか悩み中です。

ですので、一先ず質問の件は解決したってことで。
手前勝手で申し訳ありませんが、これにて打ち止めとさせていただきます。

記事No1584　題名:Re:Tomokui様　投稿者:管理人tera　投稿日：2021-01-15 14:56:12

その部分だけでは無理なので、サイトの状況に応じてほかの数値も修正をかける必要もあるかと思います。
メニュー部分だけを直したいのであれば、2つのleftをrightに変えることに加えて、

#navTgl:checked + .open {
background-color: indianRed;
-webkit-transform: translateX(-250px);
transform: translateX(-250px);

の座標と、

.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;
}

の座標を変える必要があります。

記事No1580　題名:Re:Re:ドロワーのカスタマイズ　投稿者:Tomokui　投稿日：2021-01-14 10:41:59

> 管理人tera様
>
ご回答ありがとうございました。

下記コードを
.menu {
z-index: 1;
position: fixed;
top: 0;
left: 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;
}
↓下記のように修正したところ明らかに挙動がおかしくなってしまいました…。
ご提示の部分だけでは解決に至らないだけということでしょうか？

.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;
}
▼現状ページ参考
http://ictaga.com/members/okui/

画像はメニュー未展開時の物です。

記事No1577　題名:Re:Tomokui様　投稿者:管理人tera　投稿日：2021-01-08 23:01:35

はじめまして。
だいぶ前にメモしたものですが参考になれば幸いです。
右上配置なら、position:fixed;のleft:0;をright:0;にしてから調整してもらうといいかと思います。

記事No1576　題名:ドロワーのカスタマイズ　投稿者:Tomokui　投稿日：2021-01-08 10:26:49

ドロワーの実装に参考にさせていただきました！
まとめありがとうございました！

クリックするボタンの己は右に移動できたんですが表示されるメニューも右に移動したい場合何処の数値を弄れば良いんでしたっけ？
下記は現在制作中のページです（仮アップ中の物なので予期せず削除になる可能性があります）！
　↓
http://ictaga.com/members/okui/index.html

  • << 前のページ
  • 次のページ >>
ページトップへ