8 a. Membuat Menu Drop Down (1)

Menu memuat daftar materi atau isi postingan blog yang diurutkan sesuai dengan tema materinya. Menu ini mempermudah kita melihat langsung bagian yang kita perlukan dengan cepat tanpa mencari ke tempat lain. Untuk itu menu perlu disusun sebaik mungkin agar memudahkan kita mencarinya.  Penampilan menu di bar dibagian bawah header dapat kita buat dengan cara berikut ini, sehingga dinamakan juga dengan menu drop down. 

Ini adalah contoh membuat menu drop down menggunakan script sendiri

Menu drop down

 Langkah-langkah yang kita lakukan adalah sebagai berikut:

1. Silahkan login ke blog, cari menu layout di dasboard admin, klik +add a gadget 

Menu Layout

Gidget HTML/ JavaScript

2. Pilihlah HTML/ JavaScript

Gadget HTML/ JavaScript

3. Copy paste script dibawah ini kebagian bagian content seperti gambar berikut

Configure HTML/ JavaScript

:

 <style type="text/css">

/*CSS MENU*/

#menu{background:#959494;color:#eee;height:35px;border-bottom:4px solid #3691ce}

#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}

#menu ul{height:35px}

#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}

#menu li:first-child{border-left: none}

#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}

#menu li:hover > a,#menu li a:hover{background:#111}

#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}

#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}

#menu label span{font-size:12px;position:absolute;left:35px}

#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}

#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}

#menu li:hover ul.menus{display:block}

#menu a.home {background: #c00;}

#menu a.sub{padding:0 27px 0 14px}

#menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}

#menu ul.menus a:hover{background:#333;}

</style>

<!--Mulai Area Menu-->

<nav id="menu">

<input type="checkbox" />

<label>≡Navigation</label>

<ul>

<li><a class="Home" href="http://novaindriani31.blogspot.com/">Home</a></li>

<li><a class="Widget" href="https://novaindriani31.blogspot.com/search/label/Widget">Widget</a></li>

<li><a class="Siswa" href="https://novaindriani31.blogspot.com/search/label/Siswa">Siswa</a></li>

<!--Mulai Menu Dropdown-->

<li><a class="sub" href="#">SMK</a>  <ul class="menus">

<li><a href="https://novaindriani31.blogspot.com/search/label/DMI">DMI</a></li>

<li><a href="https://novaindriani31.blogspot.com/search/label/Animasi2D3D">Animasi2D3D</a></li>

<li><a href="https://novaindriani31.blogspot.com/search/label/LKPD">LKPD</a></li>

</ul>

<!--Mulai Menu Dropdown-->

<li><a class="sub" href="#">PT</a>  <ul class="menus">

<li><a href="https://novaindriani31.blogspot.com/search/label/Kalkulus">Kalkulus</a></li>

<li><a href="https://novaindriani31.blogspot.com/search/label/MatDiskrit">Matematika Diskrit</a></li>

</ul>

<!--Selesai Menu Dropdown-->  </li>

<li><a class="GoBlog" href="https://novaindriani31.blogspot.com/search/label/GoBlog">GoBlog</a></li>

<li><a class="Profil" href="https://novaindriani31.blogspot.com/p/biodata.html">Profil</a></li>

<!--Area Menu Selesai--></li></ul></nav>

4. Jangan lupa simpan dan letakkan Gadget ini tepat dibawah header kemudian refresh tampilan web agar terlihat perubahannya

Gadget HTML/ JavaSript dibawah Header

Selamat mempraktikkannya