Membuat Hidangan Vertical Dengan Details And Summary Tag
Membuat Menu Vertical Dengan Details And Summary Tag - Pagi ini aku akan bagikan sebuah buah tangan hasil jalan-jalan saya. Ini aku bilang sebuah cara paling gampang dan simple dalam menciptakan sebuah hidangan vertical. Menu vertical ini memakai aba-aba CSS yang sangat simple dan sederhana serta yang terpenting hidangan ini hanya memerlukan sedikit aba-aba CSS.
Membuat hidangan vertical ini bersama-sama dapat 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, gres 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 saat tes validasi ternyata sudah valid HTML5. Namun alasannya ialah belum support cross browser, maka element ini menjadi warning pada validasi HTML5.
Nah kali ini aku mencoba menciptakan hidangan vertical fixed di samping kiri blog dengan details and summary tag ini. Untuk demonya silahkan coba buka link demo di bawah ini dengan memakai 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="Membuat Menu Vertical Dengan Details And Summary Tag">Sub Menu Item 1</a>
<a href="#" title="Membuat Menu Vertical Dengan Details And Summary Tag">Sub Menu Item 2</a>
<a href="#" title="Membuat Menu Vertical Dengan Details And Summary Tag">Sub Menu Item 3</a>
</details>
<details>
<summary>Menu Item 2</summary>
<a href="#" title="Membuat Menu Vertical Dengan Details And Summary Tag">Sub Menu Item 1</a>
<a href="#" title="Membuat Menu Vertical Dengan Details And Summary Tag">Sub Menu Item 2</a>
</details>
<details>
<summary>Menu Item 3</summary>
<a href="#" title="Membuat Menu Vertical Dengan Details And Summary Tag">Sub Menu Item 1</a>
<a href="#" title="Membuat Menu Vertical Dengan Details And Summary Tag">Sub Menu Item 2</a>
<a href="#" title="Membuat Menu Vertical Dengan Details And Summary Tag">Sub Menu Item 3</a>
<a href="#" title="Membuat Menu Vertical Dengan Details And Summary Tag">Sub Menu Item 4</a>
<a href="#" title="Membuat Menu Vertical Dengan Details And Summary Tag">Sub Menu Item 5</a>
</details>
<details>
<summary>Menu Item 4</summary>
<a href="#" title="Membuat Menu Vertical Dengan Details And Summary Tag">Sub Menu Item 1</a>
<a href="#" title="Membuat Menu Vertical Dengan Details And Summary Tag">Sub Menu Item 2</a>
<a href="#" title="Membuat Menu Vertical Dengan Details And Summary Tag">Sub Menu Item 3</a>
</details>
</div>
</nav>
Sangat simple kode-kodenya bukan? Semoga kedepannya aba-aba details dan summary ini dapat cross browser sehingga dapat dipakai untuk aneka macam hal.
Sumber https://www.kompiajaib.com/
0 Response to "Membuat Hidangan Vertical Dengan Details And Summary Tag"
Posting Komentar