Bootstrap offcanvas botton

di il
9 risposte

Bootstrap offcanvas botton

Ciao ! per la mia interfaccia responsive che utilizza bootstrap vorrei rendere visibile un bottone per device < 767 px che mi attiva e disattiva un menu . fin qui ci sono riuscito . ora pero' vorrei che la situazione iniziale di apertura sia quella in cui bottone e menu siano visibili entrambi e quindi successivamente a discrezione dell'utente si puo tramite il bottone renedere hidden/visible il menu.

come potrei fare ? grazie

9 Risposte

  • Re: Bootstrap offcanvas botton

    Togli la classe per width<767 così compare sempre, poi aggiungi del codice js per applicare la classe quando vuole l'utente.

    ciao
  • Re: Bootstrap offcanvas botton

    Ciao grazie per la risposta

    sarà dura per me riuscirci forse non sono ancora abbastanza skillato ma voglio provarci magari con il tuo aiuto

    per prima cosa prima di avventurarmi in javascript ho tolto l'intera media queries dell'offcanvas ma il menu è già scomparso ....perchè ?
  • Re: Bootstrap offcanvas botton

    Mi riferisco a questo esempio
    http://getbootstrap.com/examples/offcanvas
  • Re: Bootstrap offcanvas botton

    Guardando il codice, ho visto che il menu viene mostrato/nascosto spostandolo a destra o sinistra in modo da farlo entrare o uscire dallo schermo.

    In particolare, all'inizio viene applicata, mediante media query, la classe:
    
    .row-offcanvas-right .sidebar-offcanvas {
        right: -50%;
    }
    
    che lo nasconde. In seguito il codice js contenuto in offcanvas.js:
    
    $(document).ready(function () {
      $('[data-toggle="offcanvas"]').click(function () {
        $('.row-offcanvas').toggleClass('active')
      });
    });
    
    aggiunge o toglie la classe active:
    
    .row-offcanvas-right.active {
        right: 50%; /* 6 columns */
      }
    
    che sposta dentro o fuori dal riquadro il menu quando l'utente clicca sul pulsante.

    La soluzione è quindi aggiungere in coda alle classi applicate alla sidebar la classe active. In questo modo sovrascriverà sidebar-offcanvas rendendo visibile il menu quando si restringe lo schermo, e il menu potrà comunque essere nascosto col pulsante.

    ciao
  • Re: Bootstrap offcanvas botton

    Grazie dell'aiuto

    ho aggiunto "active" in questa riga , va bene ? non succede nulla....

    <div class="col-xs-6 col-sm-3 sidebar-offcanvas active" id="sidebar" role="navigation">
  • Re: Bootstrap offcanvas botton

    C'e' nessuno ?
  • Re: Bootstrap offcanvas botton

    rufuss ha scritto:


    grazie dell'aiuto

    ho aggiunto "active" in questa riga , va bene ? non succede nulla....

    <div class="col-xs-6 col-sm-3 sidebar-offcanvas active" id="sidebar" role="navigation">
    e' giusto quello che ho fatto qui ?
  • Re: Bootstrap offcanvas botton

    C'e' nessuno ?
  • Re: Bootstrap offcanvas botton

    Ho risolto la classe active andava messa nel div row !
    <div class="row row-offcanvas row-offcanvas-left active">

    cmq non ho ben capito come funzione questa classe active....cioe' non ho capito bene se e' una classe di bootstrap oppure una pseudoclasse css

    grazie sei stato utilissimo
Devi accedere o registrarti per scrivere nel forum
9 risposte