Membuat Menu Vertical Dengan Details And Summary Tag

Membuat Menu Vertical Dengan Details And Summary Tag

Bola Hero Gawai

Membuat Menu Vertical Dengan Details And Summary Tag

Menu Vertical Dengan Details And Summary Tag
Membuat Menu Vertical Dengan Details And Summary Tag - Pagi ini saya akan bagikan sebuah oleh-oleh hasil jalan-jalan saya. Ini saya bilang sebuah cara paling mudah dan simple dalam membuat sebuah menu vertical. Menu vertical ini menggunakan kode CSS yang sangat simple dan sederhana serta yang terpenting menu ini hanya memerlukan sedikit kode CSS.

Membuat menu vertical ini sebenarnya bisa dibilang dengan konsep show and hide dengan details and summary tag sehingga pembuatannya lebih simple. Namun perlu diingat, details dan summary tag ini belum bekerja pada semua browser, baru berjalan pada Chrome, Opera, dan Sapari 6. Sementara untuk Firefox dan Internet Explorer, details dan summary tag ini belum berjalan.

Sebenarnya details and summary tag ini sudah mendukung HTML5, terbukti ketika tes validasi ternyata sudah valid HTML5. Namun karena belum support cross browser, maka element ini menjadi warning pada validasi HTML5.

Nah kali ini saya mencoba membuat menu vertical fixed di samping kiri blog dengan details and summary tag ini. Untuk demonya silahkan coba buka link demo di bawah ini dengan menggunakan Chrome, Opera, atau Sapari 6.


Kode CSS


#Menu-holder {position:fixed;top:0;left:0;bottom:0;width: 15%;min-width: 200px;height:100%;background:#3c3c3c;padding:20px;}
#Menu {width: 100%;min-width: 150px;font-family:Arial;}
#Menu > details > summary{cursor:pointer;background: #26272a;box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);margin:6px;padding:8px;outline:none;border-radius:3px;font-size:16px;color:#efefef;transition:all .3s ease-in-out;}
#Menu > details > summary:hover{background: #424346;}
#Menu > details > a{display:block;text-decoration: none;color:#efefef;font-size:14px;margin:4px 6px 4px 18px;padding:5px 8px;background: #424346;border-radius:2px;box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);transition:all .3s ease-in-out;}
#Menu > details > a:hover{background:#26272a;}

Kode HTML


<nav id="Menu-holder">
    <div id="Menu">
  <details>
    <summary>Menu Item 1</summary>
    <a href="#" title="Sub Menu Item 1">Sub Menu Item 1</a>
    <a href="#" title="Sub Menu Item 2">Sub Menu Item 2</a>
    <a href="#" title="Sub Menu Item 3">Sub Menu Item 3</a>
  </details>
  <details>
    <summary>Menu Item 2</summary>
    <a href="#" title="Sub Menu Item 1">Sub Menu Item 1</a>
    <a href="#" title="Sub Menu Item 2">Sub Menu Item 2</a>
  </details>
  <details>
    <summary>Menu Item 3</summary>
    <a href="#" title="Sub Menu Item 1">Sub Menu Item 1</a>
    <a href="#" title="Sub Menu Item 2">Sub Menu Item 2</a>
    <a href="#" title="Sub Menu Item 3">Sub Menu Item 3</a>
    <a href="#" title="Sub Menu Item 4">Sub Menu Item 4</a>
    <a href="#" title="Sub Menu Item 5">Sub Menu Item 5</a>
  </details>
  <details>
    <summary>Menu Item 4</summary>
    <a href="#" title="Sub Menu Item 1">Sub Menu Item 1</a>
    <a href="#" title="Sub Menu Item 2">Sub Menu Item 2</a>
    <a href="#" title="Sub Menu Item 3">Sub Menu Item 3</a>
  </details>
</div>
    </nav>

Sangat simple kode-kodenya bukan? Semoga kedepannya kode details dan summary ini bisa cross browser sehingga bisa digunakan untuk berbagai hal.

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

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!

×
×
×