Tumblrでjsが適用されない
- TumblrでJavaScriptが適用されない問題が発生しています。
- 指定したJavaScriptのコードが正常に動作せず、メニューが表示されない状態です。
- 質問者はwebデザイン初心者であり、解決策を求めています。
- ベストアンサー
Tumblrでjsが適用されない
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>
- runway173
- お礼率54% (37/68)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
jQuery1.3を読み込んでいるようだけど、ふるすぎる。 $('xxx').on('click',function() { }); を使いたいならOver 1.7
その他の回答 (2)
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
<head>内でもそうじゃなくってもいいけど (使う場所より前に読み込めていれば) 良く見たらcssがscssのままこぴってない？ これはコンパイルが必要だから。 http://codepen.io/gabrielbrettas/pen/vtmdE のcssのウィンドウにあるお目目みたいなアイコンクリックしてCompiled Previewにしてからこぴらないと。
補足
ありがとうございます！ scssのままでした！！！たすかります(^人^) しかし今度はメニューが開かず(；_；) これはJSが機能してないってことですよね？ なんででしょう…？ こんなド素人に付きあわせてしまってすみません。 よろしくお願いいたします。
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
このソースが転記ミスじゃなければjQuery本体を読み込んでいない。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
補足
忘れていましたorz しかし、入れても変わらないのですが何故でしょう？ jsは<head>～</head>内に書くのであってますか？
関連するQ&A
- グローバルナビの画像のサイズ変更方法
グローバルナビのサイズ指定をして大枠のwidthを1000pxにして、ひとつひとつのナビのサイズを200px×5で調節して1000pxでナビ同士の横の隙間を無くすように合わせたいです。 自分なりにやってみたのですが、どうしてもわかりません。 プログラミングをどのように変更すれば良いのでしょうか。よろしくお願いします。 html部分 <div id="globalnavi"> <nav> <ul> <li><a href="#" class="home">Home</a></li> <li><a href="#">Categories</a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#">Portfolio</a></li> <li><a href="#"><span>Contact</a></li> </ul> </nav> </div> css部分 #globalnavi{ height:36px; width:1000px; margin-top:0px; margin-bottom:5px; background-color:white; } #globalnavi ul{ list-style-type:none; margin:0; padding:0; margin-top:1px; margin-bottom:4px; } #globalnavi li{ float:left; width:200px; height:20px; margin-bottom:10px; margin-top:5px; margin:0px; padding-left:10px; } #globalnavi a{ text-align:center; display:block; padding-top:8px; padding-bottom:15px; margin-bottom:-1px; width:160px; background-image:url(images/btn046_06.gif); background-repeat:no-repeat; color:blue; } #globalnavi a.home{ width:160px; background-image:url(images/btn046_05.gif); } #globalnavi a:hover{ background-image:url(images/btn046_10.gif); }
- ベストアンサー
- CSS
- CSS、IE6-7で要素が消えてしまいます。
CSS初心者です。 過去の質問や書籍、webでの検索をしつつも解決しませんでしたので、どうかお力添え下さい！ お願い致します。 当方ではwebレイアウトの確認をMac OSX Firefox、Opera、Safari でおこなっています。 Windows IE については、オンラインのレンダラーでの確認です。 シンプルな構造のページのはずなのですが、以下の HTML / CSS で リストを横並びにしたナビゲーションバーが IE6、IE7で表示されません。 " absolute position dissappearing bug" ではないのでしょうか？ ちなみに、画像置換で背景画像をマウスオーバーで変更するタイプのものです。 ---------------------------------------HTML（body以下） <div id="wrap" > <div class="navwrap"> <div id="nav"> <ul> <li><a href="menu1.html" class="nav-1">メニュー１</a></li> <li><a href="menu2.html" class="nav-2" >メニュー２</a></li> <li><a href="menu3.html" class="nav-3">メニュー３</a></li> </ul> </div> </div> </div> </body></html> ---------------------------------------CSS（上記部分） #wrap { height:100%; width: 100%; background:url(parts/bg.jpg) no-repeat right bottom; margin:0;} .navwrap { width: 100%; text-align: center; position: absolute; bottom: 30px; } #nav { position: static; width:700px; height: 50px; text-align:left; margin:0px auto; } html > body #nav, html > body #nav ul li a { /* for Safari */height: 50px;} #nav ul { margin: 0; padding: 0; list-style: none; } #nav ul li { float:left; width: 140px; } #nav ul li a { display: block; color: #333; font-size: 75%; text-align: center; letter-spacing: 0.1em; text-decoration: none; text-indent: -9999px; } #nav ul li a:hover { color: #000; background-position: bottom; } .nav-1 {background: url(parts/nav-concept.png) top left no-repeat;} .nav-2 {background: url(parts/nav-about.png) top left no-repeat;} .nav-3 {background: url(parts/nav-collection.png) top left no-repeat;} 長くてすみませんが、詳しい方、どうかお願い致します！
- 締切済み
- CSS
- FireFoxでvisitedの表示不具合について
HTMLやCSSに知識がなく困っています。 質問をよろしくお願いいたします。 メニューバーには８つのボタンがあるのですが FireFoxでは、visitedが表示されず IEはページの行き来でメニューボタンが消失します。 何か解決法はありませんでしょうか？ よろしくお願いいたします。 CSS部分 body { background-color: #FFFFFF; margin:0; padding:0; } #menu{ position:absolute; top:0px; width:800px; height:219px; left:-1px; margin:0; padding:0; background-image:url(../topimage/title.gif); background-repeat:no-repeat; } #menu #bottom{ position:absolute; float:left; top:149px; width:800px; height:70px; left:0px; } #bottom ul{ list-style:none; padding:0; margin:0; } #bottom ul li{ padding:0; margin:0; float:left; } #bottom a.c,#bottom a.c:link { display:block; width: 115px; height:70px; background-image:url(../top/img/menu/b1.gif); background-repeat:no-repeat; background-position:0% 0%; } #bottom a.c:visited { background-position:100% 0%; } #bottom a.c:hover { background-position:33% 0%; } #bottom a.c:active { background-position:66% 0%; } 以下ボタン７つのソースがほぼ同じ為、省略します。 HTML部分 <div id="menu"> <div id="bottom"> <ul> <li><a href="../new/top.html" target="main" class="c"></a></li> <li><a href="../product/top.html" target="main" class="d"></a></li> <li><a href="../example/top.html" target="main" class="e"></a></li> <li><a href="../company/top.html" target="main" class="f"></a></li> <li><a href="../rinen/top.html" target="main" class="j"></a></li> <li><a href="../faq/top.html" target="main" class="g"></a></li> <li><a href="../info/top.html" target="main" class="h"></a></li> <li><a href="../recruit/top.html" target="main" class="i"></a></li> </ul> </div> </div>
- 締切済み
- HTML
- spanで指定する方法教えてほしいです。
<span class="top">Home</span> topで指定したのですが、うまく画像が表示されません。 どうすればうまくbackground-colorのimages/btn046_06.gifが表示されるでしょうか？ よろしくお願いします。 htmlの部分 <div id="left_navi"> <ul> <li><a href="#"><span class="top">Home</span></a></li> <li><a href="#"><span>Categories</span></a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span>Portfolio</span></a></li> <li><a href="#"><span>Contact</span></a></li> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Categories</span></a></li> </ul></nav> </div> cssの部分 #left_navi{ width:230px; height:700px; background-color:#e6e6e6; float:left; } #left_navi ul{ list-style-type: none; padding-top: 20px; color:blue; } #left_navi li{ padding-top:20px; } #left_navi a{ text-align: center; display:block; width:100%; height:40px; padding-bottom:9px; padding-top: 11px; padding-left:-50px; padding-right:30px; background-image:url(images/btn046_05.gif); background-repeat:no-repeat; color:gray; } #left_navi a .top{ background-image:url(images/btn046_06.gif); } #left_navi a:hover{ background-image:url(images/btn046_10.gif); color: blue; }
- ベストアンサー
- CSS
- 訪問済リンクを未訪問の状態に再び戻す方法
質問お願いします。 フレームで上部に組んだメニューボタンの訪問済リンクが、 ページを移動するごとに訪問済みが増えて、 どのページを現在、訪問しているのかわからなくなります。 訪問済リンクを未訪問の状態に再び戻す方法を教えてください。 CSS部分 body { background-color: #FFFFFF; margin:0; padding:0; } #menu{ position:absolute; top:0px; width:800px; height:219px; left:-1px; margin:0; padding:0; background-image:url(../topimage/title.gif); background-repeat:no-repeat; } #menu #bottom{ position:absolute; float:left; top:149px; width:800px; height:70px; left:0px; } #bottom ul{ list-style:none; padding:0; margin:0; } #bottom ul li{ padding:0; margin:0; float:left; } #bottom a.c,#bottom a.c:link { display:block; width: 115px; height:70px; background-image:url(../top/img/menu/b1.gif); background-repeat:no-repeat; background-position:0% 0%; } #bottom a.c:visited { background-position:100% 0%; } #bottom a.c:hover { background-position:33% 0%; } #bottom a.c:active { background-position:66% 0%; } 以下ボタン７つのソースがほぼ同じ為、省略します。 HTML部分 <div id="menu"> <div id="bottom"> <ul> <li><a href="../new/top.html" target="main" class="c"></a></li> <li><a href="../product/top.html" target="main" class="d"></a></li> <li><a href="../example/top.html" target="main" class="e"></a></li> <li><a href="../company/top.html" target="main" class="f"></a></li> <li><a href="../rinen/top.html" target="main" class="j"></a></li> <li><a href="../faq/top.html" target="main" class="g"></a></li> <li><a href="../info/top.html" target="main" class="h"></a></li> <li><a href="../recruit/top.html" target="main" class="i"></a></li> </ul> </div> </div>
- 締切済み
- HTML
- Dreamweaverでリストを作成するとボックスからずれてしまいます
DreamweaverCS3を使用してサイトを作成している初心者です。 AP divで作ったボックスの中にリストを作成したのですが、 何故か文字の部分がボックスから大幅にずれてしまいます。 CSS記述↓ #apDiv1 { position:absolute; left:57px; top:82px; width:150px; height:143px; z-index:12; background-color: #FFFFFF; } #apDiv1 li { list-style-type: none; background-color: #CCCCCC; color: #333333; display: block; width: 135px; padding-bottom: 4px; padding-top: 4px; margin-bottom: 1px; margin-left: 0px; margin-top: 0px; padding-left: 15px; } #apDiv1 li a:hover { background-color:#999999 } <body>内です↓ <div id="apDiv1"> <ul> <li class="style4"><a href="http://oshiete.goo.ne.jp/">あああ</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">いいい</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">ううう</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">えええ</a></li> </ul> </div> どうしたらボックスにピッタリ合わせる事ができるのでしょうか。 どうぞ宜しくお願い致します。
- ベストアンサー
- グラフィックソフト
- ドロップダウンメニューを作るこのCSSどこが変？
お世話になります。 Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様をCSSで作りたいと思っています。添付ファイルのように、ボタン画像の下にまたメニュー項目（background-imageがついてくる）が展開していくよくある仕様です。 ネットでの情報を参考にしながら、書いたソースが以下のものですが、 問題は(1)ダウンメニューにしたいのにむしろ上部へ表示される (2)テキスト分しか表示されない、きちんと画像全体を表示させたい！ 個人的にもいろいろ試行錯誤してみましたが、どうも分かりませんでした。 もしかしたら、ものすごく基本的なところでつまずいているかもしれませんが、どうかご容赦ください。 もしよろしければアドバイスお願いします。 HTML--- <div id="global_nav"> <ul> <li><a href="#"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_07.gif" alt="Aボタン" class="btn"/></a> <ul> <li><a href="#">会社概要</a></li> <li><a href="#">営業所</a></li> </ul> </li> <li><a href="#"><img src="images/button_08.gif" alt="Bボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Cボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Dボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Eボタン" class="btn"/></a></li> </ul> </div> CSS--- #global_nav { float:right; width:720px; margin:0; padding-right:15px; } #global_nav img { float:left; display:block; border:0; } #global_nav ul { list-style:none; margin:0; padding:0; } #global_nav li { min-width:120px; white-space:nowrap; float:left; } #global_nav ul ul { display:none; position:absolute; z-index:10; padding-top:2px; } #global_nav ul ul a { font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; font-size:0.75em; color:#FFF; background-image:url(../images/dawnmenu_button.gif); height:40px; width:120px; text-decoration:none; text-align:center; padding:20px 10px 0 10px; } #global_nav li li { clear:left; position:relative; width:100% } #global_nav ul li:hover > ul { display:block; }
- ベストアンサー
- CSS
- [CSS3] last-childについて
html5とcss3にてスマートフォンサイト制作をしております。 リスト要素を使いメニューを作っていますが、一番下の要素だけボーダーを削除したいと 思っていますが、うまくいきません。 詳しい方、ご教授いただけませんでしょうか。 よろしくお願い致します。 ---------------------------------------------------------- [HTML] <nav> <ul id="navi"> <a href="#"><li>メニュー1</li></a> <a href="#"><li>メニュー2</li></a> <a href="#"><li>メニュー3</li></a> <a href="#"><li>メニュー4</li></a> <a href="#"><li>メニュー5</li></a> </ul> </nav> [CSS] nav { display: block; width: 300px; margin-right: auto; margin-left: auto; margin-bottom: 18px; } #navi { border-radius: 8px; -webkit-border-radius: 8px; border: 1px solid #CCCCCC; background: -webkit-gradient(linear, left top,left bottom, from(#FFFFFF), to(#E7E7E7)); background-color: #FFFFFF; } #navi a { text-decoration: none; color: #646464; font-size: 1.31em; text-indent: 16px; height: 33px; line-height: 33px; } #navi li { border-bottom: 1px solid #CCCCCC; } #navi li:last-child { border-bottom-style: none; }
- ベストアンサー
- CSS
- 縦型 レスポンシブ対応 多階層プルダウンウンリスト
www.oct.ac.jp こちらの専門学校と同じ体裁のサイトを作りたいです。 左は固定（可変でも可）、右は可変 にしたい。 ＜HTML＞ <div class="content"> <div class="frame-left"> <div class="aaa"> <ul class="nav"> プルダウンリスト </ul> </div> </div> <div class="frame-right"> メイン記事内容 </div> </div><!--.content--> ＜ＣＳＳ＞ ここでつまずきました。 .content{ display: -webkit-flex; display: flex;} .frame-left{ width:20%; } .frame-right{ width:80%; } .aaa { overflow: hidden; width: 750px; height: 300px; margin: 0 auto; padding: 0; box-sizing: border-box; display: flex; } .nav { width: 150px; margin: 0; padding: 0; } .nav li { position: relative; width: 150px; height: 40px; } .nav > li { border-bottom: none; } .nav li:last-child { border-bottom: none; } .nav li:hover > ul > li { border-bottom: none; } .nav li > ul > li:last-child { border-bottom: none; } .nav li a { display: block; width: 150px; height: 40px; color: #fff; font-size: 14px; line-height: 2.8; padding: 0 5px; background: #9fb7d4; border-bottom: 1px solid #eee; box-sizing: border-box; text-decoration: none; transition: 0.5s; } .nav > li:hover > a {/*layer-1*/ color: orange; background: #afc6e2; transition: 0.5s; } .nav > li li:hover > a {/*layer-2*/ color: olive; background: #afc6e2; } .nav li:hover > ul > li { overflow: visible; top: -40px; left: 110px; height: 40px; } .nav li ul li { overflow: hidden; height: 0; left: 110px; list-style: none; transition: 0.2s; } .nav li ul li a { background: #9fb7d4; transition: 0.5s; } .nav li ul:before { position: absolute; content: ""; top: 14px; left: 140px; border: 5px solid transparent; border-left: 5px solid #fff; } 1）これだと2階層目が上から下までの全幅にならない 2）画面を縮小すると、プルダウンメニューがはみ出す width:auto; などにしてみましたが、上手くいきませんでした。 やり方を教えていただきたく、よろしくお願い致します。 ※できればＣＳＳだけでなんとかしたいですが、無理ならJavaScriptや jQueryなどを使って実現したいです。
- ベストアンサー
- CSS
- フレーム使用時のメニューバーについて
フレームを使ったホームページを作成しました。 フレームのファイル名をindex.htmlに index.htmlだったファイルをtop.htmlにかえて アップロードしたところ、 メニューバーがきちんと表示されません。 パソコン上で確認するときは問題ないので 理由が分かりません。 どなたか教えてください。 メニューのHTMLは <style type="text/css"><!-- body {background-color:firebrick} div.menutitle {color:white; font-family:'Comic Sans MS'; font-size:40px; font-weight:bold; border-bottom-style:dotted; border-bottom-color:white; margin-bottom:30px} a:link {color:white} a:visited {color:yellow} a {text-decoration:none; font-size:18px; font-weight:bold;} div.menu {font-family:'Arial'; background-color:maroon; padding-left:5px; padding-top:7px; padding-bottom:7px; margin-bottom:10px} --!></style> </head> <body> <div class="menutitle" lang="en">menu</div> <div class="menu"> <a href="top.html" target="main">top</a></div> <div class="menu"> <a href="">gallary</a></div> <div class="menu"> <a href="http://8520.teacup.com/**/bbs" target="main">bbs</a></div> <div class="menu"> <a href="">link</a></div> </body> </html> です。よろしくおねがいします。
- ベストアンサー
- HTML
お礼
うわーん！できました！！！！ ほんっとうに助かりました！ ありがとうございました(*^〇^*) また機会がありましたらよろしくお願いいたします(^0^)/