Membuat MEJU "Menu Juru"

Meju menu kepanjangan dari menu di juru. Menu yang keberadaannya ada di pojok (juru). Cocok bagi yg suka dengan minimalis style! Demonya lihat di ujung pojok kanan blog ini ya ☻

Meju menu!

HOMEBebenBen ToolsUc Blog

KODE CSS

#meju, #jump_meju {
background: #fff;
font: 10px Arial;
cursor: pointer;
text-align: right;
text-transform: uppercase;
box-shadow: 0 0 10px #777; 
-webkit-border-bottom-left-radius: 5px; 
-moz-border-radius-bottomleft: 5px;
}
#meju, #meju_wrapper {
position: fixed;
right: 0; top: 0;
padding: 5px 10px;
}
#meju_wrapper {
padding: 0;
display: none;
}
#meju:hover #meju_wrapper {
width: 155px;
display: block;
text-align: right;
}
#jump_meju {
padding: 5px 0 3px;
margin: 0 0 25px 25px;
}
#jump_meju .m_source {
display: block;
padding: 5px 10px;
text-decoration: none;
border-top: 1px solid #eee;
}
#jump_meju .m_source:hover {
background: #f5f5ff;
}
#jump_meju .m_source:first-child {
color: red
}

HTML<div id="meju">Jump To!
<div id="meju_wrapper">
<div id="jump_meju">

<a title="" class="m_source" href="">HOME</a>
<a title="" class="m_source" href="">Link1</a>
<a title="" class="m_source" href="">Link2</a>
<a title="" class="m_source" href="">Link3</a>

</div>
</div>
</div>Happy menu