下記のメニューバーの作成方法

前提・実現したいこと

下記のサイトのメニューバーを参考にコピーしているのですが、うまくいきません。
https://codepen.io/Bjurhager/pen/MwoMqa
https://coliss.com/articles/build-websites/operation/work/awesome-ui-from-codepen-2015-sep.html

発生している問題・エラーメッセージ

divは表示されているがアニメーション・ロゴがうまく反映されていない。
js自体のエラーメッセージはでていません。

該当のソースコード

HTML
1<body>
2      <div class="mainBox-nav">
3				<nav id="mainNav">
4					<ul id="nav-contents"> 
5						<li class="nav-item"  style="background-color: #5fb3f9;">
6							<a href="index.html">
7								<i class="fa fa-home"></i>
8							</a>
9						</li>
10						<li class="nav-item"  style="background-color: #60ead3;">
11							<a href="#">
12								<i class="fa fa-heartbeat"></i>
13							</a>
14						</li>
15						<li class="nav-item" style="background-color: #fda660;">
16							<a href="#">
17								<i class="fa fa-codepen" ></i>
18							</a>
19						</li>
20						<li class="nav-item" style="background-color: #fd7b87;">
21							<a href="#">
22								<i class="fa fa-gear"></i>
23							</a>
24						</li>					
25					</ul>
26				</nav>
27				<div id="header" class="animate hide">
28					<div id="h-inner" class="animate">
29						<h1>Page title</h1>
30					</div>
31				</div>
32			</div>
33</body>
34

css
1.mainBox-nav{
2  background-color: #f1f4f5;
3  font: 14px/28px 'Open Sans', sans-serif;
4  height: 650px;
5  width: 100%;
6}
7#header {
8  position: relative;
9  width: 100%;
10  display: block;
11  text-align: center;
12  z-index: -1;
13  height: 150px;
14}
15#h-inner {
16  width: 100%;
17  height: 100%;
18  color: #fff;
19  line-height: 150px;
20  font-size: 20px;
21}
22#mainNav{
23	float:left;
24	z-index:2;
25}
26.show{
27	left:0;
28}
29.hide{
30	left:-100%;
31}
32#nav-contens{
33	position:relative;
34}
35.nav-item {
36	width:150px;
37	height:150px;
38	background-color:orange;
39	display:block;
40	text-align:center;
41	line-height:150px;
42	cursor: pointer;
43}
44.nav-item a:hover i{
45	-webkit-transition:all .4s ease-in-out;
46	-moz-transition:all .4s ease-in-out;
47	-o-transition:all .4s ease-in-out;
48	transition:all .4s ease-in-out;
49	-webkit-transform:rotate(360deg);
50	transform: rotate(360deg);
51}
52.nav-item a{
53	color:#fff;
54	width:100%;
55	height:100%;
56	display:block;
57	text-decoration: none;
58}
59nav-item i{
60	font-size:30px;
61}
62.animate {
63  -webkit-transition: all .8s ease-in-out;
64  -moz-transition: all .8s ease-in-out;
65  -o-transition: all .8s ease-in-out;
66  transition: all .8s ease-in-out;
67}
68
69.cred {
70  color: #969696;
71  font-size: 7pt;
72  text-align: center;
73  margin-top: 20px;
74  text-decoration: none;
75  width: 100%;
76  display: block;
77}

js
1/*global $*/
2/*eslint no-undef: "error"*/
3/*eslint-env node*/
4
5$(function () {
6	"use strict";
7	$('.nav-item').click(function () {
8		var navcol = $(this).css('backgroundColor');
9		$('#header').removeClass('show');
10		$('#header').addClass('hide');
11		
12		$(this).hide(800);
13		$(this).addClass('active');
14		setTimeout(function () {
15		
16			$('.active').prependTo('#nav-contents').show(800);
17			$('.nav-item').removeClass('active');
18			$('#header').removeClass('hide');
19			$('#header').addClass('show');
20			$('#header').css({
21				"background-color": navcol
22			});
23		}, 800);
24	});
25	
26});

試したこと

js・HTMLコードの見直し等

補足情報（FW/ツールのバージョンなど）

Bracketsで作成しています。

行動規範の内容に同意します

回答2件

codepenの見本の状態とご自身の提示されたコードだと少し構造が違うようです。
（タイトルを表示するdivが無かったり、背景指定がliではなくiについていたり）
また、cssやJavaScriptでもいくつかクラス指定の「.（ドット）」が抜けている部分があります。
#mainNavにhideやshowのclassを付けるような形になっていますが、提示のcodepenでいえば#headerに対して行うはずの部分です。
もう一度見直されるか、一度codepenのコードをそのまま貼り付け、fontawesomeの読み込みとjQueryの読み込みをしたものが希望の動作になるのを確認してからidやclassを置換するのがいいと思います。

※時間があれば、質問に提示のコードを元に訂正したコードを回答に追記します。

追記

.mainBox-navの背景の下に#headerが潜り込んでいるのかもしれませんね。

css
1  .mainBox-nav{
2    background-color: #f1f4f5; /* これを消すと表示されるのがわかる */
3    font: 14px/28px 'Open Sans', sans-serif;
4    height: 650px;
5    width: 100%;
6    /* 背景色は付けたままで#headerを表示させたい場合は以下を追記で応急処置できるはず
7    position: relative;
8    z-index: 1;
9    */
10  }

あと、ここの頭の.ついてなかったのでfont-sizeが効いてないです。

css
1  .nav-item i{
2      font-size:30px;
3  }

投稿2020/06/02 02:11

編集2020/06/02 03:33

dit.

総合スコア3235

Rin0123

2020/06/02 02:17

ご指摘の通りクラス名等を反映させました。background-colorは変更されたのですが、pagetitleをひょうじさせるBoxが表示されない状況です。

行動規範の内容に同意します

ベストアンサー

codepenのコードをコピペで動くと思いますよ。

HTML
1<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>

HTML
1<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

をたして動きました。

以下が全体のコードです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8" />
5        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6        <title>Document</title>
7        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
8        <style>
9            html {
10                background-color: #f1f4f5;
11                font: 14px/28px "Open Sans", sans-serif;
12                height: 100%;
13                width: 100%;
14            }
15
16            #header {
17                position: relative;
18                width: 100%;
19                display: block;
20                text-align: center;
21                z-index: -1;
22                height: 150px;
23            }
24
25            #h-inner {
26                width: 100%;
27                height: 100%;
28                color: #fff;
29                line-height: 150px;
30                font-size: 20px;
31            }
32
33            .show {
34                left: 0;
35            }
36
37            .hide {
38                left: -100%;
39            }
40
41            #main-nav {
42                float: left;
43                z-index: 2;
44            }
45
46            #nav-holder {
47                position: relative;
48            }
49
50            .nav-item {
51                width: 150px;
52                height: 150px;
53                background-color: orange;
54                display: block;
55                text-align: center;
56                line-height: 150px;
57                cursor: pointer;
58            }
59
60            .nav-item a:hover i {
61                -webkit-transition: all 0.4s ease-in-out;
62                -moz-transition: all 0.4s ease-in-out;
63                -o-transition: all 0.4s ease-in-out;
64                transition: all 0.4s ease-in-out;
65                -webkit-transform: rotate(360deg);
66                transform: rotate(360deg);
67            }
68
69            .nav-item a {
70                text-decoration: none;
71                color: #fff;
72                width: 100%;
73                height: 100%;
74                display: block;
75            }
76
77            .nav-item i {
78                font-size: 30px;
79            }
80
81            .animate {
82                -webkit-transition: all 0.8s ease-in-out;
83                -moz-transition: all 0.8s ease-in-out;
84                -o-transition: all 0.8s ease-in-out;
85                transition: all 0.8s ease-in-out;
86            }
87
88            .cred {
89                color: #969696;
90                font-size: 7pt;
91                text-align: center;
92                margin-top: 20px;
93                text-decoration: none;
94                width: 100%;
95                display: block;
96            }
97        </style>
98        <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
99        <script>
100            $(function () {
101                $(".nav-item").click(function () {
102                    var navcol = $(this).css("backgroundColor");
103                    $("#header").removeClass("show");
104                    $("#header").addClass("hide");
105
106                    $(this).hide(800);
107                    $(this).addClass("active");
108                    setTimeout(function () {
109                        $(".active").prependTo("#nav-holder").show(800);
110                        $(".nav-item").removeClass("active");
111                        $("#header").removeClass("hide");
112                        $("#header").addClass("show");
113                        $("#header").css({
114                            "background-color": navcol,
115                        });
116                    }, 800);
117                });
118            });
119        </script>
120    </head>
121    <body>
122        <nav id="main-nav">
123            <ul id="nav-holder">
124                <li class="nav-item" style="background-color: #5fb3f9;">
125                    <a href="#">
126                        <i class="fa fa-home"></i>
127                    </a>
128                </li>
129                <li class="nav-item" style="background-color: #60ead3;">
130                    <a href="#">
131                        <i class="fa fa-heartbeat"></i>
132                    </a>
133                </li>
134                <li class="nav-item" style="background-color: #fda660;">
135                    <a href="#">
136                        <i class="fa fa-codepen"></i>
137                    </a>
138                </li>
139                <li class="nav-item" style="background-color: #fd7b87;">
140                    <a href="#">
141                        <i class="fa fa-gear"></i>
142                    </a>
143                </li>
144            </ul>
145            <a href="www.bjurhagerstudios.com" class="cred">By BjurhagerStudios</a>
146        </nav>
147        <div id="header" class="animate hide">
148            <div id="h-inner" class="animate">
149                <h1>Page title</h1>
150            </div>
151        </div>
152    </body>
153</html>
154

投稿2020/05/28 01:34

fake_shibe

総合スコア806

Rin0123

2020/06/02 01:26

コードを追加したところ、ロゴとBox表示がされたのですが、各divのbackground-colorが反映されず、加えてアニメーションの動作が右ではなく左に行ってしまうのですがどうしたらいいでしょうか.

fake_shibe

2020/06/02 07:20

CSSの.mainBox-navのところにあるbackground-color: #f1f4f5;を削除して以下のようにしたら、アニメーションの動作がうまくいくと思います。 Page titleが表示される様になると思います。 .mainBox-nav { font: 14px/28px "Open Sans", sans-serif; height: 650px; width: 100%; }

行動規範の内容に同意します

あなたの回答