読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

実技試験候補

いまいちなハンバーガーメニュー

←ここにハンバーガーがあります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1">
<title>ハンバーガーメニュー</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/script.js"></script>
<body>
<header>
<h1>Toggle Menu</h1>
</header>
<nav>
<button><img src="img/button.png" width="30" height="30" alt="Button"></button>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
</ul>
</nav>
<main>
<p>It’s called a “hamburger” because it it looks roughly like a bun-meat-bun sandwich.
(Others have insisted that it looks much more like a triple hot-dog, but they’ve thus far been unsuccessful in winning the public’s hearts and minds.)</p>
<p>The idea behind the hamburger menu is that you can use it to hide site navigation on smaller screens, showing it only when the user clicks the icon instead of always showing it (which was the previous norm).</p>
</main>
</body>
</html>


《script.js》

$(function(){
  // アイコンをクリック
  $('button').on('click',function(){
    // ul要素を開閉
    $('ul').slideToggle(400);
  });
});


《style.css

html, body, h1, p, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
header, nav, main {
  display: block;
}
ul {
  list-style: none;
}
header h1{
  padding:30px 35px;
  color:#FFF;
  background: #9FD78B;
  font-size: 24px;
}
ul{
  display:none;
}
main{
  display:block;
  padding:20px;
  color:#333;
}
li a:nth-child(-n+3) {
  display: block;
  color: #FFF;
  line-height: 50px;
  padding-left: 20px;
  border-bottom: 2px solid #FFF;
  text-decoration: none;
  background: #569816;
}
button{
  width: 44px;
  height: 44px;
  background: #29B35B;
  border:none;
  border-radius: 6px;
  position:absolute;
  top:25px;
  right:25px;
  cursor:pointer;
}
button:focus{
  outline:none;
}
p {
  margin-bottom:20px;
  line-height: 1.5;
}

サムネール画像をクリックするメイン画像が変更される

<body>
<header>
<h1>Viewer</h1>
</header>
<main>
<figure><img src="img/img1.jpg" alt="Photo"></figure>
<ul>
<li><a href="img/img1.jpg"><img src="img/thumb1.jpg" alt="Photo1"></a></li>
<li><a href="img/img2.jpg"><img src="img/thumb2.jpg" alt="Photo2"></a></li>
<li><a href="img/img3.jpg"><img src="img/thumb3.jpg" alt="Photo3"></a></li>
</ul>
</main>
</body>

タブパネル

<body>
<header>
<h1>Tab</h1>
</header>
<main>
<ul>
<li><a href="#tab1" class="current">01</a></li>
<li><a href="#tab2">02</a></li>
<li><a href="#tab3">03</a></li>
<li><a href="#tab4">04</a></li>
</ul>
<div id="contents">
<div id="tab1">
<p><strong>01</strong></p>
<p>It’s called a “hamburger” because it it looks roughly like a bun-meat-bun sandwich.
(Others have insisted that it looks much more like a triple hot-dog, but they’ve thus far been unsuccessful in winning the public’s hearts and minds.)The idea behind the hamburger menu is that you can use it to hide site navigation on smaller screens, showing it only when the user clicks the icon instead of always showing it (which was the previous norm).</p>
</div>
<div id="tab2">
<p><strong>02</strong></p>
<p>It’s called a “hamburger” because it it looks roughly like a bun-meat-bun sandwich.
(Others have insisted that it looks much more like a triple hot-dog, but they’ve thus far been unsuccessful in winning the public’s hearts and minds.)The idea behind the hamburger menu is that you can use it to hide site navigation on smaller screens, showing it only when the user clicks the icon instead of always showing it (which was the previous norm).</p>
</div>
<div id="tab3">
<p><strong>03</strong></p>
<p>It’s called a “hamburger” because it it looks roughly like a bun-meat-bun sandwich.
(Others have insisted that it looks much more like a triple hot-dog, but they’ve thus far been unsuccessful in winning the public’s hearts and minds.)The idea behind the hamburger menu is that you can use it to hide site navigation on smaller screens, showing it only when the user clicks the icon instead of always showing it (which was the previous norm).</p>
</div>
<div id="tab4">
<p><strong>04</strong></p>
<p>It’s called a “hamburger” because it it looks roughly like a bun-meat-bun sandwich.
(Others have insisted that it looks much more like a triple hot-dog, but they’ve thus far been unsuccessful in winning the public’s hearts and minds.)The idea behind the hamburger menu is that you can use it to hide site navigation on smaller screens, showing it only when the user clicks the icon instead of always showing it (which was the previous norm).</p>
</div>
</div>
</main>
</body>





広告を非表示にする