Make Mejur Menu di Juru

Sudah terlalu banyak postingan bercerita mengenai menu Tapi apa mau dikata, tema untuk dijadikan artikel saat ini ya tentang menu lagi :d Koben mau berbagi cara membuat menu dengan keberadaan posisi di pojok kiri atas. Travelling menu:

• Menu gigir.
• Varian menu.
• Menu is menyu.
• Browser theme menu.

Yuk kita mulai acara pembuatan mejur (menu juru/pojokan) Megir juga bisa memeiliki arti yg sama dengan mejur, menu gigir (pinggiran) :))

#megir {
  background-color: #F5F5F5;
  border-bottom: 1px solid #8F8F8F;
  text-align: center;
}
#megir a {
  color: #8F8F8F;
  display: block;
  padding: 2px 0;
  margin-right: 1.5em;
}
#megir a:hover {
 color: #d00; 
}
#megir:hover {
  color: #d00;
  height: 125px;
}
#megir {
  position: absolute;
  top: -5px;
  left: -87px;
  width: 355px;
  height: 30px;
  overflow: hidden;
  padding-top: 2.7em;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: rotate(-35deg) translate(-90px, 25px);
  -moz-transform: rotate(-35deg) translate(-90px, 25px);
  -ms-transform: rotate(-35deg) translate(-90px, 25px);
  -o-transform: rotate(-35deg) translate(-90px, 25px);
  transform: rotate(-35deg) translate(-90px, 25px);
}

MarkUp HTML<div id="megir">
<a href="" title="">You Title</a>
<a href="" title="">You Title</a>
<a href="" title="">You Title</a>
<a href="" title="">You Title</a>
<a href="" title="">You Title</a>
</div>Width pada ramuan CSS sangat berpengaruh pada jumlah menu yg akan dipasangkan (markup html) Oleh karena itu tentukan dulu mau pasang berapa menu, bare deh atur² variabel CSS ;)

Ide pembuatan menu mejur diperoleh dari Learn CSS Layout Kunjungi web tersebut biar sobat menjadi master CSS layout :)
Happy coding \m/