人に聞けない痔の悩み、これでスッキリ >>

Tumblrをカスタマイズしています。
webデザインド素人です。ご教授いただけますと助かります。

http://codepen.io/gabrielbrettas/pen/vtmdE
このサイトのメニューをつけたいと思い、コピペしてみたのですがjsが適用されず、
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>

このQ&Aに関連する最新のQ&A

A 回答 (3件)

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


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

を使いたいならOver 1.7
    • good
    • 0
この回答へのお礼

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

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

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

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


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

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

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

この回答への補足

ありがとうございます!
scssのままでした!!!たすかります(^人^)

しかし今度はメニューが開かず(;_;)
これはJSが機能してないってことですよね?
なんででしょう…?

こんなド素人に付きあわせてしまってすみません。
よろしくお願いいたします。

補足日時:2014/10/23 13:28
    • good
    • 0

このソースが転記ミスじゃなければjQuery本体を読み込んでいない。



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

この回答への補足

忘れていましたorz

しかし、入れても変わらないのですが何故でしょう?
jsは<head>~</head>内に書くのであってますか?

補足日時:2014/10/21 18:35
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング