レスポンシブの切替メニューについて教えて下さい。

PC画面では右カラムにリストメニューを表示し、レスポンシブでスライドメニューに切り替えたいと思っています。

###発生している問題・エラーメッセージ
スライドメニューが出来たと思ったら、PCサイズでのリストメニューが表示されなくなってしまいました。

###該当のソースコード
Last Sidebar Demo v1.2.0
https://スズサキマコト.com/demo/last-sidebar/

こちらを使わせていただきました。

###試したこと
右3本線は下記の設定をし、width: 480pxになると表示されます。

@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 480px) {

｝

切替時の設定がよく分かりません。
ソース記入などが足りないでしょうか...その辺もよく分からず申し訳ございません。
時間だけが迫っていて焦っています。。

どなたか教えていただければと思います。どうぞよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

質問者さんが記述したコードの提示がないので、こちらのコードと同じものだと考えます。
以下の3点を修正することで質問者さんの想像する動作になるかと思いますが、いかがでしょうか？

scriptタグ内のswitchPoint変数の数値を480へ変更
各linkタグのmedia属性の値640pxを480pxへ変更
style.css内のメディアクエリで指定しているスクリーンサイズが640pxのままなので480pxへ変更

追記

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" href="last-sidebar.css">
7</head>
8<body>
9<header>
10    <h1>テキスト</h1>
11    <p class="triggerBtn">
12        <a href="#" id="menuTrigger">
13            <span></span>
14            <span></span>
15            <span></span>
16        </a>
17    </p>
18</header>
19<section>
20    <div id="slideMenu">
21        <nav>
22            <h2>Menu</h2>
23            <ul class="globalNavi">
24                <li><a href="#">sample text</a></li>
25                <li><a href="#">sample text</a></li>
26                <li><a href="#">sample text</a></li>
27                <li><a href="#">sample text</a></li>
28                <li><a href="#">sample text</a></li>
29                <li><a href="#">sample text</a></li>
30            </ul>
31        </nav>
32    </div>
33</section>
34<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
35<script src="jquery.mobile.events.js"></script>
36<script src="jquery.last-sidebar.min.js"></script>
37<script>
38    $(function () {
39        $(window).on("load resize", function () {
40            var w = $(window).width();
41            if (w <= 480) {
42                $("#slideMenu").lastSidebar({});
43                $(".triggerBtn").css("display", "block");
44            } else {
45                $(".triggerBtn").css("display", "none");
46                $("#slideMenu").removeAttr("style");
47                $("#slideMenu").removeAttr("class");
48                $("#lastOverlay").each(function () {
49                    $(this).remove();
50                });
51            }
52        });
53    });
54</script>
55</body>
56</html>

投稿2017/06/27 16:25

編集2017/06/29 16:23

s8_chu

総合スコア14731

Birdsfly

2017/06/27 17:34

こちらも、本当にどうもありがとうございます。なかなかカスタマイズが出来ず、ほとんどコピー状態なのでサイトにアップしました。ｽﾐﾏｾﾝ... http://www.futako.com/01/ <div id="slideMenu">こちらのIDを削除するとサイドメニューが出てくるのですが、そうするとスライドメニューから出てこなくなってしまいます。どうしたらよいか、教えて下さい。お願いいたします。

s8_chu

2017/06/27 17:51 編集

とりあえず、読み込んでいるファイルの中で不要なものは削除しましょう。また、XHTMLではnav要素などは存在しませんので、HTML5のドキュメントタイプ宣言に変えましょう。

Birdsfly

2017/06/27 21:42

分かりました。ありがとうございました。試してみます。

Birdsfly

2017/06/29 15:28

どうしても分からないので、もう一度教えていただいてもよろしいでしょうか。 PCでは縦メニューで、レスポンシブにすると3本線のサイドメニューに切替えにしたいのですが.. http://www.futako.com/01/ ↑こちらで、レスポンシブにすると３本線のスライドメニューを出す事ができるのですが、広げた時にメニューを出すことができません。 <div id="slideMenu">のIDを削除するとメニューが表示されるのですが、レスポンシブになっていません。 last-sidebar.cssの設定だと思うのですが、どのようにしたらよいか... どうぞよろしくお願いいたします。

s8_chu

2017/06/29 15:33

「レスポンシブにする」とは何でしょうか？こちらの環境で質問者さんのコメントに記述されているリンク先のページを見ましたが、すべての要素に高さがないためメニューの動作の検証ができないのですが。

Birdsfly

2017/06/29 15:35

ご連絡、ありがとうございます。画面を縮めていただけると、3本線が出てきます。。

s8_chu

2017/06/29 16:24

追記しました。読み込んでいるものはこちら(https://github.com/moesuke-moekan/last-sidebar/tree/master/src)と同じ内容です。

Birdsfly

2017/06/29 16:47

何から何まで本当に申し訳ございません。ありがとうございます。こちらの4ファイルをDLして読み込み直せばいいという事ですよね？

s8_chu

2017/06/29 16:56

そうです

Birdsfly

2017/06/29 17:13

全てDLして読み込み直してみましたが、画面を広げた時にサイドメニューが表示されません... http://www.futako.com/02/ 本当にごめんなさい...申し訳ないです。。

s8_chu

2017/06/29 17:16

私が回答文に追記したコードを使っていますか？

Birdsfly

2017/06/29 17:20

https://github.com/moesuke-moekan/last-sidebar/tree/master/src こちらの4ファイルですよね？

s8_chu

2017/06/29 17:23

回答文に追記したコードで読み込んでいる内容がそのリンク先の4つのファイルです。

Birdsfly

2017/06/29 17:31 編集

この「DEMO」フォルダをDLして、indexのサンプルを見たいのですが、ブラウザにファイルを投げても見る事ができません。またエディタで開く事もできないのですが、どのようにしたらよろしいですか？

s8_chu

2017/06/29 17:33 編集

index.htmlの内容を回答文に追記したようにすれば良いと思うのですが、回答文のコードでは何か要件を満たしていないのでしょうか？もちろん、src属性やhref属性の値は適宜変える必要がありますが。

Birdsfly

2017/06/29 17:36

回答文に追記したようにする..がよく分かりません。どのようにすればいいのでしょうか？すみません。。

s8_chu

2017/06/29 17:40 編集

「回答文にコードを追記したので、それをコピーして実行すれば要件を満たした動作を実現できるはず」という意味です。

Birdsfly

2017/06/29 17:44 編集

もしかして、私の伝え方が悪かったのかもしれませんが... http://www.futako.com/01/ こちらで、画面が広い時にはスライドメニューの表示を右側に出し、画面を狭くしたときに3本線が出てきてクリックするとスライドメニューを出すようにしたいのですが、↑今は画面を縮めた時はOKですが、広めた時に何も表示されないのをサイドメニューが出るように設定したいと思っています。

Birdsfly

2017/06/29 17:59

やりたかった事と教えて下さった事が異なっていたという事になりますでしょうか...そうだったら、遅くまで本当にすみません。。でもどうしても方法を教えていただきたいです...

Birdsfly

2017/06/29 21:40

あー、回答文に追記の意味が分かりました。上にあったんですね.. 出来ました！！感謝です。本当にありがとうございました。

行動規範の内容に同意します