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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

2回答

3264閲覧

JQueryの、drawer.jsについて質問です。

masahirot

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2017/05/07 16:21

編集2017/05/08 02:15

###前提・実現したいこと
現在、レスポンシブウェブサイトでグローバルナビゲーションを作成するにあたり、
PCサイズでは、サイドグローバルナビゲーション(position:fixed;で固定)。
SPサイズでは、ハンバーガーメニューをタップすると、ドロワー表示されるようにしました。
###発生している問題・エラーメッセージ

しかし、PCサイズではリンクの行き来ができるのですが、
SPサイズでは、ドロワーで表示されるのですが、リンクの行き来ができません。

###試したこと
気になる点としては、
PC上で、ブラウザサイズをSPサイズにしたところ、
ハンバーガーメニューの上にマウスカーソルを乗せるとポインターが出るのですが、
開いてテキストリンクの上にカーソルを乗せるとポインターが出てきません。

一体なぜPCサイズではリンクの行き来ができるのに、
SPサイズになるとできないのでしょうか?

ソースコードはこちらになります。

<body class="drawer drawer--left"> <header role="banner"> <button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button> <h1><img src="img/logo1.png" alt="Be-done"></h1> <nav class="drawer-nav" role="navigation"> <ul class="drawer-menu"> <li><a class="drawer-menu-item" href="#">home</a></li> <li><a class="drawer-menu-item" href="concept.html">concept</a></li> <li><a class="drawer-menu-item" href="#">menu</a></li> <li><a class="drawer-menu-item" href="#">staff</a></li> <li><a class="drawer-menu-item" href="#">information</a></li> </ul> </nav> </header> </body>
body{ font-size: 16px; line-height: 1.5; background: #eee; color: #4a4a4a; font-family: "游ゴシック Medium", "Yu Gothic Medium", YuGothic, sans-serif; } header{ float: none; height: auto; text-align: center; width: 100%; background-color: #6ebf8b; padding:1% 0; position:fixed; z-index: 10; } header h1 img{ max-width:30%; height:auto; } nav ul li a{ text-decoration:none; color:#4a4a4a; } /*=============== PC ===============*/ @media screen and (min-width:781px) { header{ background: #6ebf8b; width: 22%; float: left; height: 100vh; text-align: right; position: fixed; padding: 42px 1.5% 0; } header h1 img{ max-width:100%; height:auto; } header button{ display:none; } nav ul li{ padding:5%; text-align:center; } }

drawer cssは特に触れていません。
http://git.blivesta.com/drawer/

.drawer-open { overflow: hidden !important; } .drawer-nav { position: fixed; z-index: 101; top: 0; overflow: hidden; width: 16.25rem; height: 100%; color: #222; background-color: #fff; } .drawer-brand { font-size: 1.5rem; font-weight: bold; line-height: 3.75rem; display: block; padding-right: .75rem; padding-left: .75rem; text-decoration: none; color: #222; } .drawer-menu { margin: 0; padding: 0; list-style: none; } .drawer-menu-item { font-size: 1rem; display: block; padding: .75rem; text-decoration: none; color: #222; } .drawer-menu-item:hover { text-decoration: underline; color: #555; background-color: transparent; }

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

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

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

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

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

kei344

2017/05/07 17:40

書かれている状況が再現するコード(HTML/CSS/JavaScriptなど)か、再現するURLを提示されたほうが回答を得やすいと思います。
masahirot

2017/05/08 02:16

ありがとうございます。抜粋してソーヅコードを掲載したので、見ていただけたら幸いです。
guest

回答2

0

ベストアンサー

concept以外は

html

1href="#"

となっていますが、ここを書き換えても移動しませんか?

投稿2017/05/08 02:47

namimon

総合スコア726

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

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

masahirot

2017/05/08 03:16

PCサイズではconceptの行き来ができますが、 SPサイズだと、conceptの行き来ができません。 concept以外はまだ作っていないため、ダミーリンクを入れています。 説明不足で申し訳ありません。
namimon

2017/05/08 04:56

提示されたコードをもとに、こちらでも再現しましたが、問題なく動くようです。 もし問題なければ、実際のページを見せていただけますか
masahirot

2017/05/08 14:10

すみません。サーバー上でお見せすることはできません。 ファイルでしたらお見せすることができます。 conceptからhomeへのリンクはできました。 しかし、homeからconceptへは繋がりません。
masahirot

2017/05/08 14:44

すみません。解決しました。 homeの方にdrawer.cssに基づくclassをつけ忘れていたため、 conceptと違う動きになっていました。 お時間作っていただきありがとうございました。
guest

0

ソースが無いので予測ですが、
z-indexを見直してみてはいかがでしょうか?
何かしらの要素が覆っているから、リンクがあるべきところで、ポインターにならないのかと。

投稿2017/05/07 16:56

LibertyBell3

総合スコア1084

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

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

masahirot

2017/05/08 02:18

回答ありがとうございます。 z-indexを見直したのですが、うまくいかなくて・・・。 恐らく自分の力不足ではありますが、ソースコードを掲載いたしましたので、 よろしければ見ていただけると幸いです。 よろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問