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.

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