Memasang kode Menu dropdown Hover Mini
Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template, ganti dengan kode blank template, yang tersedia pada sumber berikut ini : Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template, ganti dengan kode blank template, yang tersedia pada sumber berikut ini : Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="M2010-styles">
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: "Open Sans", "Arial";
background: #0097B2;
}
h2 {
color: #FFF;
}
h4 {
color: #666;
}
p {
color: #333;
font-size: 13px;
}
main {
margin: 50px auto;
width: 500px;
}
section {
margin-top: 30px;
background-color: rgba(0, 244, 255, 0.4);
padding: 20px;border: 5px solid #808;
box-shadow: 0px 20px 20px 20px rgba(0, 0, 0, 0.1);
}
.dropdown {
width: 230px;
display: inline-block;
margin-right: 10px;
position: relative;
}
.dropdown.toggle > input {
display: none;
}
.dropdown > a, .dropdown.toggle > label {
box-shadow: 0px 20px 20px 20px rgba(0, 0, 0, 0.1);
border: 5px solid #808;
}
.dropdown > a::after, .dropdown.toggle > label::after {
content: "";
float: right;
margin: 15px 15px 0 0;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 13px solid #f00;
}
.dropdown ul {
list-style-type: none;
display: block;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
box-shadow: 0 6px 5px -5px rgba(0,0,0,0.3);
overflow: hidden;
}
.dropdown a, .dropdown.toggle > label {
display: block;
padding: 0 0 0 10px;
text-decoration: none;
line-height: 40px;
font-size: 13px;
text-transform: capitalize;
font-weight: bold;
color: #555;
background-color: #dad;
}
.dropdown li {
height: 0;
overflow: hidden;
transition: all 500ms;
}
.dropdown.hover li {
transition-delay: 300ms;
}
.dropdown li:first-child a {
border-radius: 2px 2px 0 0;
}
.dropdown li:last-child a {
border-radius: 0 0 2px 2px;
}
.dropdown li:first-child a::before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ff0;
margin: -10px 0 0 30px;
}
.dropdown a:hover, .dropdown.toggle > label:hover, .dropdown.toggle > input:checked ~ label {
background-color: #eee;
border-color: #f00;
color: #666;
}
.dropdown > a:hover::after, .dropdown.toggle > label:hover::after, .dropdown.toggle > input:checked ~ label::after {
border-top-color: blue;
}
.dropdown li:first-child a:hover::before {
border-bottom-color: #f00;
}
.dropdown.hover:hover li, .dropdown.toggle > input:checked ~ ul li {
height: 40px;
}
.dropdown.hover:hover li:first-child, .dropdown.toggle > input:checked ~ ul li:first-child {
padding-top: 15px;
}
</style>
<main>
<nav>
<div class="dropdown hover">
<a href="#">HOVER MENU : A</a>
<ul>
<li><a href="#">Menu 1.a</a></li>
<li><a href="#">Menu 2.a</a></li>
<li><a href="#">Menu 3.a</a></li>
<li><a href="#">Menu 4.a</a></li>
<li><a href="#">Menu 5.a</a></li>
<li><a href="#">Menu 6.a</a></li>
<li><a href="#">Menu 7.a</a></li>
</ul>
</div>
<div class="dropdown toggle">
<input id="t1" type="checkbox" checked>
<label for="t1">HOVER MENU : B</label>
<ul>
<li><a href="#">Menu 1.a</a></li>
<li><a href="#">Menu 2.a</a></li>
<li><a href="#">Menu 3.a</a></li>
<li><a href="#">Menu 4.a</a></li>
<li><a href="#">Menu 5.a</a></li>
<li><a href="#">Menu 6.a</a></li>
<li><a href="#">Menu 7.a</a></li>
</ul>
</div>
</nav>
<section>
<div class="view view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh01nCb_mI1TaEzjxqQMe1sMHmGrIpYgukFLyKA4XtINu-ouKr8_3vTaO8lSexksdApDsgdCCB6-nPohEUvs7O16ZDFjDTYgEz1sP4kmZ4AlLNHYHkWJBftap8OvDfS4K1OHKDMaIP3_5ny/s1600/B2a-M2010.jpg"alt="Sule">
<div class="mask">
<br>
<p>Teks anda di sini <br> Teks anda di sini Teks anda di sini Teks anda di sini</p>
<br>
<a href="http://sample-mys2010.blogspot.co.id/2017/08/menu-dropdown-hover-mini.html" class="info">Visit Links</a>
</div>
</div>
</section>
</main>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
// M2010 Menu Dropdown
$(document).click(function(event) {
if(
$('.toggle > input').is(':checked') &&
!$(event.target).parents('.toggle').is('.toggle')
) {
$('.toggle > input').prop('checked', false);
}
})
</script>
</body>
</html>
* If you want to directly copy and paste you canDownload Menu dropdown Hover Mini
