Membuat Horizontal Navigation Menu Dengan Drop Down Submenus 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 yang kompleks atau memilih untuk tidak menggunakan salah satu yang membutuhkan skrip dan / atau terlalu banyak gambar, juga instalasi dan kustomisasi cukup sederhana, dan untuk top it off cukup fungsional. 

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

Sebelum melakukan apa-apa, jika Anda menggunakan Template dilakukan melalui Blogger Template Designer, maka Anda harus mempertimbangkan melakukan perubahan ini dalam template, jika 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 warna merah. 
Anda mungkin memiliki banyak bagian sebagai salah satu warna merah, menghapus semua yang Anda temukan. 

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

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

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

 / * Tabs
----------------------------------------------- * /
. Tabs-outer { 
overflow: hidden; 
position: relative; 
background: $ (tabs.background.color) $ (tabs.background.gradient) gulir ulangi 0 0; 
} 
# Tata letak. Tabs-outer { 
overflow: visible; 
} 
. Tab-cap-top,. Tab-cap-bottom { 
position: absolute; 
width: 100%; 
border-top: 1px $ padat (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); 
color: $ (tabs.text.color); 
border-top: 1px $ padat (tabs.border.color); 
border-bottom: 1px $ padat (tabs.border.color); 
border-$ startSide: 1px $ padat (tabs.border.color); 
} 
.. Tab-batin widget li: last-anak { 
border-$ endSide: 1px $ padat (tabs.border.color); 
} 
.. Widget tab-batin li.selected a, tab-batin widget li a:.. Hover { 
background: $ (tabs.selected.background.color) $ (tabs.background.gradient) repeat-x scroll 0-100px; 
color: $ (tabs.selected.text.color); 
}
/ * Pos
----------------------------------------------- * /

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

 # Crosscol ul {z-index: 200; padding:! 0 penting;}
# Crosscol li: hover {position: relative;}
# Crosscol ul li {padding: 0 penting;}
. Tabs-outer {z-index: 1;}
.... Tab widget ul, tab widget ul {overflow: visible;}

Setelah melakukan ini, akhirnya kita bisa menambahkan menu kami. 

Cara Tambah Horizontal Drop Down Menu untuk Blogger 

Untuk menempatkan menu horizontal 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: 

 / * Menu Horizontal drop down
----------------------------------------------- * /
# 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: melayang-layang 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: 0 24px 0 12px;
height: 35px;
}
. Menu li a.top_link span.down {
float: left;
display: block;
padding: 0 24px 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: melayang-layang ul ul,
. Menu li: hover ul li: melayang-layang ul ul,
. Menu li: hover ul li: hover ul li: melayang-layang ul ul,
. Menu li: hover ul li: hover ul li: hover ul li: melayang-layang ul ul
{Position: absolute; left:-9999px; top:-9999px; width: 0; height: 0; margin: 0; padding: 0; list-style: none;}

. Menu li: hover {ul.sub
kiri: 0;
top: 35px;
background: # 333; / * warna latar belakang Submenu * /
padding: 3px;
white-space: nowrap;
width: 200px;
height: auto;
z-index: 3;
}
. Menu li: melayang-layang ul.sub li {
display: block;
height: 30px;
position: relative;
float: left;
width: 200px;
font-weight: normal;
}
. Menu li: melayang-layang 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 Background Color * /
background: # 333 url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja6nN04HlrUU0EERQNDWReLawAQwCT-ps7JgemHz_W71nSSiocoathaFsqe2JiCoRmkbjwdqk4wENuzz50vx48Kubh1SdA7tZJjTR4BFI9CL3jBLr9bPvVTAUIjJgE2fx4PHMX_YVxkcg/s1600/arrow_over.gif) 185px 10px no-repeat;}
. Menu li: melayang-layang ul.sub li a: hover {
background: # 515151; / * Background Color pada mouseover * /
color: # fff;
}
. Menu li: hover ul.sub li a.fly: hover, menu li:. Membawa ul li: hover> a.fly {
/ * Latar Belakang Gunakan mouse * /
background: # 646464 url ​​(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja6nN04HlrUU0EERQNDWReLawAQwCT-ps7JgemHz_W71nSSiocoathaFsqe2JiCoRmkbjwdqk4wENuzz50vx48Kubh1SdA7tZJjTR4BFI9CL3jBLr9bPvVTAUIjJgE2fx4PHMX_YVxkcg/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 Color dari Submenu * /
padding: 3px;
white-space: nowrap;
width: 200px;
z-index: 4;
height: auto;
}
# Search {
width: 228px; / * Lebar dari Search Box * /
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/AVvXsEhWU85pNv1nMs1tdkP8za4HZUxgsZpaxDyn1Pi5DFw8NRCe4iROO4qriXCUi0Zc2OsYXRk9dhxWaW0vqahMKnxQwwfPXdRoEKa6ziBu_Gi7as7TloIPdm_21kB-p-AT-UQzfqOaUKSKs5c/s1600/searchBar1.png) no-repeat;
}
# Kotak pencarian {
margin-top: 3px;
border: 0px;
background: transparent;
text-align: center;
}

Screenshot

Langkah 2. Simpan Template 

Langkah 3. Pergi ke Layout> klik Tambah link Gadget 

. Langkah 4 Pilih HTML / Javascript dan paste berikut ke 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=' Link URL'> <span class='down'> Judul 2 </ span> </ a> <ul class='sub'> <li > <a class='fly' href=' Link URL'> Submenu 2.1 </ a> <ul>
<a href=' Link URL'> Submenu 2.1.1 </ a> </ li>
<a href=' Link URL'> Submenu 2.1.2 </ a> </ 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>
<a href=' Link URL'> Submenu 2.2.1 </ a> </ li>
<a href=' Link URL'> Submenu 2.2.2 </ a> </ li>
<a href=' Link URL'> Submenu 2.2.3 </ a> </ li>
<a class='fly' href=' Link URL'> Submenu 2.2.4 </ a>
<ul>
<a href=' Link URL'> Submenu 2.2.4.1 </ a> </ li>
<a href=' Link URL'> Submenu 2.2.4.2 </ a> </ li>
<a href=' Link URL'> Submenu 2.2.4.3 </ a> </ li>
</ Ul>
</ Li>
<a href=' Link URL'> Submenu 2.2.5 </ a> </ li>
<a class='fly' href=' Link URL'> Submenu 2.2.6 </ a>
<ul>
<a href=' Link URL'> Submenu 2.2.6.1 </ a> </ li>
<a href=' Link URL'> Submenu 2.2.6.2 </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Li>
<a href=' Link URL'> Submenu 2.3 </ a> </ li>
<a href=' Link URL'> Submenu 2.4 </ a> </ li>
<a href=' Link URL'> Submenu 2.5 </ a> </ li>
</ Ul>
</ Li>

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

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

<li class='top'> <a class='top_link' href=' Link URL'> <span class='down'> Judul 5 </ span> </ a>
<ul class='sub'>
<a href=' Link URL'> Submenu 5.1 </ a> </ li>
<a href=' Link URL'> Submenu 5.2 </ a> </ 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 = 'kotak pencarian-' name = 'q' onblur = 'if (== this.value "") this.value = "Cari di sini ...";' onfocus = 'if (ini . nilai == "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 banyak 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">
<a href="Link URL"> Submenu Judul </ a> </ li>
<a href=" Link URL "> Submenu Judul </ a> </ li>
<a href=" Link URL "> Submenu Judul </ a> </ li>
</ Ul>
</ Li>

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

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

Dan itu saja! Sekarang Simpan Widget Anda dan menikmati menu baru drop down! ;)