Menambahkan Scroll Pada Sub Menu Untuk Menu Fixed

Menambahkan Scroll Pada Sub Menu
Sempat tidak menyadari bahwa ketika blog diakses via mobile atau hp, sub menu yang memiliki label yang banyak pada menu blog yang dibuat fixed ternyata tidak bisa seluruhnya terlihat. Label yang banyak atau panjang berderet ke bawah pada sub menu yang fixed ternyata melampaui batas bawah layar hp, sehingga tidak terlihat karena menu tidak bisa discroll karena dibuat fixed atau melayang.

Cukup bingung juga untuk memberikan efek scroll pada sub menu yang memiliki label yang banyak ini. Namun setelah melakukan beberapa percobaan pada kode-kode css menu-nya, akhirnya saya menemukan cara yang tepat untuk memberikan scroll pada sub menu yang memiliki label yang banyak ini. Silahkan lihat demonya sebelum ditambahkan scroll dan sesudah ditambahkan scroll pada link di bawah ini.


Untuk memberikan scroll pada sub menu yang memiliki label yang banyak, silahkan tambahkan dulu class pada ul sub menu agar sub menu yang memiliki label sedikit (tidak ingin ditambahkan scroll) tidak terpengaruhi. Misalnya dengan class='expand' seperti pada contoh 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 kode css untuk ul sub menu class expand tadi dengan memberikan tinggi (height) yang kita tentukan dan overflow:auto untuk menciptakan scroll bar-nya. Dan sub menu yang memiliki label biasanya berada pada ul tingkat kedua, jadi pada kode css-nya pakai 2 buah ul.


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

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

Reactions:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser