今回のお題は，
サンプル1 CSS3：Hamburger menu
アイコンWebフォントを使う
サンプル1のハンバーガーメニューには，
- bar-chart
- plus
- heart
- envelope
Font Awesomeは，integrityも含んだ<link>要素が加えられる。なお，<script>要素に-prefix-freeを読み込んで，
<head>要素
<script src="lib/prefixfree.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
図1 BootstrapCDNのFont Awesomeのページ
Font Awesomeのアイコンは，<i>要素にclass属性で定める<body>要素の記述は以下のコード1のとおりだ。メニューの開け閉じは<input>要素のチェックボックスtype属性"checkbox"）for属性で，id属性<label>属性のクリックでチェックボックスは切り替えられる。
<i class="fa fa-アイコン名"></i>
コード1 ハンバーガーメニューをつくる<body>要素の定め
<body>要素
<nav class="menu">
<input type="checkbox" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item menu-item-1">
<i class="fa fa-bar-chart"></i>
</a>
<a href="#" class="menu-item menu-item-2">
<i class="fa fa-plus"></i>
</a>
<a href="#" class="menu-item menu-item-3">
<i class="fa fa-heart"></i>
</a>
<a href="#" class="menu-item menu-item-4">
<i class="fa fa-envelope"></i>
</a>
</nav>
ハンバーガーメニューを開いたときの静的スタイル
ハンバーガーメニューを開いたときの静的なスタイルは，class属性"menu-item"）class属性"menu-open-button"）border-radiusプロパティで円形にして，<span>要素）transformプロパティにtranslateX()関数で決めた。なお，z-indexプロパティを高めてある。
図2 ハンバーガーメニューが開いたときのスタイル
コード2 ハンバーガーメニューを開いたときの静的なスタイル
.menu-item, .menu-open-button {
background: darkcyan;
border-radius: 100%;
width: 60px;
height: 60px;
position: absolute;
color: white;
text-align: center;
line-height: 60px;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
}
.hamburger-1 {
transform: translateY(-8px);
}
.hamburger-3 {
transform: translateY(8px);
}
.menu {
position: absolute;
margin: 10px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
}
.menu-item-1 {
transform: translateX(80px);
}
.menu-item-2 {
transform: translateX(160px);
}
.menu-item-3 {
transform: translateX(240px);
}
.menu-item-4 {
transform: translateX(320px);
}
.menu-open-button {
z-index: 2;
cursor: pointer;
}
