0

完全に機能するモバイル ファーストのレスポンシブ Web サイトを作成しました。この時点で、Bootstrap などのサイトのフレームワークは使用していません。jquery の知識はほとんどありませんが、Bootstrap が提供する同様の折りたたみメニューを実装しようとしています。3 つのバーのメニュー アイコンがあるので、ロゴの下にメニューを折りたたむトグル機能が必要だと思います。私が作成している Web サイトは非常に軽量であり、巨大なブートストラップ レスポンシブ css ファイルを追加する必要はなく、既に使用している命名規則の一部では機能しません。ブートストラップから折りたたみプラグインだけを取得して、CSS に適応させることは可能ですか? 可能であれば、どのような手順を実行する必要がありますか? 誰かが知識や他のチュートリアルを持っていれば、これを別の方法で作成することができます. ありがとうございました。

以下は私のhtmlセットアップです。折りたたみjqueryを機能させるためにcssを追加する必要があるかどうかを確認するのにこれが役立つかどうかはわかりません。

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</head>


<body>
    <section class="grid sticky">
        <div class="container"> 
            <header class="grid twelve header">
                <a class="menuButton not-desktop not-tablet" data-toggle="collapse" data-target=".nav-collapse">
                    <div class="iconBar"></div>
                    <div class="iconBar"></div>
                    <div class="iconBar"></div>
                </a>
                <div class="logoHolder">
                    <a class="logo" href="index.html">
                        <img src="img/logo/ks_logo.svg"> 
                    </a>
                </div>
                <!-- Main Nav, hidden below 768 px -->
                <nav class="mainNav  not-phone not-phoneSM">
                    <ul class="nav">
                        <li><a href="work.html">Work</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
            </header>
        </div>  
    </section>
<!-- Mobile Main Nav, called upon to relieve when screen is at 768 px -->
    <section class="not-desktop not-tablet">
            <header>
                <nav class="mobileMainNav nav-collapse collapse">
                    <ul>
                        <li><a href="work.html">Work</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
            </header>
    </section>

`

4

1 に答える 1

0

さてあなたが参照しているセクションは

<div class="navbar">
 <div class="navbar-inner">
  <div class="container">

  <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>

  <!-- Be sure to leave the brand out there if you want it shown -->
  <a class="brand" href="#">Project name</a>

  <!-- Everything you want hidden at 940px or less, place within here -->
  <div class="nav-collapse collapse">
    <!-- .nav, .navbar-search, .navbar-form, etc -->
   </div>
  </div>
 </div>
</div>

いつでもブートストラップcssとブートストラップjsをダウンロードし、cssを変更してから縮小することができますが、パフォーマンスにそれほど悪影響を与えることはないと思います。または、必要なパーツを抽出して、独自のデザインに組み込むこともできます。マークアップやレスポンシブCSSを確認せずに、これ以上アドバイスするのは難しいです。

于 2013-02-22T15:02:20.747 に答える