webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

cssだけでハンバーガーメニューを作る

授業ではjqueryを使ってハンバーガーメニューを作成しましたが、jqueryを使わずにcssのみでも作成出来ます。ただ要素の使い方が非常に癖があり、これはこれで解り辛さがあります。
また、細かい要素の指定方法が必要になるので、

「~」で同じ階層の後ろに並ぶ要素に適用
<p>適用されない</p>
<p class="example">適用されない</p>
<p>適用される</p>
<p>適用される</p>

css

example ~ p {
  color: red;
}
「+」で同じ階層のすぐ後の要素にのみ適用
<p>適用されない</p>
<p class="example">適用されない</p>
<p>適用される</p>
<p>適用されない</p>

css

.example + p {
  color: red;
}

などを覚えておきましょう。




cssだけでハンバーガーメニュー

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSSのみでドロワーメニュー</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<style>
html,body,ul,li,p {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}

header {
  background:#0099CC;
  height:70px;
  padding:10px;
  box-sizing:border-box;
}
#nav-input {
  display:none;
}
#nav-open {
  display:block;
  width:50px;
  height:50px;
  background:#0066CC;
  position:relative;
  cursor:pointer;
}
#nav-open span {
  display:block;
  width:30px;
  height:2px;
  border-radius:2px;
  background:#FFFFFF;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transition:0.1s;
}
#nav-open span:before {
  display:block;
  content:"";
  width:30px;
  height:2px;
  border-radius:2px;
  background:#FFFFFF;
  position:absolute;
  top:-22px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transition:0.1s;
}
#nav-open span:after {
  display:block;
  content:"";
  width:30px;
  height:2px;
  border-radius:2px;
  background:#FFFFFF;
  position:absolute;
  top:0;
  right:0;
  bottom:-22px;
  left:0;
  margin:auto;
}
#nav-input:checked ~ #nav-open span {
  transform:rotate(45deg);
}
#nav-input:checked ~ #nav-open span:before {
display:block;
  content:"";
  width:30px;
  height:2px;
  border-radius:2px;
  background:#FFFFFF;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transform:rotate(90deg);
}
#nav-input:checked ~ #nav-open span:after {
  display:none;
}

#nav-close {
  display:block;
  position:fixed;
  top:70px;
  left:0;
  width:100%;
  height:100vh;
  background:rgba(0,0,0,0.6);
  transform:translate(-100%,0);
  transition:0.2s;
}
#nav-input:checked ~ #nav-close {
    transform:translate(0,0);
}
#nav-content {
  width:60%;
  height:100vh;
  background:#FFF;
  position:fixed;
  top:70px;
  left:0;
  transform:translate(-100%,0);
  transition:0.2s;
}
#nav-input:checked ~ #nav-content {
   transform:translate(0,0);
}
#nav-content li {
  height:50px;
  padding:0 14px;
}
#nav-content li a {
  display:block;
  padding:24px 0 10px 20px;
  border-bottom:1px solid #333;
}
.fa-angle-right {
  margin-left:50%;
}
.box p {
  line-height:1.8;
  padding:20px;
}
</style>
</head>

<body>
<header>
<div id="nav-wrapper">
<input id="nav-input" type="checkbox" class="unshown">
<label id="nav-open" for="nav-input"><span></span></label>

<label class="unshown" id="nav-close" for="nav-input"></label>
<nav id="nav-content">
<ul>
<li><a href="#">ボタン1<i class="fas fa-angle-right"></i></a></li>
<li><a href="#">ボタン2<i class="fas fa-angle-right"></i></a></li>
<li><a href="#">ボタン3<i class="fas fa-angle-right"></i></a></li>
<li><a href="#">ボタン4<i class="fas fa-angle-right"></i></a></li>
</ul>
</nav>
</div>
</header>
<div class="box">
<p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。<br>
なぜそんな無闇をしたと聞く人があるかも知れぬ。<br>
別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。<br>
小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)</p>
</div>
</body>
</html>







saruwakakun.com