ara membuat menu di blogger ini adalah lanjutan dari tutorial yang telah saya terbitkan sebelumnya.
Di sini saya akan menuliskan beberapa cara yang bisa dilakukan untuk bikin tab menu, mulai yang paling mudah – tingkat lanjut.
Bagi anda pengguna wp silakan baca cara membuat menu di blog wordpress.
Sebelum kita lanjutkan ada satu hal yang perlu anda ketahui, dan ini sangat berkaitan erat dengan pembuatan menu.
Anda harus mengerti apa itu Link / URL / Tautan. Atau setidaknya tahu bagaimana cara mendapatkan link yang akan dimasukkan ke menu.
Oleh karena itu ada baiknya jika anda baca juga tutorial blogger, baca bagian Cara Mendapatkan Link Posting, Laman, & Label.
Namun kalau anda sudah mengerti itu, maka silakan lanjutkan baca.
Umumnya ada 3 cara membuat menu di blogger yang bisa dilakukan, yaitu :
- Menggunakan gadget Laman.
- Menggunakan gadget HTML/JavaScript.
- Dengan cara edit template.
Cara yang ketiga agak rumit, dan tidak disarankan untuk pemula.
Walaupun demikian, saya akan tetap menuliskannya dengan tujuan perkenalan dan pembelajaran.
1 Menggunakan gadget Laman
Cara Membuat Menu Di Blogger Tanpa Edit HTML
Ini adalah cara membuat menu di blogger yang paling mudah serta tanpa risiko.
Karena kita tidak perlu menyentuh atau mengedit kode html yang ada di template.
Walaupun bisa dikatakan inilah cara yang paling praktis serta mudah. Namun ini hanya akan bekerja 100% pada template yang tersedia di dasbor blogger saja.
Jadi apakah pengguna template hasil download tidak dapat menggunakan cara ini?…
Tidak juga, asalkan template tersebut mendukung fitur ini, maka anda bisa membuat menu di blog menggunakan cara ini.
Jadi intinya tidak semua template blogger mendukung fitur ini.
Oke Mari kita mulai….
- Langkah-langkah memasang tab menu sederhana
A Masuk ke dasbor blogger
B Klik menu Tata Letak.
C Klik Tambahkan Gadget di bawah area Tajuk (Header) → pilih gadget Laman.
Atau klik Edit jika sudah ada terpasang Gadget Laman.
Jika anda sudah membuat beberapa Laman, maka akan terlihat di gadget ini. Dan silakan centang laman yang ingin dimasukkan ke dalam menu.
Bagaimana cara menambahkan menu lainnya yang tidak terdapat di sana?…
Nah, inilah mengapa di atas tadi saya katakan perlu mengetahui bagaimana cara mendapatkan link posting atau label.
Apabila anda ingin menambahkan menu lainnya silakan klik + Tambahkan tautan eksternal.
Maka akan keluar Pop-up seperti ini.
- laman : Akan menjadi nama menu.
- Alamat web (URL) : Adalah link tujuan.
URL dapat anda isi dengan link posting maupun label, bahkan akan dapat memasang link yang menuju ke website lain.
Jika anda ingin membuat menu yang jika di klik akan menampilkan beberapa posting dengan topik tertentu, silakan pasang link label.
Jangan lupa klik Simpan Tautan setelahnya.
D Kalau semua menu yang anda inginkan sudah dipasang, silakan susun menu tersebut sesuai keinginan.
Caranya mudah, silakan tarik menu ke posisi yang pas menurut anda.
E Terakhir silakan klik tombol Simpan.
Selesai…
- Cara Modifikasi Font dan Warna Tab Menu
Setelah berhasil membuat menu menggunakan cara ini anda juga dapat merubah font serta warna tab menu.
Untuk melakukannya silakan ikuti langkah-langkah berikut :
A Buka halaman Tema.
B Cadangkan / Pulihkan kalau ingin membuat backup template sebelum di edit.
C Klik tombol Sesuaikan.
Di halaman desain tema klik menu Tingkat Lanjut, scroll ke bawah dan cari menu Teks Tab & Latar Tab.
D Modifikasi teks (font) dan latar tab (warna) sesuai selera.
E Kalau sudah selesai silakan klik Terapkan ke Blog.
Setelah berhasil membuat menu menggunakan cara ini anda juga dapat merubah font serta warna tab menu.
Untuk melakukannya silakan ikuti langkah-langkah berikut :
A Buka halaman Tema.
B Cadangkan / Pulihkan kalau ingin membuat backup template sebelum di edit.
C Klik tombol Sesuaikan.
Di halaman desain tema klik menu Tingkat Lanjut, scroll ke bawah dan cari menu Teks Tab & Latar Tab.
D Modifikasi teks (font) dan latar tab (warna) sesuai selera.
E Kalau sudah selesai silakan klik Terapkan ke Blog.
- Membuat Template & Menu Menjadi Responsive
Anda juga dapat dengan mudah membuat menu tersebut menjadi responsive.
Untuk membuatnya menjadi responsive silakan klik icon gird (lihat gambar di atas tadi). Maka akan keluar Pop-Up seperti ini.
- Pilih bagian Ya. Tampilkan tema seluler di perangkat seluler.
- Pilih tema seluler : silakan pilih yang anda suka.
- Kalau sudah selesai silakan klik Simpan.
Cara ini tidak hanya akan membuat menu menjadi responsive, tapi template juga akan menjadi responsive.
Mungkin ini bisa di anggap sebagai kelebihan atau bahkan kekurangannya, tergantung persepsi masing-masing :-).
2. Menggunakan gadget HTML/JavaScript
Cara Membuat Responsive Menu Sederhana Di Blogger
Bagi anda yang tidak ingin membuat menu di blogger tanpa menggunakan gadget laman, maka bisa menggunakan gadget HTML/JavaScript.
Gadget yang satu ini sangat bermanfaat bagi kita, karena bisa digunakan untuk memasang apa saja.
Untuk memasang responsive tab menu sederhana (tanpa dropdown / sub menu), silakan ikuti langkah-langkah berikut :
- Buka Tata Letak
- Tambahkan Gadget pada area yang pas untuk menu, biasanya di atas / bawah header.
- Pilih gadget HTML/JavaScript
- Masukkan kode css + html menu sederhana di bagian konten.
- Simpan.
Sebaiknya edit dahulu bagian yang perlu sebelum memasukkan nya di dalam gadget HTML/JavaScript tadi.
kode css + html menu sederhana
<style type="text/css">
.nav-menu{background: rgba(38,50,56,1);width:100%;}
nav {width:100%;padding:0;}nav:after {content: "";display: table;clear: both;}
nav ul {float:left;padding: 0;margin: 0;list-style: none;position: relative;}
nav ul li {margin: 0px;display: inline-block;float: left;}
nav a, nav a:hover, nav a:visited {display: block;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;}
nav a:hover {background-color: rgba(84,110,122,1);}nav label span{float:right;}
.toggle, [id^=drop] {display: none;}nav input[type=checkbox]{display: none;}
/*** Media Queries ***/
@media all and (max-width : 768px) {
nav {margin: 0;}.toggle + a,.menu {display: none;}
.toggle {display: block;background-color:#333;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;border: none;cursor:pointer;}
.toggle:hover {background-color: #000000;}[id^=drop]:checked + ul {display: block;width: 100%;}
nav ul li {display: block;width: 100%;}
</style>
<div class="nav-menu">
<nav>
<label class="toggle" for="drop">Menu <span>☰</span></label>
<input id="drop" type="checkbox">
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="#">Nama Menu 1</a></li>
<li><a href="#">Nama Menu 2</a></li>
<li><a href="#">Nama Menu 3</a></li>
<li><a href="#">Nama Menu 4</a></li>
<li><a href="#">Nama Menu 5</a></li>
</ul>
</nav>
</div>
Keterangan :
- Ganti tanda
#dengan link tujuan. - Ganti Nama Menu 1 – 5 dengan nama yang anda inginkan.
CSS + HTML Responsive Dropdown Untuk Blogger
Apabila anda ingin membuat responsive dropdown menu di blogger caranya sama seperti yang sudah saya tuliskan di atas tadi.
Jadi saya tidak akan menuliskan lagi, karena intinya sama saja, yaitu menggunakan gadget HTML/JavaScript.
Bedanya cuma pada kode yang di pasang saja.
- kode css responsive dropdown menu
<style type="text/css">
.nav-menu {background: rgba(38,50,56,1);width:100%;}
nav {width:100%;padding:0;}nav:after {content: "";display: table;clear: both;}
nav ul {float:left;padding: 0;margin: 0;list-style: none;position: relative;}
nav ul li {margin: 0px;display: inline-block;float: left;}nav ul li ul li{background: #333;}
nav a, nav a:hover, nav a:visited {display: block;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;}
nav ul li ul li:hover {background-color: rgba(84,110,122,1);}nav a:hover {background-color: rgba(84,110,122,1);}
nav ul li ul li a:hover {background-color: rgba(84,110,122,1);}
nav ul ul {display: none;position: absolute;top: 60px;}nav ul li:hover > ul {display: inherit;}
nav ul ul li {width: 200px;float: none;display: list-item;position: relative;}
nav label span{float:right;}.toggle, [id^=drop] {display: none;}nav input[type=checkbox]{display: none;}
/*** Media Queries ***/
@media all and (max-width : 768px) {
nav {margin: 0;}.toggle + a,.menu {display: none;}
.toggle {display: block;background-color:#333;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;border: none;cursor:pointer;}
.toggle:hover {background-color: #000000;}[id^=drop]:checked + ul {display: block;width: 100%;}
nav ul li {display: block;width: 100%;}nav ul ul .toggle,nav ul ul a, nav ul ul a:hover {padding: 0 40px;}
nav ul li ul li .toggle,nav ul ul a {background-color: #212121;}nav ul ul {float: none;position: static;color: #ffffff;}
nav ul ul li:hover > ul,nav ul li:hover > ul {display: none;}nav ul ul li {display: block;width: 100%;}
}
</style>
<style type="text/css">
.nav-menu {background: rgba(38,50,56,1);width:100%;}
nav {width:100%;padding:0;}nav:after {content: "";display: table;clear: both;}
nav ul {float:left;padding: 0;margin: 0;list-style: none;position: relative;}
nav ul li {margin: 0px;display: inline-block;float: left;}nav ul li ul li{background: #333;}
nav a, nav a:hover, nav a:visited {display: block;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;}
nav ul li ul li:hover {background-color: rgba(84,110,122,1);}nav a:hover {background-color: rgba(84,110,122,1);}
nav ul li ul li a:hover {background-color: rgba(84,110,122,1);}
nav ul ul {display: none;position: absolute;top: 60px;}nav ul li:hover > ul {display: inherit;}
nav ul ul li {width: 200px;float: none;display: list-item;position: relative;}
nav label span{float:right;}.toggle, [id^=drop] {display: none;}nav input[type=checkbox]{display: none;}
/*** Media Queries ***/
@media all and (max-width : 768px) {
nav {margin: 0;}.toggle + a,.menu {display: none;}
.toggle {display: block;background-color:#333;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;border: none;cursor:pointer;}
.toggle:hover {background-color: #000000;}[id^=drop]:checked + ul {display: block;width: 100%;}
nav ul li {display: block;width: 100%;}nav ul ul .toggle,nav ul ul a, nav ul ul a:hover {padding: 0 40px;}
nav ul li ul li .toggle,nav ul ul a {background-color: #212121;}nav ul ul {float: none;position: static;color: #ffffff;}
nav ul ul li:hover > ul,nav ul li:hover > ul {display: none;}nav ul ul li {display: block;width: 100%;}
}
</style>
- kode html responsive dropdown menu
<div class="nav-menu">
<nav>
<label class="toggle" for="drop">Menu <span>☰</span></label>
<input id="drop" type="checkbox">
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li>
<label for="drop-1" class="toggle">Menu 3 <span>+</span></label>
<a href="#">Menu 3</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</nav>
</div>
Keterangan :
- Ganti tanda
# dengan link tujuan.
- Ganti Menu 1 – 5 dan Sub Menu 1 – 3 dengan nama yang anda inginkan.
3. Dengan cara edit template
pabila anda benar-benar pemula, maka tidak disarankan untuk menggunakan cara ini.
Tapi jika ingin mempelajarinya boleh kok :-).
Tapi sebaiknya jangan langsung terapkan di blog utama, jadi sebaiknya buat blog baru dahulu untuk belajar edit / menambahkan kode.
Pada dasarnya cara ketiga ini hampir sama dengan cara kedua di atas tadi. Dan kode yang harus di pasang juga sama.
Bedanya cuma cara memasang kodenya saja, kalau cara kedua melalui Tata Letak menggunakan gadget. Sedangkan ini memasang kode langsung pada template yang digunakan.
<div class="nav-menu"> <nav> <label class="toggle" for="drop">Menu <span>☰</span></label> <input id="drop" type="checkbox"> <ul class="menu"> <li><a href="/">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li> <label for="drop-1" class="toggle">Menu 3 <span>+</span></label> <a href="#">Menu 3</a> <input type="checkbox" id="drop-1"/> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> </ul> </nav> </div>
Keterangan :
- Ganti tanda
#dengan link tujuan. - Ganti Menu 1 – 5 dan Sub Menu 1 – 3 dengan nama yang anda inginkan.
pabila anda benar-benar pemula, maka tidak disarankan untuk menggunakan cara ini.Tapi jika ingin mempelajarinya boleh kok :-).Tapi sebaiknya jangan langsung terapkan di blog utama, jadi sebaiknya buat blog baru dahulu untuk belajar edit / menambahkan kode.Pada dasarnya cara ketiga ini hampir sama dengan cara kedua di atas tadi. Dan kode yang harus di pasang juga sama.Bedanya cuma cara memasang kodenya saja, kalau cara kedua melalui Tata Letak menggunakan gadget. Sedangkan ini memasang kode langsung pada template yang digunakan.
- Cara Menemukan Kode HTML Area Tertentu
Untuk menambahkan kode html menu ke template kita harus menentukan area pemasangan tab menu.
Kita juga harus mengetahui kode html yang dekat dengan target area tersebut, agar menu yang dipasang tepat sasaran.
Misalnya ingin memasang menu di bawah header, maka kita harus mengetahui kode html header tersebut.
Dan kalau sudah tahu kodenya, baru kode html menu kita pasang di bawah kode header tersebut.
Ada cara mudah untuk menemukan kode html area tertentu agar kita dapat memasang kode html menu pada area yang pas.
Untuk menambahkan kode html menu ke template kita harus menentukan area pemasangan tab menu.
Kita juga harus mengetahui kode html yang dekat dengan target area tersebut, agar menu yang dipasang tepat sasaran.
Misalnya ingin memasang menu di bawah header, maka kita harus mengetahui kode html header tersebut.
Dan kalau sudah tahu kodenya, baru kode html menu kita pasang di bawah kode header tersebut.
Ada cara mudah untuk menemukan kode html area tertentu agar kita dapat memasang kode html menu pada area yang pas.
Berikut caranya :
- 1. Menggunakan Google Chrome, tekan Ctrl + Shift + I.
- Atau klik pengaturan chorme → Alat lainnya → Alat pengembang.
-
- 2. Menggunakan Mozilla Firefox, tekan Ctrl + Shift + C.
- Atau klik pengaturan mozilla → Pengembang → Penilik.
-
-
Arahkan kursor ke area blog anda atau kode-kode html yang ada di sana untuk menemukan kode html area yang diinginkan.
Misalnya kita ingin memasang tab menu tepat di bawah header.
Maka silakan arahkan kursor ke area header blog untuk melihat kode htmlnya, lihat gambar berikut.
-
-
Pada contoh di atas, setelah saya arahkan kursor ke area header blog terlihat kode
<div id="header-inner">.
Dan untuk melihat penutup kode tersebut saya harus mengklik icon ∇ sehingga terlihat <div id="header-inner"></div>.
Itu artinya jika ingin memasang menu di bawah header saya harus memasang kode html menu di bawah kode </div> penutup kode <div id="header-inner">.
Namun karena terdapat banyak kode </div>, maka mungkin masih membingungkan.
Akhirnya saya coba cari kode html lain pembungkus area header yang lebih mudah ditemukan.
Kemudian saya melihat kode <header> yang ketika saya arahkan kursor ke kode tersebut ternyata area header dibungkus olehnya.
Dan untuk melihat penutup kode <header> saya harus mengklik lagi icon ∇ sehingga terlihat menjadi <header></header>.
Ini artinya saya harus memasang kode html menu setelah kode </header>.
Nah itulah sedikit ilustrasi bagaimana cara menemukan kode area tertentu.
Setelah menemukan kode area tersebut, maka langkah selanjutnya adalah memasang menu di blog.
- 2. Menggunakan Mozilla Firefox, tekan Ctrl + Shift + C.
- Atau klik pengaturan mozilla → Pengembang → Penilik.
- Arahkan kursor ke area blog anda atau kode-kode html yang ada di sana untuk menemukan kode html area yang diinginkan.Misalnya kita ingin memasang tab menu tepat di bawah header.Maka silakan arahkan kursor ke area header blog untuk melihat kode htmlnya, lihat gambar berikut.
Pada contoh di atas, setelah saya arahkan kursor ke area header blog terlihat kode
<div id="header-inner">.
Dan untuk melihat penutup kode tersebut saya harus mengklik icon ∇ sehingga terlihat
<div id="header-inner"></div>.
Itu artinya jika ingin memasang menu di bawah header saya harus memasang kode html menu di bawah kode
</div> penutup kode <div id="header-inner">.
Namun karena terdapat banyak kode
</div>, maka mungkin masih membingungkan.
Akhirnya saya coba cari kode html lain pembungkus area header yang lebih mudah ditemukan.
Kemudian saya melihat kode
<header> yang ketika saya arahkan kursor ke kode tersebut ternyata area header dibungkus olehnya.
Dan untuk melihat penutup kode
<header> saya harus mengklik lagi icon ∇ sehingga terlihat menjadi <header></header>.
Ini artinya saya harus memasang kode html menu setelah kode
</header>.
Nah itulah sedikit ilustrasi bagaimana cara menemukan kode area tertentu.
Setelah menemukan kode area tersebut, maka langkah selanjutnya adalah memasang menu di blog.
- Cara Memasang Kode HTML & CSS Menu Di Blogger
Di sini saya akan mencontohkan bagaimana cara memasang responsive dropdown menu di blogger menggunakan cara ini.
Berikut langkah-langkah yang harus dilakukan :
1 Login ke blogger.
2 Buka halaman Tema.
3 Backup dahulu template yang anda gunakan dengan cara mengklik tombol Cadangkan / Pulihkan→ Download template. (Ini tidak wajib, cuma untuk jaga-jaga saja).
4 Klik tombol Edit HTML.
5 Cari kode </head>, kemudian pasang kode css berikut tepat di atasnya.
Di sini saya akan mencontohkan bagaimana cara memasang responsive dropdown menu di blogger menggunakan cara ini.
Berikut langkah-langkah yang harus dilakukan :
1 Login ke blogger.
2 Buka halaman Tema.
3 Backup dahulu template yang anda gunakan dengan cara mengklik tombol Cadangkan / Pulihkan→ Download template. (Ini tidak wajib, cuma untuk jaga-jaga saja).
4 Klik tombol Edit HTML.
5 Cari kode </head>, kemudian pasang kode css berikut tepat di atasnya.
CSS Multy Level Responsive Dropdown Menu
<style type="text/css">
.nav-menu {background: rgba(38,50,56,1);width:100%;}nav {width:100%;padding:0;}
nav:after {content: "";display: table;clear: both;}nav ul {float:left;padding: 0;margin: 0;list-style: none;position: relative;}
nav ul li {margin: 0px;display: inline-block;float: left;}nav ul li ul li{background: #333;}
nav a, nav a:hover, nav a:visited {display: block;padding: 0 20px;color: #FFF;font-size: 20px;line-height: 60px;text-decoration: none;}
nav ul li ul li:hover {background-color: rgba(84,110,122,1);}nav a:hover {background-color: rgba(84,110,122,1);}
nav ul li ul li a:hover {background-color: rgba(84,110,122,1);}nav ul ul {display: none;position: absolute;top: 60px;}
nav ul li:hover > ul {display: inherit;}nav ul ul li {width: 200px;float: none;display: list-item;position: relative;}
nav ul ul ul li {position: relative;top: -60px;left: 200px;}nav label span{float:right;}.toggle, [id^=drop] {display: none;}
nav input[type=checkbox]{display: none;}
.sub-sub:after{content: "›";float:right;font-size:120%;}
/*** Media Queries ***/
@media all and (max-width : 768px) {
nav {margin: 0;}.toggle + a,.menu {display: none;}
.toggle {display: block;background-color:#333;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;border: none;cursor:pointer;}
.toggle:hover {background-color: #000000;}[id^=drop]:checked + ul {display: block;width: 100%;}
nav ul li {display: block;width: 100%;}nav ul ul .toggle,nav ul ul a, nav ul ul a:hover {padding: 0 40px;}
nav ul ul ul a, nav ul ul ul a:hover {padding: 0 60px;}nav ul ul ul a {background-color: #000000;}
nav ul li ul li .toggle,nav ul ul a {background-color: #212121;}nav ul ul {float: none;position: static;color: #ffffff;}
nav ul ul li:hover > ul,nav ul li:hover > ul {display: none;}nav ul ul li {display: block;width: 100%;}nav ul ul ul li {position: static;}
}
</style>
6 Cari kode yang sudah anda temukan menggunakan cara yang sudah saya ilustrasikan di atas tadi. (misalnya </header>).
<style type="text/css">
.nav-menu {background: rgba(38,50,56,1);width:100%;}nav {width:100%;padding:0;}
nav:after {content: "";display: table;clear: both;}nav ul {float:left;padding: 0;margin: 0;list-style: none;position: relative;}
nav ul li {margin: 0px;display: inline-block;float: left;}nav ul li ul li{background: #333;}
nav a, nav a:hover, nav a:visited {display: block;padding: 0 20px;color: #FFF;font-size: 20px;line-height: 60px;text-decoration: none;}
nav ul li ul li:hover {background-color: rgba(84,110,122,1);}nav a:hover {background-color: rgba(84,110,122,1);}
nav ul li ul li a:hover {background-color: rgba(84,110,122,1);}nav ul ul {display: none;position: absolute;top: 60px;}
nav ul li:hover > ul {display: inherit;}nav ul ul li {width: 200px;float: none;display: list-item;position: relative;}
nav ul ul ul li {position: relative;top: -60px;left: 200px;}nav label span{float:right;}.toggle, [id^=drop] {display: none;}
nav input[type=checkbox]{display: none;}
.sub-sub:after{content: "›";float:right;font-size:120%;}
/*** Media Queries ***/
@media all and (max-width : 768px) {
nav {margin: 0;}.toggle + a,.menu {display: none;}
.toggle {display: block;background-color:#333;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;border: none;cursor:pointer;}
.toggle:hover {background-color: #000000;}[id^=drop]:checked + ul {display: block;width: 100%;}
nav ul li {display: block;width: 100%;}nav ul ul .toggle,nav ul ul a, nav ul ul a:hover {padding: 0 40px;}
nav ul ul ul a, nav ul ul ul a:hover {padding: 0 60px;}nav ul ul ul a {background-color: #000000;}
nav ul li ul li .toggle,nav ul ul a {background-color: #212121;}nav ul ul {float: none;position: static;color: #ffffff;}
nav ul ul li:hover > ul,nav ul li:hover > ul {display: none;}nav ul ul li {display: block;width: 100%;}nav ul ul ul li {position: static;}
}
</style>
6 Cari kode yang sudah anda temukan menggunakan cara yang sudah saya ilustrasikan di atas tadi. (misalnya </header>).
HTML Multy Level Responsive Dropdown Menu
<div class="nav-menu"> <nav> <label class="toggle" for="drop">Menu <span>☰</span></label> <input id="drop" type="checkbox"> <ul class="menu"> <li><a href="/">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li> <label for="drop-1" class="toggle">Menu 3 <span>+</span></label> <a href="#">Menu 3</a> <input type="checkbox" id="drop-1"/> <ul> <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> <label for="drop-2" class="toggle">Sub-sub Menu <span>+</span></label> <a href="#" class="sub-sub">Sub-sub Menu</a> <input type="checkbox" id="drop-2"/> <ul> <li><a href="#">Sub-sub Menu 1</a></li> <li><a href="#">Sub-sub Menu 2</a></li> <li><a href="#">Sub-sub Menu 3</a></li> </ul> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> </ul> </nav> </div>
Kemudian pasang kode html responsive menu berikut tepat di bawahnya.7 Klik tombol Simpan template.Selesai…
0 komentar:
Posting Komentar