Black Drop Down responsive

isam69.blogspot.com - Menu navigasi atau Menu bar

Langkah - Langkah DIBAWAH INI

Pertama silahkan kalian buka akun blogger kalian

Mamsuk ke kemu layout atau Tata Letak .

Selanjutnya, kalian pilih menu Tambahkan Gadget dan pilih Html/JavaScript .

Untuk pemilihan tempat widget atau gadget, kalian harus memilih lokasi gadget paling atas. Contohnya seperti pada gambar dibawah ini.

Kemudian kalian akan melihat tampilan widget html/JavaScript seperti pada gambar dibawah ini, dan kalian perhatikan keterangan dibawah ini :

Untuk bagian judul biarkan kosong

Pada bagian konten silahkan kalian pastekan kode yang akan saya berikan didalam artikel ini

Setelah pengaturan telah kalian buat, langkah terakhir silahkan tekan tombol simpan

Black Drop Down responsive

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}
.nav-bar {
    background: #000;
    width: 100%;
}

.nav-bar__label {
    color: #fff;
    display: block;
    padding: 10px 0;
    text-align: center;
    text-transform: uppercase;
    width: inherit;
}

.nav-bar__label::after,
.nav-bar__sub-label::after {
    content: " +";
}

.nav-bar__label,
.nav-bar__sub-label {
    cursor: pointer;
}

.nav-bar__list {
    background: #000;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.nav-bar__list,
[id^="toggle"] {
    display: none;
}

[id^="toggle"]:checked + .nav-bar__list {
    display: block;
}

.menu_navigation {
    display: block;
}

.nav-bar__link,
.nav-bar__sub-label {
    color: #fff;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    word-wrap: break-word;
}

.menu_navigation .menu_navigation .nav-bar__link,
.menu_navigation .menu_navigation .nav-bar__sub-label {
    padding: 10px 10px 10px 30px;
}

.nav-bar__link:hover,
.nav-bar__link:active,
.nav-bar__sub-label:hover {
    background: #666;
}

@media all and (min-width : 992px) {
    .nav-bar > .nav-bar__label {
        display: none;
    }

    .nav-bar > .nav-bar__list {
        display: block;
    }

    .nav-bar > .nav-bar__list > .menu_navigation {
        display: inline-block;
        position: relative;
    }

    .menu_navigation .nav-bar__list {
        position: absolute;
    }

    .menu_navigation .menu_navigation .nav-bar__link,
    .menu_navigation .menu_navigation .nav-bar__sub-label {
        padding: 10px 20px;
    }
}
p{
  width:100%;
  display:block;
  text-align:center;
  font-size:200%
}
</style>
<nav class="nav-bar">
    <label for="toggle" class="nav-bar__label"><b>Menu Keren Komputerdia</b></label>
    <input type="checkbox" id="toggle" class="nav-bar__toggle"/>
    <ul class="nav-bar__list">
        <li class="menu_navigation">
            <a href="http://www.komputerdia.com/2017/09/cara-membuat-menu-bar-keren-dan-responsive-di-blog.html" class="nav-bar__link">Menu Item 1</a>
        </li>
        <li class="menu_navigation">
            <a href="#" class="nav-bar__link">Menu Item 2</a>
        </li>
        <li class="menu_navigation">
            <a href="#" class="nav-bar__link">Menu Item 3</a>
        </li>
        <li class="menu_navigation">
            <label for="toggle-sub-1" class="nav-bar__sub-label">Sub Menu</label>
            <input type="checkbox" id="toggle-sub-1" class="nav-bar__toggle"/>
            <ul class="nav-bar__list">
                <li class="menu_navigation">
                    <a href="#" class="nav-bar__link">Sub Menu 1</a>
                </li>
                <li class="menu_navigation">
                    <a href="#" class="nav-bar__link">Sub Menu 2</a>
                </li>
                <li class="menu_navigation">
                    <a href="#" class="nav-bar__link">Sub Menu 3</a>
                </li>
            </ul>
        </li>
        <li class="menu_navigation">
            <a href="#" class="nav-bar__link">Menu Item 4</a>
        </li>
    </ul>
</nav>
<br><br><br><br><br><br><br><br><br><br>
<p><a href="http://www.komputerdia.com/2017/09/cara-membuat-menu-bar-keren-dan-responsive-di-blog.html" target='_blank'>Kembali Ke Tutorial</a></p>

 

                                                                                                         

Black Drop Down responsive 2018-02-25T00:29:00-08:00 Rating: 4.5 Diposkan Oleh: isam69