Dropdown Menu Super Ringan

Share :

Tweet

Dropdown menu adalah sebuah widget yang berfungsi sebagai navigasi sebuah blog. Namun terkadang, dropdown menu dilengkapi gambar, javascript, atau css yang terlalu panjang yang mana itu akan mempengaruhi kecepatan loading blog karena kecepatan loading blog adalah sesuatu yang di perlukan oleh sebuah blog untuk memudahkan pengunjung blog mengunjungi blog kita.

Pada kesempatan kali ini saya akan share Dropdown Menu Super Ringan di dalam Dropdown menu ini tidak terdapat gambar dan javascript hanya dengan permainan gradient saja. Jika sobat berminat Silahkan Mengikuti langkah-langkah dibawah ini:

1. Login ke akun Blogger sobat.
2. Klik Tata Letak >> Tambah widget
3. Pilih HTML/JavaScript
4. Copy Paste Kode di bawah ini.


<style>
/*------ CSS3 Drop Down Menu By ASPAR SUSANTO (www.aspar69susanto.blogspot.com)---------*/
#menui, #menui ul {
margin: 0;
padding: 0;
list-style: none;
}
#menui {
width: 960px;
margin:  auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#menui:before,
#menui:after {
content: &quot;&quot;;
display: table;
}
#menui:after {
clear: both;
}
#menui {
zoom:1;
}
#menui li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menui a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menui li:hover &gt; a {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
color: #fafafa;
}
*html #theant -menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menui ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#menui li:hover &gt; ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menui ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menui ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menui ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menui ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menui ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#menui ul li:first-child &gt; a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#menui ul li:first-child &gt; a:after {
content: &#39;&#39;;
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menui ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menui ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menui ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menui ul li:last-child &gt; a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
.navsearch{width:300px;float:right;margin:0 auto;padding:0 auto}
</style>
<ul id='menui'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a class='arrow' href='#'>Drop Down 1</a>
<ul>
<li><a href='#'>Sub menu 1 Drop Down 1</a></li>
<li><a href='#'>Sub menu 2 Drop Down 1</a></li>
<li><a href='#'>Sub menu 3 Drop Down 1</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a></li>
<li><a class='arrow' href='#'>Drop Down 2</a>
<ul>
<li><a href='#'>Sub menu 1 Drop Down 2</a></li>
<li><a href='#'>Sub menu 2 Drop Down 2</a></li>
<li><a href='#'>Sub menu 3 Drop Down 2</a></li>
</ul>
</li>
</ul>


Ganti yang berwarna Merah dengan judul menu dan ganti # dengan url yang akan dituju.
5. Klik Simpan

Mungkin itu saja yang bisa saya sampaikan pada pos yang berjudul Dropdown Menu Super Ringan, jika ada pertanyaan bisa di tanyakan lewat komentar....

Semoga Bermanfaat......

Tag : Blogging