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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/31 02:07
2017/07/31 02:15