Responsive Dark Menu Untuk Blogger

Responsive Dark Menu Untuk Blogger - Setelah beberapa hari disibukan dengan beragam aktivitas dunia nyata , akhirnya kembali mempunyai waktu untuk berbagi tutorial dalam membuat menu navigasi untuk blogger. Menu kali ini cukup simple dalam pemasangannya dan terkesan elegant dalam penampilannya serta memiliki fitur responsive . Untuk lebih jelasnya silahkan brada lihat demonya dibawah ini .

See Demo

Kustomisasi

Masuk Edit HTML
Cari kode ]]></b:skin>
Masukan kode dibawah ini tepat diatas kode ]]></b:skin>

/*Responsive Nav Menu*/
.menu {position:relative; z-index:100;}
.menu ul {padding:0; margin:0;list-style:none; font-family: 'arial', sans-serif; font-size:14px;}
.menu > ul {height:35px; background:#555; border-radius:5px 5px 0 0; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);}
.menu > ul > li {float:left; position:relative; white-space:nowrap;}
.menu > ul > li > a {line-height:35px; height:35px; display:block; margin-top:0; padding:0 10px; color:#fff; text-decoration:none; background:#555; border-radius:5px 5px 0 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.menu ul ul {position:absolute; left:-9999px; top:36px; margin-top:40px;
-webkit-transition: 0s 0.75s;
-moz-transition: 0s 0.75s;
-ms-transition: 0s 0.75s;
-o-transition: 0s 0.75s;
transition: 0s 0.75s;
}
.menu ul ul li span a {display:block; float:left; height:30px; width:160px; line-height:30px; background:#69c; padding:0 10px; color:#fff; text-decoration:none; margin-top:50px;
box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
-webkit-transition: 0s 0.75s;
-moz-transition: 0s 0.75s;
-ms-transition: 0s 0.75s;
-o-transition: 0s 0.75s;
transition: 0s 0.75s;
}
.menu ul ul li span a.last {border-radius:0 0 5px 5px;}
.menu ul li:hover {z-index:100;}
.menu > ul > li:hover > a {background:#69c; margin-top:-4px; height:40px;
box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
}
.menu ul li:hover ul {left:0; width:180px; margin-top:0;
-webkit-transition: margin 0.25s;
-moz-transition: margin 0.25s;
-ms-transition: margin 0.25s;
-o-transition: margin 0.25s;
transition: margin 0.25s;
}
.menu ul ul li span {display:block; opacity:0;
-webkit-transition: 0.5s 0.25s;
-moz-transition: 0.5s 0.25s;
-ms-transition: 0.5s 0.25s;
-o-transition: 0.5s 0.25s;
transition: 0.5s 0.25s;
}
.menu ul li:hover ul li span {opacity:1;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a {margin-top:0;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a:hover {background:#555;}
.menu ul + img {position:fixed; left:0; top:0; width:0; height:0; z-index:-1;}
.menu ul:hover + img {width:100%; height:100%;}
/* Responsive Query */
@media screen and (max-width:980px) {
#container {width:auto;}
#head {padding:0px 1.5% 20px 1.5%;}
#main {width:60%; padding:10px 0px 30px 1%;}
#aside {width:34.5%}
.bar {width:auto;}
}
@media screen and (max-width:700px) {
#wrapper {background:none; border:none; padding:2% 0 2% 1.5%;}
#container, #header, #nav, #main, #aside {width:98%; float:none; margin:0 auto;}
#main {border:none; padding:0px; box-shadow:none}
#nav {margin:30px auto 10px; padding:0px;}
#nav ul {margin:0px;}
}
@media screen and (max-width:500px) {
.post {width:94%;}
}
.post blockquote {-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px; position:relative; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcKT15lKo6pDn5r-2pOJDVzSqbTcT27fBlprdFQRhPHmrs85gbt8gw2_pEPm0Nl5d-mqRNqoZW5QbslGgWXEmhjLfkCdqILHWTAMNgXdRizRfKrVJgJxX64LP9fZJG_CmhZCIhge4p1J14/w620-h277-no/wew.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-width: px; color: black; font-family: Abel, 'Courier New', Monaco, Courier, monospace; line-height: 20px;padding: 10px 20px 10px 15px;}
blockquote::before {
content:"Klik Ganda Untuk Seleksi";
width:120px;
font-size:10px;
font-family:Tahoma,arial,sans-serif;
text-shadow:none;
letter-spacing:0.03em;
font-weight:normal;
padding:3px 9px;
position:absolute;
top:-36px;
right:-4px;
transition:.3s ease-out;
background:#002244;
color:#fff;
border-radius:5px;
opacity:0;
visibility:hidden;
}
blockquote::after {
content:" ";
width:0;
height:0;
opacity:0;
visibility:hidden;
position:absolute !important;
right:13px;
top:-10px;
transition:.3s ease-out;
border-color:#002244 transparent transparent;
border-style:solid;
border-width:6px 6px 0;
}
blockquote:hover::before, blockquote:hover::after {
opacity:.5;
visibility:visible;
}

Masuk pada Layout
Add Gadget / HTML Javascript
Masukan kode dibawah ini

<div class='menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#url'>Services</a>
<ul>
<li>
<a href='#'>Printing & Framing</a>
<a href='#'>Photo Editing</a>
<a class='last' href='#'>Storage & Backup</a>

</li>
</ul>
</li>
<li><a href='#url'>Contacts</a>
<ul>
<li>
<a href='#'>Support</a>
<a href='#'>Sales</a>
<a href='#'>Buying</a>
<a href='#'>Photographers</a>
<a href='#'>Stockist</a>
<a class='last' href='#'>General</a>

</li>
</ul>
</li><li>
</li><li><a href='#url'>Stores Location</a>
<ul>
<li>
<a href='#'>South West Region</a>
<a href='#'>North East Region</a>
<a class='last' href='#'>Central Region</a>

</li>
</ul>
</li>
<li><a href='#url'>Contact Us</a>
<ul>
<li>
<a href='#'>Email Addresses</a>
<a href='#'>By Post</a>
<a class='last' href='#'>Telephone Numbers</a>

</li>
</ul>
</li>
<li><a href='#url'> Sales </a>
<ul>
<li>
<a href='#'>Digital SLR Cameras</a>
<a href='#'>Interchangeable Lenses</a>
<a href='#'>Flash Guns & Accessories</a>
<a href='#'>Professional Tripods</a>
<a class='last' href='#'>Filters & Lens Hoods</a>

</li>
</ul>
</li>
<li><a href='#'>Privacy Policy</a></li>
</ul>
</div>

Semoga Responsive hehe