今回のお題は,
サンプル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">
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 ハンバーガーメニューを開いたときの静的なスタイル
.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;
}