Makes Hamburger Menu & Share Button

Walaupun sudah banyak artikel dengan topik menu, apa mau di kata! Bagi sobat blogger yang mau membuat ataupun mengganti menu navigasi, AA Koben akan berikan satu rekomendasi. Karena lagi trending menu dengan tema hamburger iconic, maka dari pada itu gue akan buatkan yang seperti itu! Setelah ditengok-tengok gak ada mirip sama sekali sama burger? Mungkin karena bertumpukan, 3 garis menyerupai ham-bur-ger! Kok gak semen sekalian =))

Kode CSS menu drawer with off-click

<nav class="menu">
<input id ="menu_toggle" type="checkbox" class='menu_toggle'/>
<label for="menu_toggle" class="menu_toggle-label">
<svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
<path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' />
</svg>
<svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg>
</label>
<ol class='menu_content'>
<li class="menu-item"><a href="#0">Title I</a></li>
<li class="menu-item"><a href="#0">Title II</a></li>
<li class="menu-item">
<a href="#0">Title III</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Sub Title III</a></li>
<li class="menu-item"><a href="#0">Sub Title III</a></li>
<li class="menu-item"><a href="#0">Sub Title III</a></li>
</ol>
</li>
<li class="menu-item">
<a href="#0">Title IV</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Sub Title IV</a></li>
<li class="menu-item"><a href="#0">Sub Title IV</a></li>
<li class="menu-item"><a href="#0">Sub Title IV</a></li>
</ol>
</li>
<li class="menu-item"><a href="#0">Title V</a></li>
</ol>
</nav>

Source & Demo ~ Another Choice with JS.

Harap diperhatikan syntax SVG di dalam HTML! Karena blogger berbasis xHTML, kalau ada kode error, berarti harus di phrase terlebih dahulu kodenya :D

Satu lagi tema yg enggak ada habisnya untuk di bahas yaitu tentang tombol berbagi! Ane akan share juga satu tutorial membuat share button full stylish punya b-)

Kode CSS share button

<div class="share-button">
<div class="share-button_back">
<a class="share_link" href="#" title="twitter">
<svg class="share_icon" version="1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<g><g>
<path d="M25,0C11,0,0,11,0,25c0,14,11,25,25,25c14,0,25-11,25-25 C50,11,39,0,25,0z M36,19c0,0,0,0,0,1c0,8-6,16-16,16 c-3,0-6-1-9-3c0,0,1,0,1,0c3,0,5-1,7-2 c-3-0-5-2-5-4c0,0,1,0,1,0c1,0,1-0,2-0 c-3-1-5-3-5-6c0-0,0-0,0-0c1,0,2,1,3,1 c-2-1-3-3-3-5c0-1,0-2,1-3c3,3,7,6,12,6 c-0-0-0-1-0-1c0-3,3-6,6-6c2,0,3,1,4,2 c1-0,3-1,4-1c-0,1-1,2-3,3c1-0,2-0,3-1 C38,17,37,18,36,19z"></path>
</g></g>
</svg>
</a>
<a class="share_link " href="#" title="facebook">
<svg class="share_icon" version="1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<g><g>
<path d="M25,0C11,0,0,11,0,25c0,14,11,25,25,25c14,0,25-11,25-25 C50,11,39,0,25,0z M31,26h-4c0,6,0,14,0,14h-6c0,0,0-8,0-14h-3v-5h3 v-3c0-2,1-6,6-6l4,0v5c0,0-3,0-3,0c-1,0-1,0-1,1v3h5L31,26z "></path>
</g></g>
</svg>
</a>
<a class="share_link" href="#" title="google plus">
<svg class="share_icon" version="1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<g><g><g>
<path d="M22,29c-0-0-0-0-0-0c-1-0-1-0-2-0h-0 c-3,0-5,2-5,3c0,2,2,3,4,3c3,0,5-1,5-3 c0-0-0-0-0-1C23,30,23,30,22,29z"></path>
<path d="M20,22c0,0,0,0,0,0c1,0,1-0,2-1c1-1,1-2,1-3 c-0-2-2-4-3-4l-0-0c-1,0-1,0-1,1c-1,1-1,2-1,3 c0,2,2,4,3,4H20L20,22z"></path>
<path d="M25,0C11,0,0,11,0,25c0,14,11,25,25,25c14,0,25-11,25-25 C50,11,39,0,25,0z M22,37c-1,0-2,0-3,0c-1,0-2-0-3-0 c-2-1-4-2-4-3c-0-1-0-1-0-2c0-1,0-1,0-2 c1-2,4-4,7-4c0,0,0,0,0,0c-0-0-0-1-0-1 c0-0,0-1,0-1c-3-0-6-3-6-6c0-2,2-5,5-6 c1-0,2-0,2-0h7c0,0,0,0,1,0c0,0-0,1-0,1l-2,1 c-0,0-0,0-0,0H25c1,1,1,2,1,4c0,2-1,3-2,4 c-1,1-1,1-1,2c0,0,1,1,2,2c2,1,3,3,3,5 C27,34,25,36,22,37z M39,24c0,0-0,1-1,1H34v4 c0,0-0,1-1,1h-1c-0,0-1-0-1-1v-4h-4c-0,0-1-0-1-1V23 c0-0,0-1,1-1h4v-4c0-0,0-1,1-1h1c0,0,1,0,1,1v4h4 c0,0,1,0,1,1V24z"></path>
</g></g></g>
</svg>
</a>
<a class="share_link" href="#" title="dribbble">
<svg class="share_icon" version="1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
<g>
<path d="M49,48c0-0,0-0,1-0c-0-1-1-2-1-3 c-9,3-18,3-20,3c-0,0-0,0-0,0c0,5,2,9,5,13 C34,59,40,51,49,48z M61,33c-4-3-8-5-13-5 c-1,0-3,0-4,0c1,1,4,6,7,11C57,38,60,34,61,33z M36,64C40,66,44,68,48,68c3,0,5-0,7-1c-0-2-1-8-4-15 C41,55,37,62,36,64z M47,41c-3-5-6-10-7-11 c-5,3-9,8-11,13h0C31,44,38,43,47,41z M56,50 c2,6,3,12,4,14c4-3,7-8,8-13c-1-0-4-1-8-1 C58,50,57,50,56,50z M48,0C21,0,0,21,0,48c0,27,21,48,48,48s48-21,48-48 C96,21,75,0,48,0z M48,71c-13,0-23-11-23-23S35,25,48,25S71,35,71,48 S61,71,48,71z M53,43c0,1,1,2,1,3c0,0,0,1,0,1 c1-0,3-0,4-0c4,0,8,1,9,1c-0-4-2-8-4-12 C63,37,59,41,53,43z"></path>
</g>
</svg>
</a>
</div>
<div class="share-button_front">
<p class="share-button_text">
Share
</p>
</div>
</div>

Lagi lagi harap diperhatikan penggunaan syntax <svg>...</svg> Saya mau buatkan link khusus blogspot, tapi dikarenakan bentrok dengan kode emoticon postingan, jadi kagak bisa :(

Source & Demo Share Button ~ Share Button using base64 URL.

BONUS:

Pulled out text animation - Interactive CSS Filter React Component - Toggle CSS filter Grayscale on image with jQuery - Checkbox my Accordion - Text Only Checkboxes

:-h