Barra laterale aperta per impostazione predefinita sul desktop, chiusa su dispositivo mobile

9

Sto riscontrando davvero dei problemi nel tentativo di ottenere che la mia barra laterale / i contenuti di navigazione (usando Bootstrap) mostrino (essere espansi) per impostazione predefinita sul desktop e chiusi per impostazione predefinita sui dispositivi mobili e che l'icona sia visualizzata solo sui dispositivi mobili. Non riesco a farlo funzionare.

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

Ho provato a usare questo codice javascript, ma invano:

 $('.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
fonte
Ehi, ho aggiunto un commento alla tua domanda con la soluzione esatta. Codice creato per te in modo che tu possa controllare il codice e l'output. Per favore, dai un'occhiata
— Priyanka,
Hai altri CSS?
— Codeply-er
Semplice aggiungilo classe stile sotto query mediawidth:600
— assegnalo alla

Risposte:

1

È possibile utilizzare la query multimediale CSS per nascondere / mostrare il contenuto in diversi viewport / dispositivo.

— Muhamad D. Fahrezi
fonte
0

Ecco il link di cosa hai bisogno assialmente. Ho creato la penna per te. Si prega di dare un'occhiata al link qui sotto.

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

Ho creato un esempio per te, basato sulla documentazione di bs4 relativa al contenuto esterno.

<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 questo esempio il codice collassa dall'alto, anziché da destra. In realtà sono in congedo e cercherò di completare l'esempio per soddisfare le tue esigenze.

JavaScript aggiuntivo:

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

Ho anche creato un violino per violino. Per vederlo in azione, ti preghiamo di ridimensionare la finestra interna in jsfiddle

— MattOpen
fonte
0

Il tuo codice Javascript corrente verrà sempre eseguito, indipendentemente dal dispositivo. Ciò di cui hai bisogno è un modo per verificare se il dispositivo è un computer o un telefono cellulare.

Un modo sarebbe quello di utilizzare il browser 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");
    }
});

Oppure, puoi semplicemente fare affidamento sulla larghezza della finestra (ma le piccole finestre del desktop verranno trattate come la versione mobile):

if(window.innerWidth <= 767) { // a certain threshold value, in pixels
    //mobile
    //do something
}
— Anis R.
fonte
Annusare la stringa dell'agente utente porta a codice che è difficile da mantenere. Le query multimediali sono molto migliori.
— km
Cosa è "difficile da mantenere" su una stringa? Ad ogni modo puoi racchiudere questo segno di spunta in una funzione, in modo che ogni volta che devi aggiornare la stringa, hai solo una riga di codice da modificare.
— Anis R.
Inoltre, non è possibile utilizzare le query multimediali CSS per attivare o disattivare i nomi delle classi come vuole l'OP
— Anis R.
Le stringhe User Agent dei dispositivi cambiano nel tempo man mano che vengono prodotti nuovi dispositivi. Ciò si traduce in un codice che si interrompe ogni volta che viene introdotto un nuovo dispositivo. Certo, puoi includerlo in una funzione, ma ti richiede comunque di cambiarlo ogni volta che viene introdotto un nuovo dispositivo. È meglio scegliere come target i dispositivi in ​​base alle loro dimensioni (utilizzando query multimediali CSS), non alla stringa agente utente. Non sono richiesti aggiornamenti quando viene introdotto un nuovo dispositivo. OP non voleva necessariamente cambiare i nomi delle classi; quello è stato il loro miglior tentativo di soluzione, e credo che sia inferiore alle domande dei media.
— km
0

Prima solo un paio di punti:

  1. Hai detto barra laterale, ma il tuo markup non sembra davvero una barra laterale per me, sembra un topnav reattivo. Cercherò di dargli un senso nel miglior modo possibile e dimostrerò anche una barra laterale funzionante, nel caso sia quello che vuoi davvero.

  2. Le voci del menu si trovano in un <ul>(elenco non ordinato) senza alcuna <li>(voci dell'elenco). Bootsrap js / css probabilmente ha bisogno di <li>s per funzionare correttamente. Tecnicamente a <ul>senza alcuno <li>è html valido, ma il solo contenuto consentito in a <ul>è <li>s quindi le ancore (o qualsiasi altra cosa) all'interno di a <ul>devono essere contenute in <li>s per essere valide.

  3. Non sono sicuro di cosa esattamente stai cercando di fare con le icone social, quindi le ho appena modificate in un modo che sembra ragionevole.

  4. Ho aggiunto overflow-y: scroll;l' <html>elemento in modo che quando apri il menu su un piccolo schermo non causi lo spostamento se viene aggiunta una barra di scorrimento. Potrebbe non essere necessario a seconda del design del sito e del layout dei contenuti.

Quindi iniziamo con un menu reattivo molto semplice.

Menu reattivo Bootstrap di base

Mostra snippet di codice

Va bene, sembra a posto, ma hai avuto un'immagine nel menu. Quindi inserirò un'immagine nel menu e le darò un po 'di css per modellarla. Quindi, con l'immagine, avremo bisogno di un po 'di CSS in più per posizionare bene gli elementi del menu:

  1. Posiziona il pulsante hamburger in modo che si trovi nella parte inferiore della barra di navigazione. Userò i 200px dell'immagine e sottrarrò alcuni rem. Potresti cambiare top: calc(100px - 1rem);in top: 1rem;per mettere l'hamburger in cima, o bottom: 1rem;se volevi che l'hamburger si attaccasse al fondo del navigatore anche quando aperto. Oppure elimina l'intera regola per utilizzare l'impostazione predefinita bootstrap che posiziona l'hamburger nel mezzo verticale.

  2. Posizionare le voci di menu in modo che si appoggino anche nella parte inferiore della barra dei menu quando non vengono compresse.

  3. posiziona anche le icone social in basso ma spingile verso il lato destro.

  4. I numeri 2 e 3 sopra dovrebbero applicarsi solo sopra il punto di interruzione medio quando il menu non è compresso, quindi li inserirò in una query multimediale per indirizzare oltre 768 px (punto di interruzione medio di bootstrap). Questo potrebbe anche essere fatto con bootstraps sass breakpoint mixin, ma qui useremo semplicemente CSS. Puoi vedere il posizionamento di questi elementi all'interno della regola di query @media nel CSS, dove puoi cambiarlo per spingerli in cima alla barra. Oppure rimuovi quelle regole per ripristinare le impostazioni predefinite bootstrap, che centra verticalmente gli elementi del menu e mette le icone social sotto di esse. Potresti anche mettere le icone social in <li>elementi all'interno del menu <ul>se volessi semplicemente che le icone cadano direttamente nel menu come le altre voci di menu.

con immagine nel menu

Mostra snippet di codice

Va bene, ma hai detto che era una barra laterale. Non ho familiarità con bootstrap, ma ritengo che né v3 né v4 forniscano un navigatore della barra laterale per impostazione predefinita. Qui puoi trovare diversi tutorial sulla barra laterale di bootstrap . Ho semplicemente usato la versione più semplice dai tutorial collegati sopra per creare un esempio qui.

Barra laterale pieghevole

Mostra snippet di codice

— Veneseme Tyras
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.