サイドバーはデスクトップではデフォルトで開き、モバイルでは閉じます

9

サイドバー/ナビゲーションコンテンツ（Bootstrapを使用）をデフォルトでデスクトップに表示（展開）し、デフォルトでモバイルで閉じ、アイコンをモバイルでのみ表示しようとすると、実際に問題が発生します。これを機能させることができないようです。

<nav class="menu menu-open" id="theMenu">
      <div class="menu-wrap">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i>
            </button>
          <div id="menu-logo">
            <img src="Final_Logo.png" width="210" height="214" alt="">
          </div>
          <div id="navbarToggleExternalContent">
          <ul id="main-menu">
              <a href="#">Home</a>
              <a href="#">About</a>
              <a href="#">Writing</a>
              <a href="#">Events</a>
              <a href="#">Speaking</a>
              <a href="#">Music</a>
          </ul>
          <ul id="social-icons">
              <li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
              <li class="twitter"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
              <li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
          </ul>
        </div>
      </div>
  </nav>

私はこのjavascriptコードを使ってみましたが、役に立ちません：

 $('.menu-close').on('click', function(){
    $('#menuToggle').toggleClass('active');
    $('body').toggleClass('body-push-toright');
    $('#theMenu').toggleClass('menu-open');
    alert("Test");
    });
javascript  html  css  bootstrap-4  responsive-design 
— フランク・ドウ
ソース
ねえ、私はあなたの質問に正確な解決策でコメントを追加しました。コードをチェックして出力できるように、コードペンを作成しました。ご覧ください
— Priyanka
他のCSSはありますか？
— Codeply-er、
classメディアクエリの下での簡単な追加とスタイル設定width:600
— Awais

回答:

0

ここにあなたが正確に必要なリンクがあります。私はあなたのためにペンを作りました。以下のリンクをご覧ください。

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="theMenu">
  <a class="navbar-brand" id="menu-logo">
            <img src="Final_Logo.png" width="210" height="214" alt="">
          </a>      
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto" id="main-menu">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Writing</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Events</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Speaking</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Music</a></li>
            <li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
              <li class="twitter"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
              <li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
          </ul>
  </div>
  </nav>

https://codepen.io/pgurav/pen/abbQZJL

— プリヤンカ
ソース
0

外部コンテンツに関するbs4ドキュメントに基づいて、サンプルを作成しました。

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark navbar-expand-lg">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

この例では、コードは右からではなく、上から折りたたまれています。実は私は休暇中なので、あなたのニーズに合うように例を完成させようとしています。

追加のJavaScript：

var externalContent = $('#navbarToggleExternalContent'),
    execOnResize = function(){
// also the next line was only for use in jsfiddle
// in the real world you need to use window.outerWidth
// 992 pixel is the width of breakpoint corresponding to the class "navbar-expand-lg". Feel free to adapt it to fit your needs.
    if(window.innerWidth >= 992){
        externalContent.addClass('show');
    }else{
        externalContent.removeClass('show');
    }
};
// the next line was only addded for jsfiddle       
execOnResize();

window.onresize = function(event) {
    execOnResize();
};

window.addEventListener('load', function() {
    execOnResize();
})

フィドルフィドルも作成しました。 動作を確認するには、jsfiddleで内部ウィンドウのサイズを変更してください

— MattOpen
ソース
0

デバイスに関係なく、現在のJavaScriptコードは常に実行されます。必要なのは、デバイスがコンピューターか携帯電話かを確認する方法です。

1つの方法は、ブラウザのを使用することですUserAgent。

$('.menu-close').on('click', function(){
    if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
        //mobile
        $('#menuToggle').toggleClass('active');
        $('body').toggleClass('body-push-toright');
        $('#theMenu').toggleClass('menu-open');
        alert("Test");
    }
});

または、単にウィンドウの幅に依存することもできます（ただし、小さなデスクトップウィンドウはモバイルバージョンのように扱われます）。

if(window.innerWidth <= 767) { // a certain threshold value, in pixels
    //mobile
    //do something
}
— アニス・R
ソース
ユーザーエージェント文字列をスニッフィングすると、コードのメンテナンスが難しくなります。メディアクエリははるかに優れています。
— kmoser
1本の紐について「メンテナンスが難しい」とは？とにかく、このチェックを関数でラップできるので、文字列を更新する必要があるときはいつでも、編集するコードは1行だけです。
— Anis R.
また、CSのメディアクエリを使用して、OPのようにクラス名を切り替えることはできません
— Anis R.
デバイスのユーザーエージェント文字列は、新しいデバイスが作成されるにつれて時間とともに変化します。その結果、新しいデバイスが導入されるたびにコードが壊れます。もちろん、これを関数にラップすることはできますが、新しいデバイスが導入されるたびに変更する必要があります。ユーザーエージェント文字列ではなく、サイズ（CSSメディアクエリを使用）でデバイスをターゲットにすることをお勧めします。新しいデバイスが導入されても、更新は必要ありません。OPは必ずしもクラス名を切り替える必要はありませんでした。これがソリューションでの最善の試みであり、メディアクエリよりも劣ると私は信じています。
— kmoser
0

最初にほんの数点：

  1. あなたはサイドバーを言ったが、あなたのマークアップは実際にはサイドバーのようには見えず、レスポンシブなトップナビゲーションのように見える。私はできる限りそれを理解するように努めます。そして、あなたが本当に望んでいるものである場合に備えて、機能するサイドバーも示します。

  2. メニュー項目が（リスト項目）の<ul>ない（順不同リスト）にあります<li>。bootsrap js / cssが<li>正しく機能するためには、おそらくsが必要です。技術的には<ul>何もない<li>は有効なhtmlですが、で許可されて<ul>いるコンテンツは<li>s のみなので、有効にするためには内のアンカー（またはその他）を内に含める<ul>必要が<li>あります。

  3. あなたがソーシャルアイコンで何をしようとしているのか正確にはわからないので、賢明な方法で少し調整しました。

  4. 小さな画面でメニューを開いたときに、スクロールバーが追加されてもシフトしないようoverflow-y: scroll;に、<html>要素を追加しました。サイトのデザインやコンテンツのレイアウトによっては必要ない場合があります。

それでは、非常に基本的なレスポンシブメニューから始めましょう。

ベーシックブートストラップレスポンシブメニュー

コードスニペットを表示

わかりました。見た目はいいですが、メニューに画像がありました。だから私はメニューに画像を入れ、それをスタイルするために少しCSSを与えます。次に、画像を使用して、メニュー要素を適切に配置するために少し余分なCSSが必要になります。

  1. ハンバーガーボタンをナビゲーションバーの下部に配置します。200pxの画像を使用して、数レムを差し引きます。を変更しtop: calc(100px - 1rem);てtop: 1rem;ハンバーガーを上に置くかbottom: 1rem;、ハンバーガーを開いたときでもナビの下部にくっつくようにすることができます。または、ルール全体を削除して、ハンバーガーを垂直方向の真ん中に置くブートストラップのデフォルトを使用します。

  2. 折りたたまれていないときは、メニュー項目をメニューバーの下部にも配置します。

  3. ソーシャルアイコンも下部に配置しますが、右側に押し込みます。

  4. 上記の番号2と3は、メニューが折りたたまれていない場合に中程度のブレークポイントの上にのみ適用する必要があるので、768ピクセル（ブートストラップの中程度のブレークポイント）をターゲットにするには、メディアクエリに入れます。これは、bootstraps sassブレークポイントミックスインでも実行できますが、ここでは単純なcssを使用します。CSSの@mediaクエリルール内でこれらの要素の配置を確認できます。CSSでは、要素を変更してバーの上部にプッシュできます。または、これらのルールを削除して、メニュー要素を垂直方向に中央揃えし、その下にソーシャルアイコンを配置するブートストラップのデフォルトに戻します。アイコンを他のメニュー項目のようにメニューに直接配置したい場合は、ソーシャルアイコンを<li>メニュー内の要素に配置することもでき<ul>ます。

メニューに画像あり

コードスニペットを表示

さて、あなたはそれがサイドバーだと言った。私はブートストラップについてあまり詳しくありませんが、v3とv4のどちらもデフォルトでサイドバーナビゲーションを提供していないことを知っています。いくつかのブートストラップサイドバーチュートリアルはここにあります。上記のチュートリアルの最も基本的なバージョンを使用して、ここで例を作成しました。

折りたたみ可能なサイドバー

コードスニペットを表示

— ベネセム・ティラス
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.