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

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

ただいまの
回答率

90.51%

  • HTML

    11461questions

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

  • jQuery

    8141questions

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

  • CSS

    7527questions

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

レスポンシブでドロワーメニューを作りましたが、ボタンを押してもメニューが出てきません。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,096

Kuriaki

score 57

現在レスポンシブで小画面の時にヘッダーのメニューバーをドロワーメニューにしたいですが、うまく行きません。
ボタンをクリックしても、メニューが表示しません。
コードを貼ります。
回答宜しくお願いいたします。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SSG</title>
<meta name="viewport" content="windows=device-width">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="./common/reset.css">
<link rel="stylesheet" href="./common/style.css">

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function)(){

    $("#menubtn").click(function(){
        $("#menu").slideToggle();
    });
});
</script>
</head>
<body>
<div class="boxA">
<div class="boxA-inner">
    <div class="box1">
        <div class="site">
            <h1><a href="#">LongZhu</a></h1>
        </div><!-- site -->
    </div>

    <div class="box2">

        <button type="button" id="menubtn">
        <i class="fa fa-bars"></i><span>MENU</span>
        </button>

        <nav class="menu" id="menu">
            <ul>
                <li><a href="#">トップ</a></li>
                <li><a href="#">沿革</a></li>
                <li><a href="#">メンバー紹介</a></li>
                <li><a href="#">採用情報</a></li>
                <li><a href="#">お問い合わせ</a></li>
            </ul>
        </nav>
    </div>
</div><!-- boxA-inner -->    
</div><!-- boxA -->

<div class="box3">
<div class="top">
<img src="./common/img/main.jpg" class="topimg">
<p class="catch">LongZhuはデータの蓄積と<br>
分析・解析のサービスを提供します。</p>

</div>

</div>

<div class="box6">
<div class="box6-1">
<div class="gaiyou">
    <a href="#">
    <i class="fa fa-database"></i>
    <h1>データの分析・解析</h1>
    <p>目的に応じてさまざまな角度から<br>
    データを分析・解析します。</p>
    </a>
</div>
</div><!-- box6-1 -->

<div class="box6-2">
<div class="gaiyou">
    <a href="#">
    <i class="fa fa-bar-chart-o"></i>
    <h1>わかりやすく視覚化</h1>
    <p>解析結果はわかりやすく視覚化し、<br>
    活用できるようにします。</p>
    </a>
</div>
</div><!-- box6-2 -->

<div class="box6-3">
<div class="gaiyou">
    <a href="#">
    <i class="fa fa-envelope"></i>
    <h1>24時間サポート</h1>
    <p>24時間サポートでトラブルにも<br>
    素早く対応します。</p>
    </a>
</div>
</div><!-- box6-3 -->
</div>
<div class="box4">
<div class="box4-1">

    <div class="news">
    <h1>お知らせ</h1>
        <ul>
            <li><a href="#">
                <time datetime="2017-06-01">06/01</time>
                <div class="text">データセンターのメンテナンスを行います。</div>
            </a></li>
            <li><a href="#">
                <time datetime="2017-06-02">06/02</time>
                <div class="text">Android版アプリ バージョン1.2をリリースしました。</div>
            </a></li>
            <li><a href="#">
                <time datetime="2017-06-03">06/03</time>
                <div class="text">セミナー開催に伴うキャンペーンのお知らせ。</div>
            </a></li>
            <li><a href="#">
                <time datetime="2017-06-04">06/04</time>
                <div class="text">グラフ表示の切替方法がわかりやすくなりました。</div>
            </a></li>
        </ul>
    </div>
    </div><!-- box4-1 -->

<div class="box4-2">
    <div class="follow">
        <p class="follow-info">最新情報はこちらでも配信しています</p>
        <ul>
            <li><a href="#" class="follow-tw">
            <i class="fa  fa-fw fa-twitter"></i>
            Twitter
            </a></li>
            <li><a href="#" class="follow-fb">
            <i class="fa  fa-fw fa-facebook"></i>
            Facebook
            </a></li>
            <li><a href="#" class="follow-gp">
            <i class="fa fa- fw fa-google-plus"></i>
            Google+
            </a></li>
        </ul>
    </div>
</div>
</div><!-- box4 -->


<div class="box5">
<div class="box5-inner">
    <div class="copyright">
        <p>copyright &copy; LongZhu</p>
    </div>
</div><!-- box5-inner -->    
</div>




</body>
</html>
@charset "UTF-8"


body{
    font-family: 'メイリオ',
    'Hiragino Kaku Gothic Pro', sans-serif;
    margin: 0;
}

.site h1 a{
    color:#ffffff;
    text-decoration:none;
    font-size: 36px;
}

.site h1{
    margin:0;
    font-size:30px;
}



.topimg{
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.catch{
    margin:0;
    padding: 15px;
    background-color: rgba(255,255,255,0.7);
    font-size: 28px;
    position: absolute;
    bottom:7%;
    left: 3%;
}

.top{
    position: relative;
}


.gaiyou a{
    display: block;
    background-color: #222222;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
}

.gaiyou a:hover{
    opacity: 0.8;
}

.gaiyou i{
    display: block;
    padding-top: 40px;
    padding-bottom: 40px;
    font-size: 38px;
}

.gaiyou .fa-database{
    background-color: #bfbd13;
}

.gaiyou .fa-bar-chart-o{
    background-color: #c58839;
}

.gaiyou .fa-envelope{
    background-color: #859f46;
}

.gaiyou h1{
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 20px;
    font-weight: normal;
}

.gaiyou p{
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #524e3c;
    font-size: 12px;
}

.news{
    padding: 20px;
    border:solid 5px #dddddd;

}

.news h1{
    margin-top:0;
    margin-bottom: 5px;
    font-size: 18px;
    color: #666666;
}

.news ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.news li a{
    display: block;
    padding: 5px;
    border-bottom: dotted 2px #dddddd;
    color: #000000;
    font-size: 14px;
    text-decoration: none;
}

.news li a:hover{
    background-color: #eeeeee;
}

.news time{
    color: #888888;
    font-weight: bold;
    float: none;
    width: auto;

}



.news .text{
    float: none;
    width: auto;
}

.follow ul{
    margin: 0;
    padding:0;
    list-style: none;
}

.follow li a{
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
}

.follow li a:hover{
    opacity:0.8;
}

.follow-tw{
    background-color: #63bafb;
}

.follow-fb{
    background-color: #5288f7;
}

.follow-gp{
    background-color: #f65d4a;
}

.follow i{
    margin-right: 10px;
    font-size:24px;
    vertical-align: middle;
}

.follow p{
    margin-top: 20px;
    margin-bottom:20px;
    padding:20px;
    background-color: #dddddd;
    font-size: 14px;
    text-align: center;
}

.follow-info{
    position: relative;
    background-image: #dddddd;
}

.follow-info:after{
    top: 100%;
    left: 50%;
    border:solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events:none;
    border-color: rgba(221,221,221,0);
    border-top-color: #dddddd;
    border-width: 15px;
    margin-left: -15px;
}

.copyright{
    margin: 0;
    color: #666666;
    font-size: 14px;
}

.box5{
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #dddddd;
}

.boxA,.box4,.box5,.box6{
    padding-left: 15px;
    padding-right: 15px;
}

.boxA{
    background-color: #333333;
    padding-top: 20px;
    padding-bottom: 10px;
}

.box4{
    padding-bottom: 20px;
}

.box4-1{
    padding-bottom: 20px;
    padding-top: 20px;
}

.box6{
    padding-top: 20px;
}
.box6-1,.box6-2,.box6-3{
    padding-bottom: 10px;
}




/* ################ 1190px以上 ####################*/
@media(min-width:1190px){
.box3,.box4,.boxA-ineer,.box5-inner,.box6{
    width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

}


/* ################ 768px以上 ####################*/
@media(min-width:768px){

#menubtn{
    display: none;
}

#menu{
    display: block !important;
}

.menu ul{
    margin: 0;
    padding: 0;
    list-style:none;
}

.menu li a{
    display: block;
    padding: 10px 15px;
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
}

.menu li a:hover{
    background-color: #524e3c;
}

.menu ul:after{
    content: "";
    display: block;
    clear: both;
}

.menu li{
    float: left;
    width: auto;
}

.box4:after{
    content: "";
    display: block;
    clear: both;
}

.box4-1{
    float: left;
    width: 70%;
    padding-right: 35px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.box4-2{
    float: left;
    width: 30%;
}

.boxA:after{
    content: "";
    display:block;
    clear:both;
}


.box1{
    float:left;
    width: auto;}

.box2{
    float:right;
    width: auto;}
}

.box6:after{
    content: "";
    display: block;
    clear:both;
}

.box6-1{
    float: left;
    width: 33.3333%;
    padding-right:10px;
}

.box6-2{
    float: left;
    width: 33.3333%;
    padding-left: 5px;
    padding-right: 5px;
}

.box6-3{
    float: left;
    width: 33.3333%;
    padding-left: 10px;
}

.box6-1,.box6-2,.box6-3{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing: border-box;
}


/* ################ 767px以下 ####################*/
@media(max-width:767px){

#menubtn{
    padding: 6px 12px;
    border:solid 1px #aaaaaa;
    border-radius: 5px;
    background-color: #ffffff;
    position: absolute;
    top: 20px;
    right: 15px;
    cursor: pointer;
}

#menubtn:hover{
    background-color: #dddddd;
}

#menubtn:focus{
    outline: none;
}

#menubtn i{
    color: #888888;
    font-size: 18px;
}

#menubtn span{
    display: inline-block;
    text-indent:-9999px;
}

#menu{
    display: none;
}

.menu ul{
    margin:0;
    padding:0;
    list-style: none;
}

.menu li a{
    display: block;
    padding: 5px;
    color: #000000;
    font-size: 14px;
    text-decoration:none;
}

.menu li a:hover{
    background-color: #eeeeee;
}

.box6-1,.box6-2,.box6-3{
    width: 100%;
    padding:0;
    margin-bottom: 10px;


}

}

/* ################ 599px以下 ####################*/
@media(max-width: 599px){
.menu li a{
    padding: 10px 7px;
    font-size:11px;
}

.catch{
    padding: 5px 10px;
    font-size: 12px;
}

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

以下のようにしてはいかがでしょうか?

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>SSG</title>
    <meta name="viewport" content="windows=device-width">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="./common/reset.css">
    <link rel="stylesheet" href="./common/style.css">

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        $(function () { //修正

            $("#menubtn").click(function () {
                $("#menu").slideToggle();
            });
        });
    </script>
</head>
<body>
<div class="boxA">
    <div class="boxA-inner">
        <div class="box1">
            <div class="site">
                <h1><a href="#">LongZhu</a></h1>
            </div><!-- site -->
        </div>

        <div class="box2">

            <button type="button" id="menubtn">
                <i class="fa fa-bars"></i><span>MENU</span>
            </button>

            <nav class="menu" id="menu">
                <ul>
                    <li><a href="#">トップ</a></li>
                    <li><a href="#">沿革</a></li>
                    <li><a href="#">メンバー紹介</a></li>
                    <li><a href="#">採用情報</a></li>
                    <li><a href="#">お問い合わせ</a></li>
                </ul>
            </nav>
        </div>
    </div><!-- boxA-inner -->
</div><!-- boxA -->

<div class="box3">
    <div class="top">
        <img src="./common/img/main.jpg" class="topimg">
        <p class="catch">LongZhuはデータの蓄積と<br>
            分析・解析のサービスを提供します。</p>

    </div>

</div>

<div class="box6">
    <div class="box6-1">
        <div class="gaiyou">
            <a href="#">
                <i class="fa fa-database"></i>
                <h1>データの分析・解析</h1>
                <p>目的に応じてさまざまな角度から<br>
                    データを分析・解析します。</p>
            </a>
        </div>
    </div><!-- box6-1 -->

    <div class="box6-2">
        <div class="gaiyou">
            <a href="#">
                <i class="fa fa-bar-chart-o"></i>
                <h1>わかりやすく視覚化</h1>
                <p>解析結果はわかりやすく視覚化し、<br>
                    活用できるようにします。</p>
            </a>
        </div>
    </div><!-- box6-2 -->

    <div class="box6-3">
        <div class="gaiyou">
            <a href="#">
                <i class="fa fa-envelope"></i>
                <h1>24時間サポート</h1>
                <p>24時間サポートでトラブルにも<br>
                    素早く対応します。</p>
            </a>
        </div>
    </div><!-- box6-3 -->
</div>
<div class="box4">
    <div class="box4-1">

        <div class="news">
            <h1>お知らせ</h1>
            <ul>
                <li><a href="#">
                    <time datetime="2017-06-01">06/01</time>
                    <div class="text">データセンターのメンテナンスを行います。</div>
                </a></li>
                <li><a href="#">
                    <time datetime="2017-06-02">06/02</time>
                    <div class="text">Android版アプリ バージョン1.2をリリースしました。</div>
                </a></li>
                <li><a href="#">
                    <time datetime="2017-06-03">06/03</time>
                    <div class="text">セミナー開催に伴うキャンペーンのお知らせ。</div>
                </a></li>
                <li><a href="#">
                    <time datetime="2017-06-04">06/04</time>
                    <div class="text">グラフ表示の切替方法がわかりやすくなりました。</div>
                </a></li>
            </ul>
        </div>
    </div><!-- box4-1 -->

    <div class="box4-2">
        <div class="follow">
            <p class="follow-info">最新情報はこちらでも配信しています</p>
            <ul>
                <li><a href="#" class="follow-tw">
                    <i class="fa  fa-fw fa-twitter"></i>
                    Twitter
                </a></li>
                <li><a href="#" class="follow-fb">
                    <i class="fa  fa-fw fa-facebook"></i>
                    Facebook
                </a></li>
                <li><a href="#" class="follow-gp">
                    <i class="fa fa- fw fa-google-plus"></i>
                    Google+
                </a></li>
            </ul>
        </div>
    </div>
</div><!-- box4 -->
<div class="box5">
    <div class="box5-inner">
        <div class="copyright">
            <p>copyright &copy; LongZhu</p>
        </div>
    </div><!-- box5-inner -->
</div>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/06/05 15:14

    ご回答ありがとうございます。
    ベストにさせて頂きます。

    キャンセル

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

  • HTML

    11461questions

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

  • jQuery

    8141questions

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

  • CSS

    7527questions

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

  • トップ
  • HTMLに関する質問
  • レスポンシブでドロワーメニューを作りましたが、ボタンを押してもメニューが出てきません。