cybiee: Membuat Menu DropDown Pada Blog



Cara Membuat Menu Bar Multi Dropdown.

1. Buka akun blogger anda.

2. Pilih menu template > klik Edit Html

3. Lalu letakan kode css di bawah ini tepat di atas kode ]]></b:skin> atau </style>

------------

nav {
    display: block;
    margin-top: 100px;
    background: #374147;
}

.menu {
    display: block;
}
.menu li {
    display: inline-block;
    position: relative;
    z-index: 100;
}
.menu li:first-child {
    margin-left: 0;
}
.menu li a {
    font-weight: 600;
    text-decoration: none;
    padding: 20px 15px;
    display: block;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover,.menu li:hover>a {
    color: #fff;
    background: #9ca3da;
}
.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
}
.menu ul:after {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}
.menu ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}
.menu ul li a {
    font-size: 12px;
    font-weight: normal;
    display: block;
    color: #797979;
    background: #fff;
}
.menu ul li a:hover,.menu ul li:hover>a {
    background: #9ca3da;
    color: #fff;
}
.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}
.menu ul ul {
    left: 149px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transform: translate(20px,20px);
    transition: all 0.2s ease-out;
}
.menu ul ul:after {
    left: -6px;
    top: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
}
.menu li>ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}
.responsive-menu {
    display: none;
    width: 100%;
    padding: 20px 15px;
    background: #374147;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
}
.responsive-menu:hover {
    background: #374147;
    color: #fff;
    text-decoration: none;
}
a.homer {
    background: #9ca3da;
}

@media (min-width: 768px) and (max-width: 979px) {
    .mainWrap {
        width: 768px;
    }

.menu ul {
        top: 37px;
    }

.menu li a {
        font-size: 12px;
    }

a.homer {
        background: #374147;
    }
}
@media (max-width: 767px) {
    .mainWrap {
        width: auto;
        padding: 50px 20px;
    }

.menu {
        display: none;
    }

.responsive-menu {
        display: block;
        margin-top: 100px;
    }

nav {
        margin: 0;
        background: none;
    }

.menu li {
        display: block;
        margin: 0;
    }

.menu li a {
        background: #fff;
        color: #797979;
    }

.menu li a:hover,.menu li:hover>a {
        background: #9ca3da;
        color: #fff;
    }

.menu ul {
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }

.menu li:hover>ul {
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;
    }

.menu ul ul {
        left: 0;
        transform: initial;
    }

.menu li>ul ul:hover {
        transform: initial;
    }
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}

------------

 Letakan kode html di bawah ini tepat di bawah kode </header>

<nav>
<a id="resp-menu" class="responsive-menu" href="#"> Menu</a> 
 <ul class="menu">
<li><a class="homer" href="#"> HOME</a>
 <ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a></li>
<li><a href="#">Sub-Menu 3</a></li>
<li><a href="#">Sub-Menu 4</a></li>
<li><a href="#">Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="#"> ABOUT US</a></li>
<li><a href="#"> PROFILE</a>
 <ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a></li>
</ul>
</li>
<li><a href="#"> BLOG</a></li>
<li><a href="#"> KATEGORI</a>
 <ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a></li>
</ul>
</li>
<li><a href="#"> CONTACT US</a></li>
<li><a href="#"> SITEMAP</a></li>
</ul>
</nav>

-GANTI TANDA PAGAR DIATAS DENGAN URL ATAU ALAMAT LAMAN WEB YANGA
ANDA KEHENDAKI,
DAN GANTI JUDUL MENU DAN SUB MENU SESUAI YANG ANDA INGINKAN-

--------------

Langkah terakhir simpan kode di bawah ini tepat di atas kode </body>

Setelah selesai menempatkan kode javaScript di atas, langkah selanjutnya
menyimpan perubahan dengan mengklik SIMPAN PERUBAHAN pada bagian atas Edit HTML.
dan hasilnya bisa anda lihat pada blog anda.
Selamat mencoba.

Saturday, March 12, 2016

Membuat Menu DropDown Pada Blog

No comments:

Post a Comment