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

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

ハンバーガーメニュー

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スムーススクロール</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="scroll.css">
<script src="jquery.min.js"></script>
<script>
$(function() {
	$('#menu').hide();
	$('#hum').on('click',function(){
		$('#bar').toggleClass('click');
		$('#menu').slideToggle(300);
	});
	var topBtn = $('#to_top'); //要素を変数に置き換える場合
	topBtn.hide();
	 $(window).scroll(function () {
		  if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
	 });
	
	
	

 // #で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]').on('click',function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
       // 移動先を取得
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
	 
});
</script>
</head>

<body id="top">
<header>
<h1>スムーススクロール</h1>
<p id="hum"><span id="bar"></span></p>
</header>
<nav>
<ul id="menu">
<li><a href="#content1">コンテント1</a></li>
<li><a href="#content2">コンテント2</a></li>
<li><a href="#content3">コンテント3</a></li>
<li><a href="#content4">コンテント4</a></li>
<li><a href="#content5">コンテント5</a></li>
</ul>
</nav>

<div id="content1"><p>コンテント1</p></div>
<div id="content2"><p>コンテント2</p></div>
<div id="content3"><p>コンテント3</p></div>
<div id="content4"><p>コンテント4</p></div>
<div id="content5"><p>コンテント5</p></div>
<p id="to_top"><a href="#top">トップに戻る</a></p>
</body>
</html>
@charset "utf-8";
/* CSS Document */

html,body,h1,p,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}
img {
  border:0;
  vertical-align:bottom;
}

/*レイアウト部分*/
header {
  width:100%;
}
h1 {
  text-align:center;
  padding: 20px 0;
}
nav {
  width:100%;
  border-bottom: 1px solid #222;
}
p#hum {
  display:none;
}
nav ul {
  max-width:960px;
  margin: 0 auto;
  overflow:hidden;
}
nav li {
  width:20%;
  float:left;
  height:50px;
  border-left:1px solid #222;
  box-sizing:border-box;
}
nav li:last-child {
  border-right:1px solid #222;
}
nav li a {
  display:block;
  width:100%;
  line-height:50px;
  text-align:center;
}
div {
  width:100%;
  height:600px;
}
#content1 {
  background:#D343BC;
}
#content2 {
  background:#DDA36B;
}
#content3 {
  background:#D7BC9B;
}
#content4 {
  background:#647E62;
}
#content5 {
  background:#66FF66;
}
#to_top {
  width:50px;
  height:50px;
  position:fixed;
  bottom:40px;
  right:40px;
  background: url(img/to_top.png);
  border-radius:50%;
  opacity:0.6;
}
#to_top a {
  display:block;
  width:100%;
  line-height:50px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
#to_top:hover {
  opacity:1;
}

@media screen and (max-width:767px) {
/*スマホのレイアウト*/
header {
  padding-top:10px;
  overflow:hidden;
}
h1 {
  text-align: left;
  padding: 20px 0 20px 20px;
  font-size:24px;
  font-weight:normal;
  float:left;
}
nav {
  width:100%;
  border-bottom: none;
  position:relative;
}
p#hum {
  display:block;
  width:44px;
  height:44px;
  border:1px solid #222;
  border-radius:4px;
  float:right;
  margin-right:20px;
  position:relative;
}
#bar {
  display:block;
  width:30px;
  height:2px;
  background:#222;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transition:0.2s;
}
#bar:before {
  display:block;
  content:"";
  width:30px;
  height:2px;
  background:#222;
  position:absolute;
  top:-18px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transition:0.3s;
}
#bar:after {
  display:block;
  content:"";
  width:30px;
  height:2px;
  background:#222;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  margin-bottom:-9px;/*firefoxのバグ対応*/
  transition:0.3s;
}
/*クリックしたら.clickがつく*/
#bar.click {
  background:transparent;/*透明になる*/
}
#bar.click:before {
  top:0;
  transform:rotate(45deg);
}
#bar.click:after {
  margin-bottom:0;
  transform:rotate(135deg);
}

nav ul {
  width:100%;
  height:250px;
  margin: 0 auto;
  overflow:hidden;
  position: absolute;
  top:0;
  left:0;
  z-index:100;
}
nav li {
  width:100%;
  float:none;
  height:50px;
  border-left:none;
  box-sizing:border-box;
  border-top:1px solid #222;
  background:#777;
}
nav li:last-child {
  border-right:none;
}
nav li a {
  display:block;
  width:100%;
  line-height:50px;
  text-align:center;
  color:#FFFFFF;
}
}