Tumblrでjsが適用されない

解決済

質問者：runway173
質問日時：2014/10/21 17:23
回答数：3件

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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3ベストアンサー

回答者： Taiyonoshizuku
回答日時：2014/10/23 14:48

jQuery1.3を読み込んでいるようだけど、ふるすぎる。

$('xxx').on('click',function() {
});

を使いたいならOver 1.7

- 0
- 件

通報する

この回答へのお礼

うわーん！できました！！！！
ほんっとうに助かりました！
ありがとうございました(*^〇^*)

また機会がありましたらよろしくお願いいたします(^0^)/

通報する

お礼日時：2014/10/23 15:37

No.2

回答者： Taiyonoshizuku
回答日時：2014/10/21 18:45

<head>内でもそうじゃなくってもいいけど

(使う場所より前に読み込めていれば)

良く見たらcssがscssのままこぴってない？
これはコンパイルが必要だから。

http://codepen.io/gabrielbrettas/pen/vtmdE
のcssのウィンドウにあるお目目みたいなアイコンクリックしてCompiled Previewにしてからこぴらないと。