Menambahkan Scroll Pada Sub Menu Untuk Menu Fixed

Menambahkan Scroll Pada Sub Menu Untuk Menu Fixed

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

16 Comments Add Comment

mas,kode menu ini dibandingkan dengan kode togle loadingnya ringan yang mana?

Balas

Untuk menu yang pure css akan lebih ringan dari menu yang menggunakan jquery mas :)

Balas

ijin kopi aja mas sapa tahu saya nanti membutuhkannya, untuk saat ini saya masih srek dengan menu kodi togle.

Balas

Keren mas :) Jadi simple gitu ya :D

Balas

Iya mas biar ga terlalu ke bawah :)

Balas

Siipp itu juga udah bagus mas, seperti mega menu :)

Balas

jadi solusi terbagik buat menghemat ruang ya mas,, makasih mas adhy :)

Balas

Yahh, nggak pertamax =( Aku Rapopo,
BTW Bagus Menunya sayangnya saya masih Binggung =)D

Balas

terima kasih tutornya kang ijin simpan buat blog saya yang lain biar tidak terlalu panjang ke bawah hehehehe

Balas

wah,. ini menu,nya asyik nih. kapan2 kalo ada waktu aku coba mas, thanks :)

Balas

Hehehe boleh bertanya jika masih bingung :)

Balas

Silahkan mas Ade :)

Balas

Silahkan dicoba mas Indra :)

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×