Membuat Menu Navigasi Dengan Drop Down Submenu Menggunakan CSS

Berikut menu drop-down dibuat hanya dengan CSS, adalah menu horizontal dengan sub-tab dan sisi kanan memiliki pencarian bulat. Menu ini berguna bagi mereka yang tidak memerlukan menu kompleks atau memilih untuk tidak menggunakan salah satu yang memerlukan script dan / atau terlalu banyak gambar, juga instalasi dan kustomisasi cukup sederhana, dan untuk top it off cukup fungsional.

Untuk melihat penurunan ini down menu dalam tindakan, kunjungi ini demo blog

Sebelum melakukan apa pun, jika Anda menggunakan Template dilakukan melalui Blogger Template Designer, maka Anda harus mempertimbangkan melakukan perubahan dalam template, sebaliknya menu mungkin tidak ditampilkan dengan benar:

Dari Anda Dashboard Blogger , pergi ke Template ( membuat cadangan <lihat screenshot)> Edit HTML:

dan pencarian (CTRL + F) untuk baris berikut:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Screenshot

Hapus kode merah.
Anda mungkin memiliki banyak bagian sebagai salah satu di merah, menghapus semua yang Anda temukan.

.... Kemudian menemukan bagian ini dalam template Anda:

/ * Tabs
----------------------------------------------- * /

... Dan menghapus semua yang ada di dalamnya, sampai Anda mencapai ke bagian Pos.

/ * Tabs
----------------------------------------------- * /
. Tab-outer {
overflow: hidden;
position: relative;
background: $ (tabs.background.color) $ (tabs.background.gradient) ulangi gulir 0 0;
}
# Tata letak. Tab-luar {
overflow: terlihat;
}
. Tab-cap-top,. Tab-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid $ (tabs.border.color);
}
. Tab-cap-bottom {
bottom: 0;
}
. Tab-batin. Widget li a {
display: inline-block;
margin: 0;
padding: .6 em 1.5em;
Font: $ (tabs.font);
Warna: $ (tabs.text.color);
border-top: 1px solid $ (tabs.border.color);
border-bottom: 1px solid $ (tabs.border.color);
border-$ startSide: 1px solid $ (tabs.border.color);
}
.. Tab-batin widget li:-anak terakhir yang {
border-$ endSide: 1px solid $ (tabs.border.color);
}
.. Tab-batin widget li.selected a, tab-batin widget li a:.. Hover {
background: $ (tabs.selected.background.color) $ (tabs.background.gradient) repeat-x scroll 0-100px;
Warna: $ (tabs.selected.text.color);
}
/ * Pos
----------------------------------------------- * /

Kemudian tambahkan ini ke tempat kode telah dihapus (bukan kode dalam warna hijau):

# Crosscol ul {z-index: 200; padding: 0 penting;!}
# Crosscol li: hover {position: relative;}
# Crosscol ul li {padding: 0 penting;!}
. Tab-luar {z-index: 1;}

Setelah melakukan ini, akhirnya kita bisa menambahkan menu kami.

Cara Tambah Horizontal Drop Down Menu untuk Blogger

Untuk menempatkan menu ini horisontal dengan submenu di blog Anda, kemudian ikuti langkah selanjutnya:

. Langkah 1 Dari Template, pergi ke Edit HTML dan tepat di atas]]> </ b: skin> tempel gaya ini:

/ * Drop-down menu Horizontal
----------------------------------------------- * /
# MenuWrapper {
width: 100%; / * lebar menu * /
height: 35px;
padding-left: 14px;
background: # 333; / * Warna latar belakang * /
border-radius: 10px;
}
Menu {.
padding: 0;
margin: 0;
list-style: none;
height: 35px;
position: relative;
z-index: 5;
font-family: Arial, Verdana, sans-serif;
}
. Menu li: hover li a {
background: none;
}
. Menu li.top {display: block; float: left;}
. Menu li {a.top_link
display: block;
float: left;
height: 35px;
line-height: 34px;
color: # ccc;
text-decoration: none;
font-family: "Verdana", sans-serif;
font-size: 12px; / * Ukuran font * /
font-weight: bold;
padding: 0 0 0 12px;
kursor: pointer;
}
. Menu li a.top_link rentang {
float: left;
display: block;
padding: 24px 0 0 12px;
height: 35px;
}
. Menu li a.top_link span.down {
float: left;
display: block;
padding: 24px 0 0 12px;
height: 35px;
}
. Menu li a.top_link: hover, menu li: hover> a.top_link. {Color: # fff;}
. Menu li: hover {position: relative; z-index: 2;}
Menu ul.,
. Menu li: hover ul ul,
. Menu li: hover ul li: hover ul ul,
. Menu li: hover ul li: hover ul li: hover ul ul,
. Menu li: hover ul li: hover ul li: hover ul li: hover ul ul
{Position: absolute; kiri:-9999px; top:-9999px; width: 0; height: 0; margin: 0; padding: 0; list-style: none;}

. Menu li: hover {ul.sub
left: 0;
top: 35px;
background: # 333; / * Submenu warna latar belakang * /
padding: 3px;
white-space: nowrap;
width: 200px;
height: auto;
z-index: 3;
}
. Menu li: hover ul.sub li {
display: block;
height: 30px;
position: relative;
float: left;
width: 200px;
font-weight: normal;
}
. Menu li: hover ul.sub li a {
display: block;
height: 30px;
width: 200px;
line-height: 30px;
text-indent: 5px;
color: # ccc;
text-decoration: none;
}
. Menu li li ul.sub a.fly {
/ * Submenu Warna Latar Belakang * /
background: # 333 url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh84fs0xMqI5h7d_B9_GLIRNQaGmOday12wkbwW6uzQVAsLFInD_TX-nxBA1zvqttU198sbpUJulDCBErdPLBJ6d47MHbZfXnZkliQMScKbszFqncCQcW1uoZM5B0OU-n0-1Yi2_0mreR8/s1600/arrow_over.gif) 185px 10px tidak mengulang-;}
. Menu li: hover ul.sub li a: hover {
background: # 515151; / * Warna Latar Belakang pada mouseover * /
color: # fff;
}
. Menu li: hover ul.sub li a.fly:. Hover, menu li: hover ul li: hover> a.fly {
/ * Latar Belakang Gunakan mouse * /
background: # 646464 url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh84fs0xMqI5h7d_B9_GLIRNQaGmOday12wkbwW6uzQVAsLFInD_TX-nxBA1zvqttU198sbpUJulDCBErdPLBJ6d47MHbZfXnZkliQMScKbszFqncCQcW1uoZM5B0OU-n0-1Yi2_0mreR8/s1600/arrow_over.gif) 185px 10px tidak mengulang-; color: # fff;}

. Menu li: hover ul li: hover ul,
. Menu li: hover ul li: hover ul li: hover ul,
. Menu li: hover ul li: hover ul li: hover ul li: hover ul,
. Menu li: hover ul li: hover ul li: hover ul li: hover ul li: hover ul {
kiri: 200px;
top:-4px;
background: # 333; / * Background Warna Submenu ini * /
padding: 3px;
white-space: nowrap;
width: 200px;
z-index: 4;
height: auto;
}
# Search {
width: 228px; / * Lebar Kotak Pencarian * /
height: 50px;
float: right;
z-index: 2;
text-align: center;
margin-top: 5px;
margin-right: 6px;
/ * Latar Belakang Kotak Pencarian * /
background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvICZZLQEpVZCnvL9gZIqsER8jkSI0kSjSQZotVTyBvJgTlQEG_4CgHJ5j30qsyJhXgChUvSxrHFr4bVEyQpIF_jNVTBrp1kERdiEZiMveen3df-KVtnov3nb2bhUmpmFZPTvr1pr1nd4/s1600/searchBar.png) tidak mengulang-;
}
# Search-box {
margin-top: 3px;
border: 0px;
background: transparent;
text-align: center;
}

Screenshot

Langkah 2. Simpan Template

Langkah 3. Pergi ke Layout> klik pada link Add a Gadget

. Langkah 4 Pilih HTML / Javascript dan paste berikut ini di dalam kotak kosong:

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'> <a class='top_link' href=' Link URL'> <span> Judul 1 </ span> </ a> </ li>

<li class='top'> <a class='top_link' href=' URL Link'> <span class='down'> Judul 2 </ span> </ a> <ul class='sub'> <li > <a class='fly' href=' Link URL'> Submenu 2.1 </ a> <ul>
<li> <a href=' Link URL'> Submenu 2.1.1 </ a> </ li>
<li> <a href=' Link URL'> Submenu 2.1.2 </ a> </ li>
<li> <a href=' Link URL'> Submenu 2.1.3 </ a> </ li>
</ Ul>
</ Li>
<li class='mid'> <a class='fly' href=' Link URL'> Submenu 2.2 </ a>
<ul>
<li> <a href=' Link URL'> Submenu 2.2.1 </ a> </ li>
<li> <a href=' Link URL'> Submenu 2.2.2 </ a> </ li>
<li> <a href=' Link URL'> Submenu 2.2.3 </ a> </ li>
<li> <a class='fly' href=' Link URL'> Submenu 2.2.4 </ a>
<ul>
<li> <a href=' Link URL'> Submenu 2.2.4.1 </ a> </ li>
<li> <a href=' Link URL'> Submenu 2.2.4.2 </ a> </ li>
<li> <a href=' Link URL'> Submenu 2.2.4.3 </ a> </ li>
</ Ul>
</ Li>
<li> <a href=' Link URL'> Submenu 2.2.5 </ a> </ li>
<li> <a class='fly' href=' Link URL'> Submenu 2.2.6 </ a>
<ul>
<li> <a href=' Link URL'> Submenu 2.2.6.1 </ a> </ li>
<li> <a href=' Link URL'> Submenu 2.2.6.2 </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Li>
<li> <a href=' Link URL'> Submenu 2.3 </ a> </ li>
<li> <a href=' Link URL'> Submenu 2.4 </ a> </ li>
<li> <a href=' Link URL'> Submenu 2.5 </ a> </ li>
</ Ul>
</ Li>

<li class='top'> <a class='top_link' href=' URL Link'> <span class='down'> Judul 3 </ span> </ a>
<ul class='sub'>
<li> <a href=' Link URL'> Submenu 3.1 </ a> </ li>
<li> <a href=' Link URL'> Submenu 3.2 </ a> </ li>
<li> <a href=' Link URL'> Submenu 3.3 </ a> </ li>
<li> <a href=' Link URL'> Submenu 3.4 </ a> </ li>
</ Ul>
</ Li>

<li class='top'> <a class='top_link' href=' URL Link'> <span class='down'> Judul 4 </ span> </ a>
<ul class='sub'>
<li> <a href=' Link URL'> Submenu 4.1 </ a> </ li>
<li> <a class='fly' href=' Link URL'> Submenu 4.2 </ a>
<ul>
<li> <a href=' Link URL'> Submenu 4.2.1 </ a> </ li>
<li> <a href=' Link URL'> Submenu 4.2.2 </ a> </ li>
<li> <a href=' Link URL'> Submenu 4.2.3 </ a> </ li>
<li> <a href=' Link URL'> Submenu 4.2.4 </ a> </ li>
<li> <a href=' Link URL'> Submenu 4.2.5 </ a> </ li>
<li> <a href=' Link URL'> Submenu 4.2.6 </ a> </ li>
</ Ul>
</ Li>
<li> <a href=' Link URL'> Submenu 4.3 </ a> </ li>
<li> <a href=' Link URL'> Submenu 4.4 </ a> </ li>
<li> <a href=' Link URL'> Submenu 4.5 </ a> </ li>
<li> <a href=' Link URL'> Submenu 4.6 </ a> </ li>
</ Ul>
</ Li>

<li class='top'> <a class='top_link' href=' URL Link'> <span class='down'> Judul 5 </ span> </ a>
<ul class='sub'>
<li> <a href=' Link URL'> Submenu 5.1 </ a> </ li>
<li> <a href=' Link URL'> Submenu 5.2 </ a> </ li>
<li> <a href=' Link URL'> Submenu 5.3 </ a> </ li>
</ Ul>
</ Li>

<-! Search Bar ->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<Masukan id = 'search-box' name = 'q' onblur = 'if (this.value == "") this.value = "Cari di sini ...",' onfocus = 'jika (ini value == "Cari di sini ...") this.value = ""; 'size = '28' type = 'text' value = 'Cari di sini ...' /> </ form>.
</ Li>

</ Ul>
</ Div>

Kustomisasi:

- Mengganti teks dalam warna biru dan merah dengan link dan judul.
- Jika Anda membutuhkan lebih tab, kemudian tambahkan baris seperti ini tepat di atas <-! Search Bar ->

<li class="top"> <a href=" Link URL "class="top_link"> <span> Judul </ span> </ a> </ li>

- Jika Anda ingin menambahkan tab dengan sub-tab, kemudian tambahkan kode ini:

<li class="top"> <a href=" Link URL "class="top_link"> <span class="down"> Judul </ span> </ a>
<ul class="sub">
<li> <a href="Link URL"> Submenu Judul </ a> </ li>
<li> <a href=" Link URL "> Submenu Judul </ a> </ li>
<li> <a href=" Link URL "> Submenu Judul </ a> </ li>
</ Ul>
</ Li>

- Dan jika Anda ingin salah satu dari sub-tab memiliki sub-tab kemudian menghapus garis seperti yang ada di jeruk dan mengubahnya ke kode seperti ini:

<li> <a href=" Link URL "class="fly"> Submenu Judul </ a>
<ul>
<li> <a href=" Link URL "> Submenu lainnya </ a> </ li>
<li> <a href=" Link URL "> Submenu lainnya </ a> </ li>
<li> <a href=" Link URL "> Submenu lainnya </ a> </ li>
</ Ul>
</ Li>