cara bikin menu dropdown minimalis

6 Sep 2013

Sudah lama saya tidak posting artikel karena kesibukan yang luar binasa... he he... kali ini saya share tentang cara membuat / bikin menu drop down yang lain dari pada yang lain daripada ga ada yang lain yang saya ambil dari blog nya dte (mas taufik nurrohman) dan sedikit saya edit lagi pada warna dan fungsi dari menu drop down itu kalau tidak salah saya memasang menu drop down ini baru 2 hari, tetapi saya sendiri tidak menyangka kalau email saya penuh dengan permintaan code tentang cara bikin menu drop down yang saya pasang di header sebelah kanan itu, akhirnya saya putuskan untuk di share saja...

.glossy-selectbox {
display:inline-block;
font:normal bold 12px Electrolize,Arial,San-Serif;
position:relative;
width:300px;
float:right;
margin-top:5px;
background-color:#272727;
border:3px double #3d3d3d;
box-shadow:0 0 3px #000;
text-align:left;
}
.glossy-selectbox:before,
.glossy-selectbox:after {
content:"";
display:block;
width:0;
height:0;
border:3px solid transparent;
border-width:5px 3px;
border-bottom-color:#999;
position:absolute;
top:5%;
right:5px;
z-index:4;
}
.glossy-selectbox:after {
border-color:#999 transparent transparent;
top:auto;
bottom:5%;
}
.glossy-selectbox input {
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
height:100%;
opacity:0;
z-index:10;
cursor:pointer;
}
.glossy-selectbox label {
display:block;
line-height:30px;
color:rgba(255,255,255,.5);
padding:0 15px;
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;
}
.glossy-selectbox label:before {
content:attr(data-default);
}
.glossy-selectbox label:after {
content:"";
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
border-left:1px solid rgba(0,0,0,.4);
-webkit-border-radius:0 7px 7px 0;
-moz-border-radius:0 7px 7px 0;
border-radius:0 7px 7px 0;
-webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
}
.glossy-selectbox input:hover + label {
color:white;
}
.glossy-selectbox input:hover + label:after {
background-color:rgba(255,255,255,.04);
}
.glossy-selectbox ul {
margin:0 0;
padding:2px;
position:absolute;
top:100%;
left:14px;
right:14px;
background-color:#272727;
border:1px solid #3c3c3c;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px 0px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px 0px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px 0px rgba(0,0,0,.4);
visibility:hidden;
opacity:0;
z-index:99;
}
.glossy-selectbox li {
margin:0 0;
padding:0 0;
list-style:none;
float:left;
width:50%;
display:inline;
}
.glossy-selectbox a {
display:block;
position:relative;
color:#999;
text-decoration:none;
text-shadow:0 0 2px black;
line-height:30px;
border-bottom:1px solid #171717;
border-right:1px solid #171717;
padding:0 15px 0 32px;
-webkit-box-shadow:inset 0 0 0 1px #333;
-moz-box-shadow:inset 0 0 0 1px #333;
box-shadow:inset 0 0 0 1px #333;
/* Opera note: An unstable box shadow will appear if you don't define the border radius less than 1 pixel. Weird! */
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.glossy-selectbox a:nth-child(even) {
border-right-width:0;
}
.glossy-selectbox a:before {
content:"";
display:block;
width:16px;
height:16px;
position:absolute;
top:7px;
left:7px;
background-color:transparent;
background-repeat:no-repeat;
background-position:50% 0;
}
.glossy-selectbox a:hover:before {
background-position:50% 100%;
}
.glossy-selectbox a:hover {
background-color:rgba(0,0,0,.2);
color:#ccc;
}
/* On click, then... */
.glossy-selectbox input:checked + label {
color:rgba(255,255,255,.4);
-webkit-transition-duration:.4s;
-moz-transition-duration:.4s;
-ms-transition-duration:.4s;
-o-transition-duration:.4s;
transition-duration:.4s;
}
.glossy-selectbox input:checked + label:before {
content:attr(data-focus);
}
.glossy-selectbox input:checked + label:after {
background-color:rgba(0,0,0,.2);
-webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
}
.glossy-selectbox input:checked ~ ul {
visibility:visible;
opacity:1;
}

Tentunya sobat sobat pada tahu tempat meletakkan code css di atas tadi, sedangkan code di bawah adalah HTML nya yang say letakkan tepat di bawah <header>

<div class='glossy-selectbox'>
<input type='checkbox'/>
<label data-default='Link of My Friend' data-focus='silahkan kunjungi juga temanku ini'/>
<ul>
<li><a href='#' target='_blank' title='description blog'>Friend 1</a></li>
<li><a href='#' target='_blank' title='description blog'>Friend 2</a></li>
<li><a href='#' target='_blank' title='description blog'>Friend 3</a></li>
<li><a href='#' target='_blank' title='description blog'>Friend 4</a></li>
<li><a href='#' target='_blank' title='description blog'>Friend 5</a></li>
<li><a href='#' target='_blank' title='description blog'>Friend 6</a></li>
<li><a href='#' target='_blank' title='description blog'>Friend 7</a></li>
<li><a href='#' target='_blank' title='description blog'>Friend 8</a></li>
</ul>
</div>

Silahkan diedit ulangpada warnanya sesuai selera atau serasikan dengan warna template sobat
Menu di atas saya rubah fungsinya buat blogroll ( link friend ) karena menurut saya yang sangat ringan loading bahkan tanpa loading begitu klik langsung keluar menu nya
Untuk DEMO nya lihat pada header sebelah kanan

css - menu

Taufik 23.00