Seitenleiste Standardmäßig auf dem Desktop geöffnet, auf Mobilgeräten geschlossen

9

Ich habe einige echte Probleme beim Versuch, meine Seitenleisten- / Navigationsinhalte (mithilfe von Bootstrap) standardmäßig auf dem Desktop anzuzeigen (zu erweitern) und standardmäßig auf Mobilgeräten zu schließen und das Symbol nur auf Mobilgeräten anzuzeigen. Ich kann das scheinbar nicht zum Laufen bringen.

<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>

Ich habe versucht, diesen Javascript-Code zu verwenden, aber ohne Erfolg:

 $('.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 Frank Doe
quelle
Hey, ich habe Ihre Frage mit einer genauen Lösung kommentiert. Codepen für Sie erstellt, damit Sie den Code und die Ausgabe überprüfen können. Bitte schauen Sie
Priyanka
Haben Sie anderes CSS?
Codeply-er
Einfach hinzufügen classund unter Medienabfrage width:600
formatieren

Antworten:

1

Sie können CSS Media Query verwenden, um Inhalte in verschiedenen Ansichtsfenstern / Geräten auszublenden / anzuzeigen.

Muhamad D. Fahrezi
quelle
0

Hier ist der Link, was Sie genau brauchen. Ich habe einen Stift für dich erstellt. Bitte schauen Sie in den Link unten.

    <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

Priyanka
quelle
0

Ich habe ein Beispiel für Sie erstellt, basierend auf der bs4-Dokumentation zu externen Inhalten.

<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>

In diesem Beispiel wird der Code von oben anstatt von rechts ausgeblendet. Eigentlich bin ich in Urlaub und werde versuchen, das Beispiel so zu vervollständigen, dass es Ihren Bedürfnissen entspricht.

Zusätzliches 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();
})

Ich habe auch eine Geige geschaffen Geige , um es in Aktion zu sehen, das innere Fenster in jsfiddle die Größe

MattOpen
quelle
0

Ihr aktueller Javascript-Code wird unabhängig vom Gerät immer ausgeführt. Sie benötigen eine Möglichkeit, um zu überprüfen, ob es sich bei dem Gerät um einen Computer oder ein Mobiltelefon handelt.

Eine Möglichkeit wäre, den Browser zu verwenden 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");
    }
});

Sie können sich auch einfach auf die Breite des Fensters verlassen (kleine Desktop-Fenster werden jedoch wie die mobile Version behandelt):

if(window.innerWidth <= 767) { // a certain threshold value, in pixels
    //mobile
    //do something
}
Anis R.
quelle
Das Abhören der User Agent-Zeichenfolge führt zu Code, der schwer zu pflegen ist. Medienabfragen sind viel besser.
kmoser
Was ist an einer Saite "schwer zu pflegen"? Auf jeden Fall können Sie diese Prüfung in eine Funktion einbinden, sodass Sie immer dann, wenn Sie die Zeichenfolge aktualisieren müssen, nur eine Codezeile bearbeiten müssen.
Anis R.
Sie können auch keine CSS-Medienabfragen verwenden, um Klassennamen wie vom OP
gewünscht
Die User Agent-Zeichenfolgen der Geräte ändern sich im Laufe der Zeit, wenn neue Geräte erstellt werden. Dies führt zu Code, der jedes Mal unterbrochen wird, wenn ein neues Gerät eingeführt wird. Natürlich können Sie das in eine Funktion einbinden, aber Sie müssen sie immer noch ändern, wenn ein neues Gerät eingeführt wird. Es ist besser, Geräte nach ihrer Größe (mithilfe von CSS-Medienabfragen) und nicht nach der Benutzeragentenzeichenfolge auszurichten. Bei der Einführung eines neuen Geräts sind keine Updates erforderlich. OP wollte nicht unbedingt Klassennamen umschalten. Das war ihr bester Lösungsversuch, der meiner Meinung nach den Medienanfragen unterlegen ist.
kmoser
0

Zunächst nur ein paar Punkte:

  1. Sie sagten Seitenleiste, aber Ihr Markup sieht für mich nicht wirklich wie eine Seitenleiste aus, sondern wie ein ansprechendes Topnav. Ich werde versuchen, es so gut wie möglich zu verstehen, und ich werde auch eine funktionierende Seitenleiste demonstrieren, falls Sie das wirklich wollen.

  2. Ihre Menüpunkte befinden sich in einer <ul>(ungeordneten Liste) ohne <li>(Listenelemente). Der Bootsrap js / css benötigt wahrscheinlich das <li>s, um richtig zu funktionieren. Technisch gesehen ist a <ul>ohne any <li>ein gültiges HTML, aber der einzige Inhalt, der in a zulässig ist, <ul>sind <li>s, sodass Anker (oder irgendetwas anderes) in a <ul>in <li>s enthalten sein müssen , um gültig zu sein.

  3. Ich bin mir nicht sicher, was genau Sie mit den sozialen Symbolen versuchen, also habe ich sie nur leicht angepasst, so dass es sinnvoll erscheint.

  4. Ich habe overflow-y: scroll;das <html>Element hinzugefügt , damit beim Öffnen des Menüs auf einem kleinen Bildschirm keine Verschiebung auftritt, wenn eine Bildlaufleiste hinzugefügt wird. Abhängig von Ihrem Website-Design und Inhaltslayout wird dies möglicherweise nicht benötigt.

Beginnen wir also mit einem sehr einfachen Reaktionsmenü.

Grundlegendes Bootstrap-Reaktionsmenü

Code-Snippet anzeigen

Okay, das sieht okay aus, aber Sie hatten ein Bild im Menü. Also werde ich ein Bild in das Menü einfügen und ihm ein wenig CSS geben, um es zu stylen. Dann brauchen wir mit dem Bild ein wenig zusätzliches CSS, um Menüelemente gut zu positionieren:

  1. Positionieren Sie den Hamburger-Knopf so, dass er unten in der Navigationsleiste sitzt. Ich werde die 200px des Bildes verwenden und ein paar Rem subtrahieren. Sie könnten die ändern , top: calc(100px - 1rem);um top: 1rem;die Hamburger an der Spitze zu setzen, oder bottom: 1rem;wenn Sie die Hamburgeren Stick auf den Boden des nav auch wenn sie geöffnet wollen. Oder löschen Sie einfach die gesamte Regel, um die Bootstrap-Standardeinstellung zu verwenden, mit der der Hamburger in der vertikalen Mitte platziert wird.

  2. Positionieren Sie die Menüelemente so, dass sie auch im unteren Bereich der Menüleiste angezeigt werden, wenn sie nicht reduziert sind.

  3. Positionieren Sie die sozialen Symbole auch unten, aber schieben Sie sie nach rechts.

  4. Die obigen Nummern 2 und 3 sollten nur über dem mittleren Haltepunkt gelten, wenn das Menü nicht ausgeblendet ist. Daher werde ich sie in eine Medienabfrage einfügen, um ein Ziel von über 768px (mittlerer Haltepunkt des Bootstraps) zu erreichen. Dies könnte auch mit Bootstraps-Sass-Breakpoint-Mixins geschehen, aber wir werden hier nur einfaches CSS verwenden. Sie können die Positionierung dieser Elemente in der @ media-Abfrageregel in der CSS sehen, wo Sie sie ändern können, um sie an den oberen Rand der Leiste zu verschieben. Oder entfernen Sie einfach diese Regeln, um zu den Bootstrap-Standardeinstellungen zurückzukehren, bei denen Menüelemente vertikal zentriert und die sozialen Symbole darunter platziert werden. Sie können die sozialen Symbole auch in <li>Elemente innerhalb des Menüs einfügen, <ul>wenn Sie nur möchten, dass die Symbole wie die anderen Menüelemente direkt in das Menü fallen.

mit Bild im Menü

Code-Snippet anzeigen

Okay, aber Sie sagten, es sei eine Seitenleiste. Ich bin mit Bootstrap nicht so vertraut, aber ich stelle fest, dass weder Version 3 noch Version 4 standardmäßig ein Sidebar-Navi bieten. Mehrere Bootstrap - Sidebar - Tutorials finden sich hier . Ich habe einfach die grundlegendste Version aus den oben verlinkten Tutorials verwendet, um hier ein Beispiel zu erstellen.

Zusammenklappbare Seitenleiste

Code-Snippet anzeigen

Veneseme Tyras
quelle