ケーキハウス進化系( RWD編② )

三本ラインのメニューを表示させます。
今回は、fontawesomeを使って、表示させる方法を採用しています。

▶　fontawesome
Font Awesomeのチートシートの中から、メニューアイコンとして使うコードを確認します。
https://fontawesome.com/cheatsheet

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

1	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

フォントを使えるように、CDNを読み込みます。チェックボックスを利用して、メニューボタンを作ります。:checked 疑似クラスを利用して、ユーザーにチェックボックスの状態に基づいたコンテンツの切り替えをする。
参考サイトは、こちら https://developer.mozilla.org/ja/docs/Web/CSS/:checked*/

ハンバーガーメニュー
https://fontawesome.com/icons/bars?style=solid

<!-- メニューボタン配置 -->
<div id="menu">
<input type="checkbox" id="togglenav">
<label for="togglenav" class="togglenav-btn"></label>
<label for="togglenav" class="togglenav-bg"></label>
<!-- メニュー配置 ---->
<nav class="drawer">
	<ul class="drawer-menu">
		<li class="drawer-menu-item"><a href="#">ホーム</a></li>
		<li class="drawer-menu-item"><a href="#">ケーキ一覧</a></li>	
		<li class="drawer-menu-item"><a href="#">店舗紹介</a></li>	
	  <li class="drawer-menu-item"><a href="#">アクセス</a></li>	
  </ul>
	</nav>
 </div>

<li class="drawer-menu-item"><a href="#">ケーキ一覧</a></li>

</ul>

</nav>

</div>

CSS

/* トグルボタン 解説は以下を参考
https://developer.mozilla.org/ja/docs/Web/CSS/:checked*/

#togglenav {
  display: none; }
  #togglenav:checked + .togglenav-btn {
    background-color: #FF0087;
}
  #togglenav:checked + .togglenav-btn:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f00d";
    font-weight: 900;
    font-size: 2em; }
  #togglenav:checked ~ .togglenav-bg {
    pointer-events: auto;
    background-color: rgba(0, 0, 0, 0.3); }

.togglenav-btn {
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 50px;
  height: 50px;
  color: #fff;
  background-color: #FF0087;
  line-height: 50px;
  text-align: center;
  transition: background-color .6s, transform .6s;/*変化にかける時間3秒*/ }

  .togglenav-btn:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f0c9";
    font-weight: 900;
    font-size: 2em; }


/* トグルを押した際の背景 */
.togglenav-bg {
  cursor: pointer;
  position: fixed;
  top: 0px;
  right: 0px;
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: background-color .6s; }



/* ドロワーメニュー */
.drawer {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background-color: white;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform .4s;
  transition: transform .4s; }

    .drawer .drawer-menu .drawer-menu-item {
      font-size: 14px; }
      .drawer .drawer-menu .drawer-menu-item a {
        display: block;
        padding: 1em 2em;
        text-decoration: none;
        transition: background-color 0.4s;
        cursor: pointer;
        color: #333; }
        .drawer .drawer-menu .drawer-menu-item a:hover {
          background-color: #eee;
          color: #666; }
        .drawer .drawer-menu .drawer-menu-item a:before {
          font-family: 'Font Awesome 5 Free';
          content: "\f105";
          font-weight: 900;
          font-size: 1em;
          margin: 0 0.5em 0 0; }

#togglenav:checked ~ .drawer {
  -webkit-transform: translateX(0);
  transform: translateX(0); }

/* トグルボタン解説は以下を参考

https://developer.mozilla.org/ja/docs/Web/CSS/:checked*/

#togglenav {

display: none; }

#togglenav:checked + .togglenav-btn {

background-color: #FF0087;

}

#togglenav:checked + .togglenav-btn:before {

font-family: 'Font Awesome 5 Free';

content: "\f00d";

font-weight: 900;

font-size: 2em; }

#togglenav:checked ~ .togglenav-bg {

pointer-events: auto;

background-color: rgba(0, 0, 0, 0.3); }

.togglenav-btn {

cursor: pointer;

position: fixed;

top: 10px;

right: 10px;

z-index: 2;

width: 50px;

height: 50px;

color: #fff;

background-color: #FF0087;

line-height: 50px;

text-align: center;

transition: background-color .6s, transform .6s;/*変化にかける時間3秒*/ }

.togglenav-btn:before {

font-family: 'Font Awesome 5 Free';

content: "\f0c9";

font-weight: 900;

font-size: 2em; }

/* トグルを押した際の背景 */

.togglenav-bg {

cursor: pointer;

position: fixed;

top: 0px;

right: 0px;

pointer-events: none;

z-index: 1;

width: 100%;

height: 100%;

transition: background-color .6s; }

/* ドロワーメニュー */

.drawer {

z-index: 1;

position: fixed;

top: 0;

left: 0;

width: 300px;

height: 100%;

background-color: white;

-webkit-transform: translateX(-100%);

transform: translateX(-100%);

-webkit-transition: -webkit-transform .4s;

transition: transform .4s; }

.drawer .drawer-menu .drawer-menu-item {

font-size: 14px; }

.drawer .drawer-menu .drawer-menu-item a {

display: block;

padding: 1em 2em;

text-decoration: none;

transition: background-color 0.4s;

cursor: pointer;

color: #333; }

.drawer .drawer-menu .drawer-menu-item a:hover {

background-color: #eee;

color: #666; }

.drawer .drawer-menu .drawer-menu-item a:before {

font-family: 'Font Awesome 5 Free';

content: "\f105";

font-weight: 900;

font-size: 1em;

margin: 0 0.5em 0 0; }

#togglenav:checked ~ .drawer {

-webkit-transform: translateX(0);

transform: translateX(0); }

上から出現させることも可能です。transform:translate()は、移動距離を指定します。

 transform: translateY(-100%)/* transform: translateY*は、垂直での方向*/
 transition: transform .4s;/*transformは、変化にかかる時間です。４秒*/

1 2	transform: translateY(-100%)/* transform: translateYは、垂直での方向/ transition: transform .4s;/transformは、変化にかかる時間です。４秒/

仕上がりサンプルを見る
http://cocohp.com/menu/001/font_awesome/