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

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

ただいまの
回答率

90.62%

  • jQuery

    6549questions

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

  • CSS3

    1992questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

レスポンシブのハンバーガーメニューを作成したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 289

osarusam

score 10

jQuery初心者です。
サンプルを見ながらレスポンシブのハンバーガーメニューを作成しようと練習しているのですが、
モバイル時にハンバーガーメニューを開閉後、768px以上の画面で見ると
(例えばタブレットを縦→横にしたときの表示)PC用のメニューが非表示になってしまいます。

ブラウザの「更新」ボタンを押すと、PC用のメニューが表示されるのですが、
どうも不便でコードの追記をどのようにしたら良いかが分かりません。

大変お手数ですが、良い方法がございましたらお教え頂けますと幸いです。

モバイル時の表示

PC時の表示

<!-- HTML -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>メニューのテスト</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script> 
$(function(){
    // アイコンをクリック
    $("button").click(function(){
        // ulメニューを開閉する
        $("ul").slideToggle();
    });
});    
</script>    

</head>
<body>
<header>
  <h1>LOGO</h1>

<nav>
  <button><img src="img/button.png" width="20" height="17" alt="Button"></button>
  <ul>
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
    <li><a href="#">メニュー4</a></li>
  </ul>
</nav>
</header>
<main>
  <p>ここにメインのコンテンツが入ります</p>
</main>
</body>
</html>
/* style.css */
@charset "UTF-8";

body{
    font-family:Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    color:#333;
}

header h1{
    padding:20px 25px;
    color:#FFF;
    background:#333;
    font-weight:bold;
}

/*768px以上の表示
-----------------------------------*/
@media only screen and (min-width:768px) {

header {
    position: relative;
}

button{
    display: none;
}

nav {
    position: absolute;
    top: 20px;
    right: 10px;
    }

nav li {
    display: block;
    width: 100px;
    float: left;
}

nav li a {
    color: #fff;
    text-decoration:none;
} 
}
/*768px以上の表示ここまで
-----------------------------------*/


/*767px以下の表示
-----------------------------------*/
@media only screen and (max-width:767px) {

button{
    position:absolute;
    top:17px;
    right:25px;
    background-color:transparent;
    border:none;
    cursor:pointer;
}

button:focus{
    outline:none;
}    

ul{
    display:none;
    list-style-type:none;
}

li a{
    text-decoration:none;
    font-weight:bold;
    display:block;
    padding:17px 25px;
    color:#FFF;
    background:#B94B6A;
    border-bottom:1px solid #A24861;
}

li:last-child a{
    border-bottom:none;
}
}
/*767px以下の表示ここまで
-----------------------------------*/

main{
    display:block;
    padding:40px 20px 20px;
    color:#333;
    clear: both;
}

p{
    margin-bottom:50px;
    line-height:2em;
}
/* reset.css */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

※追記文です。
管理画面の操作に慣れておらず、失礼いたしました。 
サンプルは「jQuery標準デザイン講座」という書籍なので、ネットにはおそらく全ての内容は掲載されていないと思います。
http://www.shoeisha.co.jp/book/detail/9784798136226 

サンプルのメニューはスマホ用のメニューだけしか掲載されていなかったので、 レスポンシブに対応できれば良いなと思い、編集しているところでした。 
よろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • osarusam

    2018/05/24 11:06

    管理画面の操作に慣れておらず、失礼いたしました。 サンプルは「jQuery標準デザイン講座」という書籍なので、ネットにはおそらく全ての内容は掲載されていないと思います。 http://www.shoeisha.co.jp/book/detail/9784798136226 サンプルのメニューはスマホ用のメニューだけしか掲載されていなかったので、 レスポンシブに対応できれば良いなと思い、編集しているところでした。 よろしくお願いいたします。

    キャンセル

  • mts10806

    2018/05/24 11:08 編集

    コメント欄では目に付きにくいので質問本文に追記してください。書籍は持っている人がいるかどうかに関わってきますが、その中のどのような記述を参考にした、というだけでも回答者にはイメージが伝わります。

    キャンセル

  • osarusam

    2018/05/24 11:20

    お手数おかけして申し訳ございません。質問本文に書き換えました。

    キャンセル

回答 1

checkベストアンサー

+1

こんにちは。

jQueyでulをslideToggleで操作しているからですね。
768px以下でメニューを開閉すると、ulにインラインでdisplay:none;が付くので、
画面を広げても非表示のままになってます。(CSSの詳細度

やり方はいろいろあるのですが、
私は768px以下用のメニューと768以上用のメニューを用意し、下記のようなクラスで表示切り替えをします。

/* 768以下 */
.sp {
  display: block !important;
}
.pc {
  display: none !important;
}

// 768以上
@media only screen and (min-width:768px)
  .sp {
    display: none !important;
  }
  .pc {
    display: block !important;
  }
}


好みの問題もありますので、あくまで一例として・・・

お役に立てたなら幸いです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/24 16:05

    こんにちは。
    ありがとうございます!

    768px以上の表示部分で、
    ulタグにdisplay: block !important;
    を入れたら、無事にPC表示でもメニューが表示されました!

    !important で指定をしなければいけなかったのですね。
    ずっと四苦八苦していたので大変助かりました。

    どうもありがとうございます。

    キャンセル

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

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • jQuery

    6549questions

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

  • CSS3

    1992questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。