※ ChatGPTを利用し、要約された質問です（原文：Tumblrでjsが適用されない）
Tumblrでjsが適用されない
このQ&Aのポイント
TumblrでJavaScriptが適用されない問題が発生しています。
指定したJavaScriptのコードが正常に動作せず、メニューが表示されない状態です。
質問者はwebデザイン初心者であり、解決策を求めています。
Tumblrをカスタマイズしています。
webデザインド素人です。ご教授いただけますと助かります。
http://codepen.io/gabrielbrettas/pen/vtmdE
このサイトのメニューをつけたいと思い、コピペしてみたのですがｊｓが適用されず、
http://shisakusonoic.tumblr.com/
↑パスワードは3212173です
このように、ただの文字だけになってしまいます。
何が問題なのでしょうか？
どうぞよろしくお願いいたします。
下記、ソースコードです。
<!doctype html>
<html>
<head>
<style>
body {
/* 画像ファイルの指定 */
background-image: url(URL);
/* 画像を常に天地左右の中央に配置 */
background-position: center center;
/* 画像をタイル状に繰り返し表示しない */
background-repeat: no-repeat;
/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
background-attachment: fixed;
/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
background-size: cover;
/* 背景画像が読み込まれる前に表示される背景のカラー */
background-color: #464646;
}
* {text-decoration: none;
transition: all 0.3s;
transform: all 0.3s;
}
body {padding: 50px;}
li {list-style: none;}
.menu {
display: inline-block;
position: relative;
.btn {
display: block;
cursor: pointer;
padding: 10px;
.bar {
width: 30px;
height: 5px;
background: #000;
margin-bottom: 5px;
}
.bar:last-child {margin-bottom: 0px;}
}
nav {
position: absolute;
left: 10px;
background-color: whitesmoke;
border: 3px solid #000;
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.7);
a {
font-family: 'Open Sans';
color: #222;
padding: 10px 20px;
display: block;
border-bottom: 1px solid #ddd;
white-space: nowrap;
}
li:last-child a {border-bottom: 0px;}
a:hover {color: whitesmoke; background: #000;}
}
.menu_show {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
}
}
</style>
</head>
<body>
<div class="menu">
<div class="btn">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<nav id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.menu .btn').on('click', function() {
$('#nav').toggleClass('menu_show');
});
});
</script>
</body>
</html>
お礼
うわーん！できました！！！！ ほんっとうに助かりました！ ありがとうございました(*^〇^*) また機会がありましたらよろしくお願いいたします(^0^)/