Menambahkan Scroll Pada Sub Sajian Untuk Sajian Fixed

Sempat tidak menyadari bahwa saat blog diakses via mobile atau hp, sub sajian yang mempunyai label yang banyak pada sajian blog yang dibentuk fixed ternyata tidak dapat seluruhnya terlihat. Label yang banyak atau panjang berderet ke bawah pada sub sajian yang fixed ternyata melampaui batas bawah layar hp, sehingga tidak terlihat sebab sajian tidak dapat discroll sebab dibentuk fixed atau melayang.

Cukup galau juga untuk menawarkan imbas scroll pada sub sajian yang mempunyai label yang banyak ini. Namun setelah melaksanakan beberapa percobaan pada kode-kode css menu-nya, alhasil aku menemukan cara yang sempurna untuk menawarkan scroll pada sub sajian yang mempunyai label yang banyak ini. Silahkan lihat demonya sebelum ditambahkan scroll dan setelah ditambahkan scroll pada link di bawah ini.

DEMO TANPA SCROLL | DEMO DENGAN SCROLL

Untuk menawarkan scroll pada sub sajian yang mempunyai label yang banyak, silahkan tambahkan dulu class pada ul sub sajian biar sub sajian yang mempunyai label sedikit (tidak ingin ditambahkan scroll) tidak terpengaruhi. Misalnya dengan class='expand' menyerupai pada teladan di bawah ini.

 <div id='cssmenu'>
 <ul>
   <li><a href='/' title='Home'><span>Home</span></a></li>
   <li class='has-sub'><a href='#' title='About This Blog'><span>About This Blog</span></a>
      <ul>
         <li><a href='#' title='About'><span>About</span></a></li>
         <li><a href='#' title='Contact'><span>Contact</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#' title='More'><span>More Menus</span></a>
      <ul class='expand'>
         <li><a href='#' title='More Menu 1'><span>More Menu 1</span></a></li>
 <li><a href='#' title='More Menu 2'><span>More Menu 2</span></a></li>
 <li><a href='#' title='More Menu 3'><span>More Menu 3</span></a></li>
 <li><a href='#' title='More Menu 4'><span>More Menu 4</span></a></li>
 <li><a href='3' title='More Menu 5'><span>More Menu 5</span></a></li>
 <li><a href='#' title='More Menu 6'><span>More Menu 6</span></a></li>
 <li><a href='#' title='More Menu 7'><span>More Menu 7</span></a></li>
 <li><a href='#' title='More Menu 8'><span>More Menu 8</span></a></li>
 <li><a href='#' title='More Menu 9'><span>More Menu 9</span></a></li>
 <li><a href='3' title='More Menu 10'><span>More Menu 10</span></a></li>
       </ul>
    </li>
 </ul>
 </div>

Kemudian buat instruksi css untuk ul sub sajian class expand tadi dengan menawarkan tinggi (height) yang kita tentukan dan overflow:auto untuk membuat scroll bar-nya. Dan sub sajian yang mempunyai label biasanya berada pada ul tingkat kedua, jadi pada instruksi css-nya pakai 2 buah ul.

 #cssmenu ul ul.expand {height:200px;overflow:auto}

Selesai... gampang bukan? Selamat mencoba...dan happy blogging.

Sumber https://www.kompiajaib.com/

Share this post