◄ Min  Size Fonts: + | - | ± Color: Max ►

Make Menu Pinggir or Gigir use CSS 3

Berawal dari membaca artikel Off Canvas Menu with CSS :target dimana membicarakan sebuah konsep menu tersembunyi (CSS Panel Menu) yang dibuat memakai property CSS :target Demo jadi seperti ini cssPanelMenu. Kalau mau melihat menu pinggir versi jQuery dapat sobat tengok Facebook style Aside. Jadi inti tutorial sekarang membuat menu pinggir/gigir tersembunyi menggunakan atribut CSS 3.menu-gigirMasukan ramuan CSS brkt tepat sebelum/diatas kode </b:skin>
.menGir {
  display: none;
}
.main-men {
    position: fixed;
    top: 0px;
    left: 0;
    width: 0px;
    height: 100%;
    background: rgb(59, 59, 59);
    overflow: hidden;
    transition: width 0.3s ease 0s;
}  
.main-men a {
    display: block;
    background: #333;
    border-bottom: 1px solid #222;
    color: #fff;
    padding: 5px 0 5px 10px;
}
#menPing:checked + #main-nav {
  width: 100px;
}
Cari </body> masukin markup HTML sebelum/diatas kode itu. Kalau pusing bisa juga Add a GadgetHTML/Javascript.
<input type="checkbox" class="menGir" id="menPing" />
<nav class="main-men" id="main-nav">
<a href="LINK">Title1</a>
<a href="LINK">Title2</a>
<a href="LINK">Title3</a>
<a href="LINK">Title4</a>
<a href="LINK">Title5</a>
<a href="LINK">Title...</a>
</nav>
<label for="menPing" style="position: fixed;top: 0;right: 5px">&#9776;</label>

Happy menu \m/
Loading...
XMake Menu Pinggir or Gigir use CSS 3
Membuat menu pinggir/gigir hanya menggunakan CSS 3 property :target
Subscribe my posts Register For Free!

4 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE