質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1289閲覧

フローティングメニュー

free_teku

総合スコア103

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/05/01 08:12

分からないこと:フローティングメニューを行いたいのですが、
動作されません!原因を教えてください。

調べたこと、やったこと
フローティングメニューの本を読み、コードをみました。3回往復しています。

コード

HTML

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>float=menu</title> 8 <link rel="stylesheet" href="CSS/reset.css"> 9 <link rel="stylesheet" href="CSS/floating_menu.css"> 10 <link rel="stylesheet" href="Jquery/jquery-3.6.0.min.js"> 11 <link rel="stylesheet" href="Jquery/script.js"> 12</head> 13 14<body> 15 <div id="wrapper"> 16 <div id="container"> 17 <header> 18 <h1>Floating Menu</h1> 19 </header> 20 <nav> 21 <ul> 22 <li><a href="#">Menu1</a></li> 23 <li><a href="#">Menu2</a></li> 24 <li><a href="#">Menu3</a></li> 25 <li><a href="#">Menu4</a></li> 26 <li><a href="#">Menu5</a></li> 27 </ul> 28 </nav> 29 <main> 30 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 31 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 32 33 </main> 34 </div> 35 </div> 36 37 38 </body> 39</html>

CSS

1@charset "UTF-8"; 2 3body{ 4 font-family:Arial, sans-serif; 5 -webkit-font-smoothing:antialiased; 6 background:#E6E5E5; 7} 8 9#wrapper{ 10 width:900px; 11 padding:0 50px; 12 margin:0 auto; 13} 14 15#container{ 16 background:#FFF; 17 padding:0 170px; 18 position:relative; 19} 20 21h1{ 22 color:#635F5F; 23 font-size:4em; 24 text-align:center; 25 font-weight:bold; 26 padding:90px 0; 27} 28 29nav{ 30 position:absolute; 31 top:100px; 32 left:-50px; 33} 34 35li{ 36 list-style-type:none; 37} 38 39a{ 40 display:block; 41 background:#635F5F; 42 padding:20px; 43 width:150px; 44 color:#FFF; 45 text-decoration:none; 46 border-bottom:1px solid #777; 47} 48 49a:hover{ 50 background:#504E4E; 51} 52 53p{ 54 padding-bottom:50px; 55 line-height:2em; 56 color:#635F5F; 57}

jQuery

1$(function(){ 2 $(window).scroll(function(){ 3 //ナビゲーションの新しい位置を計算 4 $("nav").stop().animate({"top" : $(window).scrollTop()+100}, 500); 5 6 7 }); 8)}; 9

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/05/01 09:35 編集

>動作されません! 文章(というか日本語として)おかしいと思います。 せめて「何が起きているか」書けませんか? https://teratail.com/help/question-tips >フローティングメニューの本を読み、コードをみました。3回往復しています。 これだけでは何とも。 この質問を見るのはあなたのこと(背景や前提含む)は何も知らない赤の他人なので、 「3回」という数字や「見た」というだけでは何も伝わりません。 それに「見る」「読む」と「理解する」は別の話なので、観点や見方やスキルが見合わなければ何百回見たところで理解はできません。 「フローティングメニュー」がどうあるべきかを理解して参照したかという点もあります。
guest

回答1

0

ベストアンサー

とりあえず、この部分↓の書き方を間違えていますので

<link rel="stylesheet" href="Jquery/jquery-3.6.0.min.js"> <link rel="stylesheet" href="Jquery/script.js">

以下のように書き換えてください。

<script type="text/javascript" src="Jquery/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="Jquery/script.js"></script>

投稿2021/05/06 08:23

編集2021/05/06 08:25
mari.rinn

総合スコア296

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

free_teku

2021/05/06 10:02

ご回答いただきありがとうございます。 結果は変わりませんでした。
mari.rinn

2021/05/06 10:11

あっと、もう1つ間違いを今見つけました。 jQueryの一番最後、functionを閉じるところ }); )}; となってますが、) と } が逆ですね、下側の方。 で、これを修正して何も変化なかったら一度ブラウザのキャッシュをクリアしてからもう一度操作してみてください。
free_teku

2021/05/06 11:50

ありがとうございます。 こちらが原因でした。動いた時の感動が止まりません!! ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問