Pasek boczny domyślnie otwarty na komputerze, zamknięty na telefonie komórkowym

9

Mam poważne problemy z uzyskaniem zawartości paska bocznego / nawigacji (za pomocą Bootstrap), aby domyślnie wyświetlać (być rozwijana) na komputerze i domyślnie zamykać na urządzeniach mobilnych, a ikona wyświetla się tylko na urządzeniach mobilnych. Nie mogę tego zrobić.

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

Próbowałem użyć tego kodu javascript, ale bezskutecznie:

 $('.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
źródło
Hej, dodałem komentarz do twojego pytania z dokładnym rozwiązaniem. Utworzono codepen, abyś mógł sprawdzić kod i dane wyjściowe. Proszę spojrzeć
Priyanka
Czy masz inny CSS?
Codeply-er
Proste dodawanie classi width:600
Awais

Odpowiedzi:

1

Możesz użyć CSS Media Query, aby ukryć / pokazać zawartość w innej rzutni / urządzeniu.

Muhamad D. Fahrezi
źródło
0

Oto link, którego potrzebujesz axactly. Stworzyłem dla ciebie pióro. Proszę spojrzeć na link poniżej.

    <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
źródło
0

Stworzyłem dla ciebie przykład na podstawie dokumentacji bs4 dotyczącej treści zewnętrznych.

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

W tym przykładzie kod zwija się od góry - zamiast od prawej. Właściwie jestem na urlopie i postaram się uzupełnić przykład, aby dopasować go do twoich potrzeb.

Dodatkowy 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();
})

Stworzyłem również skrzypce. Aby zobaczyć, jak działa, zmień rozmiar wewnętrznego okna w jsfiddle

MattOpen
źródło
0

Twój aktualny kod JavaScript zawsze będzie działał, niezależnie od urządzenia. Potrzebujesz sposobu, aby sprawdzić, czy urządzenie jest komputerem czy telefonem komórkowym.

Jednym ze sposobów byłoby użycie przeglądarki 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");
    }
});

Lub możesz po prostu polegać na szerokości okna (ale małe okna pulpitu będą traktowane jak wersja mobilna):

if(window.innerWidth <= 767) { // a certain threshold value, in pixels
    //mobile
    //do something
}
Anis R.
źródło
Wąchanie ciągu agenta użytkownika prowadzi do kodu, który jest trudny do utrzymania. Zapytania o media są znacznie lepsze.
kmoser
Co jest „trudne do utrzymania” w jednym łańcuchu? W każdym razie możesz zawinąć to zaznaczenie w funkcję, dzięki czemu za każdym razem, gdy musisz zaktualizować ciąg, masz tylko jeden wiersz kodu do edycji.
Anis R.
Ponadto nie można używać zapytań o media CSS do przełączania nazw klas, tak jak chce OP
Anis R.
Ciągi Agenta użytkownika urządzeń zmieniają się z czasem w miarę produkcji nowych urządzeń. Powoduje to uszkodzenie kodu za każdym razem, gdy wprowadzane są nowe urządzenia. Jasne, możesz zawinąć to w funkcję, ale nadal wymaga to zmiany po każdym wprowadzeniu nowego urządzenia. Lepiej jest kierować urządzenia na ich rozmiar (przy użyciu zapytań o media CSS), a nie na ciąg klienta-użytkownika. Po wprowadzeniu nowego urządzenia nie są wymagane żadne aktualizacje. OP niekoniecznie chciał przełączać nazwy klas; to była ich najlepsza próba rozwiązania, która moim zdaniem jest gorsza od zapytań medialnych.
kmoser
0

Najpierw tylko kilka punktów:

  1. Powiedziałeś, że pasek boczny, ale twój znacznik tak naprawdę nie wygląda jak pasek boczny, wygląda na responsywny topnav. Postaram się to jak najlepiej zrozumieć, a także pokażę działający pasek boczny, na wypadek, gdybyś tego naprawdę chciał.

  2. Twoje pozycje menu znajdują się na <ul>(liście nieuporządkowanej) bez żadnych <li>(elementów listy). Bootsrap js / css prawdopodobnie potrzebuje <li>s, aby działać poprawnie. Technicznie rzecz biorąc, <ul>bez żadnego <li>jest poprawny HTML, ale jedyna dozwolona zawartość <ul>to <li>s, więc kotwice (lub cokolwiek innego) wewnątrz <ul>muszą być zawarte w <li>s, aby były ważne.

  3. Nie jestem pewien, co dokładnie próbujesz zrobić z ikonami społecznościowymi, więc dostosowałem je nieco w sposób, który wydaje się rozsądny.

  4. Dodałem overflow-y: scroll;na <html>elemencie, tak aby po otwarciu menu na małym ekranie nie spowoduje przesuwanie się pasek przewijania zostanie dodana. Może nie być potrzebny w zależności od projektu witryny i układu treści.

Zacznijmy więc od bardzo podstawowego responsywnego menu.

Podstawowe menu responsywne Bootstrap

Pokaż fragment kodu

Okej, to wygląda dobrze, ale masz zdjęcie w menu. Więc wstawię obraz do menu i dam mu trochę css, aby go stylizować. Następnie z obrazem potrzebujemy trochę dodatkowego CSS, aby ładnie pozycjonować elementy menu:

  1. Ustaw przycisk hamburgera, aby znajdował się na dole paska nawigacyjnego. Użyję 200 pikseli obrazu i odejmę kilka remów. Możesz zmienić na, top: calc(100px - 1rem);aby top: 1rem;umieścić hamburgera na wierzchu, lubbottom: 1rem; jeśli chcesz, aby hamburger przylegał do dolnej części urządzenia nawigacyjnego nawet po otwarciu. Lub po prostu usuń całą regułę, aby użyć domyślnego paska ładującego, który umieszcza hamburgera w pionowym środku.

  2. Ustaw pozycje menu tak, aby spoczywały również na dole paska menu, gdy nie są zwinięte.

  3. umieść ikony społecznościowe również na dole, ale przesuń je na prawą stronę.

  4. Numery 2 i 3 powyżej powinny obowiązywać powyżej średniego punktu przerwania, gdy menu nie jest zwinięte, więc umieszczę je w zapytaniu o media, aby osiągnąć cel powyżej 768 pikseli (średni punkt zatrzymania bootstrapa). Można to również zrobić za pomocą bootstrapowych miksów sass breakpoint, ale użyjemy tutaj zwykłego css. Możesz zobaczyć ustawienie tych elementów w regule zapytania @media w css, gdzie możesz to zmienić, aby przesunąć je na górę paska. Lub po prostu usuń te reguły, aby przywrócić domyślne ustawienia ładowania początkowego, które pionowo wyśrodkowują elementy menu i umieszczają pod nimi ikony mediów społecznościowych. Możesz również umieścić ikony społecznościowe w <li>elementach menu<ul> jeśli chcesz, aby ikony spadły bezpośrednio do menu, podobnie jak inne elementy menu.

z obrazem w menu

Pokaż fragment kodu

Okej, ale powiedziałeś, że to pasek boczny. Nie jestem zaznajomiony z bootstrap, ale rozumiem, że ani v3, ani v4 domyślnie nie zapewniają nawigacji na pasku bocznym. Kilka samouczków paska startowego można znaleźć tutaj . Po prostu użyłem najbardziej podstawowej wersji z samouczków połączonych powyżej, aby stworzyć tutaj przykład.

Składany pasek boczny

Pokaż fragment kodu

Veneseme Tyras
źródło