Sidebar Buka Secara Default di Desktop, Ditutup di ponsel

9

Saya mengalami masalah nyata ketika mencoba untuk mendapatkan sidebar / konten navigasi saya (menggunakan Bootstrap) untuk ditampilkan (diperluas) secara default di desktop dan ditutup secara default di ponsel dan ikon hanya ditampilkan di ponsel. Sepertinya saya tidak bisa melakukan ini.

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

Saya sudah mencoba menggunakan kode javascript ini, tetapi tidak berhasil:

 $('.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
sumber
Hai, saya telah menambahkan komentar pada pertanyaan Anda dengan solusi tepat. Codepen dibuat untuk Anda sehingga Anda dapat memeriksa kode dan output. Silakan lihat
Priyanka
Apakah Anda memiliki CSS lain?
Codeply-er
Tambahkan classdan gaya sederhana di bawah permintaan mediawidth:600
Awais

Jawaban:

1

Anda dapat menggunakan CSS Media Query untuk menyembunyikan / menampilkan konten di berbagai viewport / perangkat.

Muhamad D. Fahrezi
sumber
0

Inilah tautan yang Anda butuhkan dengan tepat. Saya telah membuat pena untuk Anda. Silakan lihat tautan di bawah ini.

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

Saya telah membuat contoh untuk Anda, berdasarkan dokumentasi bs4 tentang konten eksternal.

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

Dalam contoh ini kode tersebut runtuh dari atas - bukan dari kanan. Sebenarnya saya sedang cuti dan akan mencoba untuk melengkapi contoh agar sesuai dengan kebutuhan Anda.

JavaScript tambahan:

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

Saya juga telah membuat biola biola Untuk melihatnya dalam aksi, silakan mengubah ukuran jendela bagian dalam jsfiddle

MattOpen
sumber
0

Kode Javascript Anda saat ini akan selalu berjalan, apa pun perangkatnya. Yang Anda butuhkan adalah cara untuk memeriksa apakah perangkat itu komputer atau ponsel.

Salah satu caranya adalah dengan menggunakan 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");
    }
});

Atau, Anda bisa mengandalkan lebar jendela (tetapi jendela desktop kecil akan diperlakukan seperti versi seluler):

if(window.innerWidth <= 767) { // a certain threshold value, in pixels
    //mobile
    //do something
}
Anis R.
sumber
Mengendus string Agen Pengguna mengarah ke kode yang sulit dipertahankan. Pertanyaan media jauh lebih baik.
kmoser
Apa yang "sulit dipertahankan" tentang satu string? Pokoknya Anda dapat membungkus cek ini dalam suatu fungsi, sehingga setiap kali Anda perlu memperbarui string, Anda hanya memiliki satu baris kode untuk diedit.
Anis R.
Selain itu, Anda tidak dapat menggunakan kueri media CSS untuk beralih nama kelas seperti yang diinginkan OP
Anis R.
String Agen Pengguna Perangkat berubah seiring waktu saat perangkat baru diproduksi. Itu menghasilkan kode yang rusak setiap kali perangkat baru diperkenalkan. Tentu, Anda dapat membungkusnya dalam suatu fungsi, tetapi masih mengharuskan Anda untuk mengubahnya setiap kali perangkat baru diperkenalkan. Lebih baik menargetkan perangkat berdasarkan ukurannya (menggunakan kueri media CSS), bukan string agen pengguna. Tidak diperlukan pembaruan saat perangkat baru diperkenalkan. OP tidak selalu ingin beralih nama kelas; itu adalah upaya terbaik mereka pada solusi, dan yang saya percaya lebih rendah dari pertanyaan media.
kmoser
0

Pertama hanya beberapa poin:

  1. Anda mengatakan sidebar, tetapi markup Anda tidak benar-benar terlihat seperti sidebar bagi saya, sepertinya topnav responsif. Saya akan mencoba untuk memahaminya sebaik mungkin, dan saya akan menunjukkan sidebar yang berfungsi juga, jika itu yang Anda inginkan.

  2. Item menu Anda ada dalam <ul>(daftar tidak berurutan) tanpa <li>(daftar item). Bootsrap js / css mungkin perlu <li>s agar berfungsi dengan benar. Secara teknis a <ul>tanpa ada <li>html yang valid, tetapi satu-satunya konten yang diizinkan dalam <ul>adalah <li>s sehingga jangkar (atau apa pun) di dalam a <ul>harus dimuat dalam <li>s agar valid.

  3. Saya tidak yakin apa yang sebenarnya Anda coba lakukan dengan ikon sosial jadi saya hanya menyesuaikan sedikit dengan cara yang tampaknya masuk akal.

  4. Saya menambahkan overflow-y: scroll;pada <html>elemen sehingga ketika Anda membuka menu di layar kecil itu tidak akan menyebabkan pergeseran jika bilah gulir ditambahkan. Mungkin tidak diperlukan tergantung pada desain situs Anda dan tata letak konten.

Jadi mari kita mulai dengan menu responsif yang sangat mendasar.

Menu Responsif Bootstrap Dasar

Tampilkan cuplikan kode

Oke, itu terlihat oke, tetapi Anda memiliki gambar di menu. Jadi saya akan meletakkan gambar di menu dan memberikan sedikit css untuk menatanya. Kemudian dengan gambar, kita perlu sedikit CSS ekstra untuk memposisikan elemen menu dengan baik:

  1. Posisikan tombol hamburger sehingga berada di bagian bawah navbar. Saya akan menggunakan 200px gambar dan mengurangi beberapa rem. Anda bisa mengubah top: calc(100px - 1rem);untuk top: 1rem;menempatkan hamburger di atas, atau bottom: 1rem;jika Anda ingin hamburger untuk tongkat ke bawah nav bahkan ketika dibuka. Atau hapus saja seluruh aturan untuk menggunakan bootstrap default yang menempatkan hamburger di tengah vertikal.

  2. Posisikan item menu juga bersandar di bagian bawah menu bar ketika tidak runtuh.

  3. posisikan ikon sosial di bagian bawah juga, tetapi dorong ke sisi kanan.

  4. Angka 2 & 3 di atas seharusnya hanya berlaku di atas breakpoint menengah ketika menu tidak diciutkan jadi saya akan menempatkan mereka dalam kueri media untuk menargetkan lebih dari 768px (breakpoint sedang bootstrap). Ini juga bisa dilakukan dengan bootstraps sass breakpoint mixins, tetapi kami hanya akan menggunakan css biasa di sini. Anda dapat melihat posisi elemen-elemen ini dalam aturan kueri @media di css, tempat Anda dapat mengubahnya untuk mendorongnya ke bagian atas bilah. Atau cukup hapus aturan itu untuk kembali ke default bootstrap, yang secara vertikal memusatkan elemen menu, dan menempatkan ikon sosial di bawahnya. Anda juga bisa memasukkan ikon sosial ke <li>dalam elemen menu <ul>jika Anda ingin ikon tersebut jatuh ke dalam menu seperti item menu lainnya.

dengan gambar di menu

Tampilkan cuplikan kode

Oke, tapi kamu bilang itu sidebar. Saya tidak begitu terbiasa dengan bootstrap, tetapi saya tahu bahwa baik v3 maupun v4 tidak menyediakan sidebar nav secara default. Beberapa tutorial sidebar bootstrap dapat ditemukan di sini . Saya hanya menggunakan versi paling dasar dari tutorial yang ditautkan di atas untuk membuat contoh di sini.

Sidebar yang Dapat Dilipat

Tampilkan cuplikan kode

Veneseme Tyras
sumber