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>
No.2
- 回答日時:
<head>内でもそうじゃなくってもいいけど
(使う場所より前に読み込めていれば)
良く見たらcssがscssのままこぴってない?
これはコンパイルが必要だから。
http://codepen.io/gabrielbrettas/pen/vtmdE
のcssのウィンドウにあるお目目みたいなアイコンクリックしてCompiled Previewにしてからこぴらないと。
この回答への補足
ありがとうございます!
scssのままでした!!!たすかります(^人^)
しかし今度はメニューが開かず(;_;)
これはJSが機能してないってことですよね?
なんででしょう…?
こんなド素人に付きあわせてしまってすみません。
よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字と数字が混在する要素のsor...
-
ホームページビルダー15 メニュ...
-
プルダウンメニュー連動後の処...
-
jqueryアコーディオンのマウス...
-
JQueryで、liタグの背景に色を...
-
ツリーメニューについて
-
jqueryプルダウンメニュー個別着色
-
javascript テキストエリアを1...
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
画像の上に画像リンクを貼る方法
-
スライダーを実装した場合、ペ...
-
背景色を一定時間ごとにランダ...
-
文字を固定したいのですが…
-
javascriptでURLにマウスオーバー
-
[急ぎ] videoタグで埋め込んだm...
-
離れた場所にマウスオーバーで...
-
c++std::string型をTCHARに変換...
-
タブで開いてさらにタブ内をア...
-
1行で左寄せと右寄せと中央揃え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
javascriptでEnterキーをtabキ...
-
クリックした<a>タグのみにClas...
-
チェックボックスに入っている...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
「jQuery」アコーディオンメニ...
-
jQueryで、リンクURLの一致を確...
-
jQueryのeqで最後からn番目以降...
-
ネストされたチェックボックス...
-
javascriptで、クリックしたら...
-
onmouseoverの表示切り替えが上...
-
文字と数字が混在する要素のsor...
-
jQueryでネスト構造の<li>がク...
-
タブメニューを上下に設置
-
<li></li>の数を制限
-
jQuery多層式アコーディオンメ...
-
どの<li><a> が押されたか判別...
-
CSSとJavaScriptを使ってドロッ...
-
複数の画像をランダム(シャッ...
おすすめ情報