ロゴをクリックしたらメニューがフェードインする仕組みを作りたいですが

logoをクリックによってメニューが出てくる仕組みを作りたいです。
下記のよに書いてましたが、まったく出てこなかったです。
もしかしたらスクリプトが間違っていますか？

コードを貼ります。

html
1<!DOCTYPE HTML>
2<head>
3<title>PGone</title>
4<meta charset="UTF-8">
5<link rel="stylesheet" href="common/css/css.css">
6<script src="/jquery/jquery-1.11.1.min.js"></script>
7<script>
8$(document).ready(function(){
9  $(".logo").click(function(){
10    $(".menu").fadeIn();
11  });
12});
13</script>
14</head>
15<header>
16<div class="logo"><a href="#">PGone</a></div>
17<ul class="menu">
18<li class="nav"><a href="#">Home</a></li>
19<li class="nav"><a href="#">Profile</a></li>
20<li class="nav"><a href="#">Connect</a></li>
21<li class="nav"><a href="#">History</a></li>
22<li class="nav"><a href="#">Service</a></li>
23<li class="nav"><a href="#">About</a></li>
24</ul>
25</header>
26</body>
27</html>
28

css
1body{
2	background-color: black;
3	width: 100%;
4	margin: 0;
5	padding: 0;
6}
7
8header{	
9	display: block;
10	width: 100%;
11}
12
13.logo{
14	font-size:40px;
15	color: white;
16	text-align: center;
17}
18
19.logo a{
20	color: white;
21	text-decoration: none;
22}
23
24.menu{	
25	display: table;
26	text-align: center;
27	table-layout: fixed;
28	width: 100%;
29	margin: 0;
30	padding: 0;
31  	display: none;
32	
33}
34
35.nav{
36	list-style: none;
37	text-decoration: none;
38	display: table-cell;
39	font-size: 30px;
40	color: white;
41  	vertical-align: middle;
42
43
44}
45
46.nav a{
47	text-decoration: none;
48	color: white;
49	display: inline-block;
50	padding: .4em;
51	position: relative;
52}
53
54.nav a::after {
55  content: '';
56  position: absolute;
57  bottom: 0;
58  left: 0;
59  width: 100%;
60  height: 2px;
61  -webkit-transform: scaleX(0);
62  -ms-transform: scaleX(0);
63  transform: scaleX(0);
64  background-color: white;
65  -webkit-transition: all .3s ease;
66  transition: all .3s ease;
67}
68
69.nav a:hover::after {
70  -webkit-transform: scaleX(1);
71  -ms-transform: scaleX(1);
72  transform: scaleX(1);
73}

以上となります。
ご回答宜しくお願いいたします。

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

回答3件

ベストアンサー

cssで隠してしまうと、各属性になにかを指定しても無駄です。
隠すこと自体をjQueryにまかせるか、隠す用のクラスをつけて
それを付け外しすることで表示をかえることです

$(function(){
  $(".menu").hide();
  $(".logo").on('click',function(){
    $(".menu").fadeIn();
  });
});

投稿2017/07/31 02:02

yambejp

総合スコア114829

Kuriaki

2017/07/31 02:07

ご回答ありがとうございます。 cssでdisplay:nonを削除して、上記のように記述しましたが動作しませんでした。

yambejp

2017/07/31 02:15

とりあえずcssを一切指定しない状態で動作を確認してくださいその上でちゃんと稼働するようなら、順次スタイルシートを追加していけばいいでしょう。

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

こうすればとりあえずできます。

HTML
1<header>
2<div class="logo"><a href="#">PGone</a></div>
3<div class="menu-wrap">
4<ul class="menu">
5<li class="nav"><a href="#">Home</a></li>
6<li class="nav"><a href="#">Profile</a></li>
7<li class="nav"><a href="#">Connect</a></li>
8<li class="nav"><a href="#">History</a></li>
9<li class="nav"><a href="#">Service</a></li>
10<li class="nav"><a href="#">About</a></li>
11</ul>
12</div>
13</header>

JavaScript
1$(document).ready(function(){
2  $(".menu-wrap").hide();
3  $(".logo").click(function(){
4    $(".menu-wrap").fadeIn();
5    return false;
6  });
7});

CSS
1body{
2    background-color: black;
3    width: 100%;
4    margin: 0;
5    padding: 0;
6}
7
8header{    
9    display: block;
10    width: 100%;
11}
12
13.logo{
14    font-size:40px;
15    color: white;
16    text-align: center;
17}
18
19.logo a{
20    color: white;
21    text-decoration: none;
22}
23
24.menu{    
25    display: table;
26    text-align: center;
27    table-layout: fixed;
28    width: 100%;
29    margin: 0;
30    padding: 0;
31/*      display: none;
32上書きしたら display: table; にそもそもならない */
33}
34
35.nav{
36    list-style: none;
37    text-decoration: none;
38    display: table-cell;
39    font-size: 30px;
40    color: white;
41      vertical-align: middle;
42
43
44}
45
46.nav a{
47    text-decoration: none;
48    color: white;
49    display: inline-block;
50    padding: .4em;
51    position: relative;
52}
53
54.nav a::after {
55  content: '';
56  position: absolute;
57  bottom: 0;
58  left: 0;
59  width: 100%;
60  height: 2px;
61  -webkit-transform: scaleX(0);
62  -ms-transform: scaleX(0);
63  transform: scaleX(0);
64  background-color: white;
65  -webkit-transition: all .3s ease;
66  transition: all .3s ease;
67}
68
69.nav a:hover::after {
70  -webkit-transform: scaleX(1);
71  -ms-transform: scaleX(1);
72  transform: scaleX(1);
73}
74```**動くサンプル：**[https://jsfiddle.net/xree4sta/](https://jsfiddle.net/xree4sta/)

投稿2017/07/31 02:25

kei344

総合スコア69407

質問者さんのコードを見る限り間違ってる点は分からないのですが、ブラウザから
「検証→Console」の順に開いてJavaScriptのエラーがでてないか見てみてください。

↓で動いたので似たような感じにすれば、出来ると思います。
https://jsfiddle.net/s7drf5qx/

HTML
1<div class="sss">hello</div>
2<div class="fff">ssssssssssssss</div>

CSS
1.fff {
2  display: none;
3}

JavaScript
1$(".sss").on("click",
2		function() {
3    	$(".fff").fadeIn();
4    }
5);

投稿2017/07/31 02:21

drizzing20

総合スコア363

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ロゴをクリックしたらメニューがフェードインする仕組みを作りたいですが

関連した質問