Milligram: Bagaimana cara mendorong elemen lain ke kanan menggunakan bilah sisi saya?

Dibuat pada 27 Okt 2017 · 5Komentar · Sumber: milligram/milligram

Saya ingin membuat navigasi samping sederhana yang memenuhi seluruh ketinggian layar. saya menggunakan
Miligram untuk basis saya, dan saya ingin navigasi samping saya bekerja dengannya. Saya memiliki pengaturan berikut:

Demo kodepen

Seperti yang Anda lihat, sidebar saya adalah elemen berikut

<div class="sidebar"></div>

dengan gaya berikut:

div.sidebar { 
      position: absolute; width: 250px; 
      height: 100%;
      z-index: 99; 
      background-color: black;
 }

Ini berfungsi, bilah sisi muncul di atas segalanya, tetapi yang lainnya tidak didorong ke samping. Dan jika layarnya kecil, kontennya bentrok dengan sidebar.

Bagaimana saya bisa membuatnya sehingga bilah sisi mendorong yang lainnya (termasuk bilah navigasi) ke kanan sebesar 250px (lebarnya)? Saya tahu ini akan membuat hal-hal tidak dapat digunakan pada layar yang lebih kecil, tetapi saya akan memberi pengguna cara untuk mengaktifkannya.

Hacktoberfest help wanted

Sumber

fooksupachai

👍1

Semua 5 komentar

Saya menemukan masalah ini juga. Semoga seseorang akan membantu dengan masalah ini.

abc985 pada 14 Des 2017

Tidak persis masalah dengan kerangka kerja. Apa yang Anda cari pada dasarnya adalah sidebar di luar kanvas. Saya telah memodifikasi Codepen Anda agar berfungsi: https://codepen.io/chillyorange/pen/EQYJvQ

Menerapkan pemosisian tetap pada bilah sisi dan membungkus konten di dalam elemen tambahan dengan margin kiri yang sesuai dengan lebar bilah sisi.

chillyorange pada 29 Jan 2018

👍1

Tanggapan @chillyorange harus menyelesaikan masalah Anda.

Item tetap tidak menggulir ke bawah. Jadi sidebar Anda akan memiliki tinggi 100% seperti yang Anda inginkan.

umitkucuk pada 29 Jan 2018

@fooksupachai saya dapat membantu Anda!

Jika Anda mendefinisikan position: absolute elemen ini akan tumpang tindih dengan yang lain. Anda dapat mencoba menggunakan Milligram Grid untuk mendapatkan perilaku yang diharapkan.

Kisi Miligram:

Properti CSS posisi:

Beri tahu saya jika Anda memiliki pertanyaan tentang cara menggunakan Milligram Grid .

cjpatoilo pada 7 Feb 2018

👍1

@fooksupachai untuk saat ini, saya akan menutup masalah ini.
Jika Anda membutuhkan bantuan, jangan ragu untuk membuka kembali atau membuka edisi baru.

cjpatoilo pada 19 Mei 2020

Apakah halaman ini membantu?

0 / 5 - 0 peringkat