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

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

ただいまの
回答率

88.77%

jqueryを使ってナビバーを作りたい。

解決済

回答 1

投稿

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

spr_tm

score 16

http://pas-pol.jp/

このサイトのナビバーをjqueryで作りたいのですが、調べてみてもよくわかりませんでした。
コードをおしえてくださるとありがたいです。
携帯サイズで見た場合のナビバーで、クリックすると上げ下げできるものです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

jQueryプラグインのMeanMenuが一番近いと思います。

・jQueryプラグインMeanMenu
https://github.com/meanthemes/meanMenu

・参考にしたサイト
https://morobrand.net/mororeco/jquery/meanmenu/

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>MeanMenu Demo</title>

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <link rel="stylesheet" href="meanmenu_js/meanmenu.css">
  <script src="meanmenu_js/jquery.js" type="text/javascript"></script>
  <script src="meanmenu_js/jquery.meanmenu.min.js" type="text/javascript"></script>

 </head>
 <body>

<header>

  <style type="text/css">
/* Basic CSS */
body {
    margin: 0;
    padding: 0;
    font: 16px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
h1 {
    font-size: 28px;
    font-weight: 100;
    text-align: center;
}
header{
    height:44px;
margin-bottom:10px;
}
header nav {
    background: #24885a;
}
header nav ul {
    margin: 0;
    list-style-type: none;
    width:100%;
}
header nav ul li {
    float:left;
    width:25%;
    margin: 0;
    text-align: center;
}
header nav ul li a{
    display: block;
    margin:0;
    padding:10px 20px;
    border-right:1px solid #666;
    border-left: 1px solid #fff;
     box-sizing:border-box;
    text-decoration: none;
}
header nav ul li a:hover {
    background:#60d7a0;
}
header nav ul li ul {
    display: none;
}
a {
    color: #269663;
}
a:hover {
    color: #333;
}
a, a:hover {
    -o-transition: color 0.25s ease-in;
    -webkit-transition: color 0.25s ease-in;
    -moz-transition: color 0.25s ease-in;
    transition: color 0.25s ease-in;
}

article {
    width: 100%;
    margin:0px auto;
    background:#FFF;
    text-align:center;
    font-size:80%;
}
.txt2 {
    display: none;
    color:#f00;
}

/* ウィンドウサイズが480px以下になった場合 */
@media screen and (max-width: 480px) {
    .txt1{
        display: none;
    }
    .txt2{
        display: block;
    }
}
</style>

<header>
    <nav>
        <ul class="clearfix">
            <li><a href="#">ナビ1</a>
                <ul>
                    <li><a href="#">ナビ1-1</a>
                        <ul>
                            <li><a href="#">ナビ1-1-1</a></li>
                            <li><a href="#">ナビ1-1-2</a></li>
                            <li><a href="#">ナビ1-1-3</a>
                                <ul>
                                    <li><a href="#">ナビ1-1-1-1</a></li>
                                    <li><a href="#">ナビ1-1-1-2</a></li>
                                    <li><a href="#">ナビ1-1-1-3</a>
                                        <ul>
                                            <li><a href="#">ナビ1-1-1-1</a></li>
                                            <li><a href="#">ナビ1-1-1-2</a></li>
                                            <li><a href="#">ナビ1-1-1-3</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">ナビ1-2</a></li>
                    <li><a href="#">ナビ1-3</a></li>
                </ul>
            </li>
            <li><a href="#">ナビ2</a></li>
            <li><a href="#">ナビ3</a></li>
            <li><a href="#">ナビ4</a></li>
        </ul>
    </nav>
</header>

<article>
    <p class="txt1">ウィンドウサイズを480px以下にしてご確認ください。</p>
    <p class="txt2">メニュー表示が変わりましたか?</p>
</article>

<script>
jQuery(document).ready(function () {
    jQuery('header nav').meanmenu();
});
</script>
</script>

</body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/02 19:41

    参考にさせていただきます!
    ありがとうございました!

    キャンセル

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

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

関連した質問

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