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.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments