HTMLとCSSで固定ヘッダー&ハンバーガーメニュー

CSS

画面上部に固定ヘッダーとハンバーガーメニューを表示します。
スマホサイトでは欠かせないテンプレートです。
コピペですぐに実装できますので、ぜひお試しください。

サンプル

See the Pen Untitled by asbgm (@asbgm12) on CodePen.

共通パーツで読み込む場合

外から「header.html」を渡して書く方法は以下の通りです。
複数のページに遷移する場合は編集が発生した際の手間などを考えると共通パーツにして読み込む方が便利です。

ファイル構造

index.html
header.html
css/style.css

index.html

共通パーツを読み込むためのJavaScriptを記述します。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

  <title>タイトル</title>
  <script type="text/javascript">
    //共通パーツ読み込み
    $(function() {
      $("#header").load("header.html");
    });
  </script>
</head>

<body>
  <!---------ヘッダー---------->
  <div id="header"></div>

  <!----------全体---------->
  <div class="site">
  <br><br><br>
    <h1>見出し</h1>
    <p>本文</p>
  </div>

</body>

</html>

header.html

読み込む共通パーツのヘッダーメニューのコードは別ファイルの「header.html」に移動させます。
ファイルの中身は以下のようにし、「index.html」と同階層に設置してください。

<header id="global-head">
  <h1 id="brand-logo"></h1>
</header>
<div id="nav-toggle">
  <div>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<aside id="sidebar">
  <nav id="global-nav">
    <ul>
      <li><a href="./index.html">トップ</a></li>
      <li><a href="./contact.html">コンタクト</a></li>
      <li><a href="./map.html">マップ</a></li>
    </ul>
  </nav>
</aside>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>

<script type="text/javascript">
  (function ($) {
    $(function () {
      $('.sub-menu').on({
        'mouseenter': function () {
          $(this).addClass('is-active');
        },
        'mouseleave': function () {
          $(this).removeClass('is-active');
        }
      });
      $('#nav-toggle,#overlay').on('click', function () {
        $('body').toggleClass('open');
      });
    });
  })(jQuery);
</script>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500&display=swap');
body {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	width: 100%;
	font-size: 16px;
	color: rgb(72, 72, 74);
	background-color: rgb(218, 229, 240);
	margin: 0;
	padding-left: 0;
	padding-right: 0;
	-moz-user-select: none;
	/*Firefox*/
	-webkit-user-select: none;
	/*Safari,Chrome*/
	-ms-user-select: none;
	/*IE*/
	-webkit-touch-callout: none;
	/*Disable Android and iOS callouts*/
	user-select: none;
	/*CSS3*/
}

/*----------全体----------*/
.site {
	padding-left: 20px;
	padding-right: 20px;
}

@media (min-width: 600px) {
	/* タブレットサイズ---横幅が600px以上の場合に適用するスタイル */
	.site {
		padding-left: 80px;
		padding-right: 80px;
	}
}

@media (min-width: 800px) {
	.site {
		padding-left: 170px;
		padding-right: 170px;
	}
}

@media (min-width: 1024px) {
	.site {
		padding-left: 280px;
		padding-right: 280px;
	}
}

@media (min-width: 1200px) {
	.site {
		padding-left: 380px;
		padding-right: 380px;
	}
}

@media (min-width: 1300px) {
	.site {
		padding-left: 430px;
		padding-right: 430px;
	}
}

@media (min-width: 1600px) {
	.site {
		padding-left: 560px;
		padding-right: 560px;
	}
}

@media (min-width: 1800px) {
	.site {
		padding-left: 660px;
		padding-right: 660px;
	}
}

@media (min-width: 1900px) {
	.site {
		padding-left: 680px;
		padding-right: 680px;
	}
}
/*----------全体ここまで----------*/

/*---------ヘッダー---------*/
* {
	margin: 0;
	padding: 0;
}

/*ヘッダー固定*/

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/* ここから */

#global-head {
	position: fixed;
	color: #fff;
	text-align: center;
	z-index: 100;
	width: 100%;
	/*ヘッダー横幅MAX*/
	height: 54px;
	background: rgba(0, 113, 164, 0.9);
	display: -webkit-flex;
	display: flex;
}

#sidebar {
	font-size: 15px;
	padding-top: 120px;
	height: 100%;
	position: fixed;
	color: #fff;
	text-align: center;
	position: fixed;
	top: 0;
	height: 100%;
	width: 400px;
	background: rgb(0, 113, 164);
	-webkit-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
	right: -300px;
	width: 300px;
	padding-top: 60px;
}

#global-nav ul {
	list-style: none;
	margin-left: 0;
}

#global-nav>ul>li {
	position: relative;
}

#global-nav a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 15px 0;
	-moz-transition: background-color .3s linear;
	-webkit-transition: background-color .3s linear;
	transition: background-color .3s linear;
}

#global-nav .sub-menu.is-active>a, #global-nav a:hover {
	color: rgb(0, 113, 164);
	background: #fff;
}

#global-nav .sub-menu-nav a, #global-nav .sub-menu:hover .sub-menu-nav {
	width: 230px;
}

/* sub-menu icon */

#global-nav .sub-menu-head {
	position: relative;
}

#global-nav .sub-menu-head:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 18px;
	margin: auto;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* nav-toggle */

#nav-toggle {
	display: none;
	position: fixed;
	top: 15px;
	right: 15px;
	height: 32px;
}

#nav-toggle>div {
	position: relative;
	width: 32px;
}

#nav-toggle span {
	width: 100%;
	height: 2px;
	left: 0;
	display: block;
	background: #fff;
	position: absolute;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}

#nav-toggle span:nth-child(1) {
	top: 0;
}

#nav-toggle span:nth-child(2) {
	top: 11px;
}

#nav-toggle span:nth-child(3) {
	top: 22px;
}

#overlay {
	display: none;
	position: fixed;
	background: rgba(0, 0, 0, .6);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

#global-nav .sub-menu-head:after, #global-nav .sub-menu-nav {
	display: none;
}

#nav-toggle {
	display: block;
}

/* nav open */

.open {
	overflow: hidden;
}

.open #overlay {
	display: block;
}

.open #sidebar {
	-webkit-transform: translate3d(-400px, 0, 0);
	transform: translate3d(-400px, 0, 0);
	-webkit-transform: translate3d(-300px, 0, 0);
	transform: translate3d(-300px, 0, 0);
}

/* #nav-toggle close */

.open #nav-toggle span:nth-child(1) {
	top: 11px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

.open #nav-toggle span:nth-child(2) {
	width: 0;
	left: 50%;
}

.open #nav-toggle span:nth-child(3) {
	top: 11px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* z-index */

#overlay {
	z-index: 200;
}

#sidebar {
	z-index: 300;
}

#nav-toggle {
	z-index: 400;
}
/*----------ヘッダーここまで----------*/

コメント

タイトルとURLをコピーしました