Vertikal Drop Down Menu Dengan JQuery

jGlideMenu adalah menu vertikal yang dapat menyeret dan menjatuhkan sehingga pembaca dapat menempatkan di mana saja, dan di samping itu, ia dapat menelusuri melalui tab dalam cara yang sangat aneh yang datang dengan efek geser memberikan sentuhan seksi. 

Salah satu keuntungan adalah bahwa hal itu dapat menyimpan sejumlah besar link dan dapat dihapus kapan saja jika kita ingin. 

Untuk memahami menu ini lebih baik dan untuk melihatnya dalam tindakan, kunjungi ini demo blog . Di sana kita dapat menarik menu, navigasi melalui tab atau dekat. 

Untuk menambahkan menu vertikal ini di blog Anda, ikuti langkah berikut: 

1) Dari dashboard Blogger Anda, pergi ke Template> Edit HTML dan sebelum </ head> tag, tambahkan script ini: 

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jQuery.jGlideMenu.min.js' type='text/javascript'/>

<script type='text/javascript'>
/ / <! [CDATA [
$ (Document). Ready (function () {
$ ('# JGlide_001'). JGlideMenu ({
tileSource: '. jGlide_001_tiles',
demoMode: palsu
}) Show ().;

. $ ('# Switch') klik (function () {. $ (Ini) jGlideMenuToggle ();});
});
/ /]]>
</ Script>

2) Sekarang paste sebelum]]> </ b: skin> gaya ini: 

 . JGM_box {
position: absolute; / * Perubahan absolut dengan diperbaiki jika Anda ingin float * /
top: 50px; / * Jarak dari atas * /
kanan: 760px; / * Jarak dari kanan * /
width: 227px;
height: 317px;
background: # fff; / * Warna latar belakang * /
margin: 0;
padding: 0;
border: 1px solid # ccc; / * Border * /
overflow: hidden;
}
. JGM_header {
position: absolute;
top: 0;
kiri: 0;
height: 18px;
width: 227px;
background: # d1d1d1; / * Warna latar belakang untuk up bar * /
color: # fff;
text-align: right;
vertical-align: tengah;
line-height: 18px;
kursor: bergerak;
}
. JGM_header a {
margin-right: 12px;
text-decoration: none;
color: # 000 penting;
kursor: pointer;
}
. JGM_wrapper {
position: absolute;
top: 19px;
kiri: 0;
width: 2270px;
height: 288px;
margin: 0;
padding: 0;
border: 0;
}
. JGM_tile {
position: absolute;
top: 0;
kiri: 7px;
width: 213px;
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
display: block;
}
. JGM_cats {
width: 100%;
height: 64px;
overflow: hidden;
vertical-align: tengah;
text-align: left;
}
. JGM_cats h4 {
font-family: Verdana, Arial, serif;
font-size: 1.8em;
margin: 0;
padding: 2px 0;
line-height: 1.8em;
color: # 414141;
font-weight: normal;
}
. JGM_cats p {
font-family: Verdana, tahoma, arial;
font-size: 1em; / * Ukuran font dari deskripsi * /
margin: 0;
padding: 0;
line-height: 1.2em;
color: # 858585; / * Keterangan warna * /
font-weight: normal;
}
. JGM_pager {
height: 18px;
width: 213px;
line-height: 18px;
margin: 0;
border: 0;
padding: 0;
background: # f6f6f6;
text-align: center;
vertical-align: tengah;
}
JGM_pager a {.
text-decoration: none;
font-weight: bold;
text-decoration: none;
display: block;
}
. JGM_pager a: hover {background: # d1d1d1;}
. JGM_pager img {border: 0; margin: 6px 0;}
. JGM_content {
width: 213px;
height: 150px;
margin: 1px 0;
padding: 0;
border: 0;
overflow: hidden;
}
JGM_content a {.
font-family: Tahoma, arial;
text-decoration: none;
color: # 333 penting;
height: 18px;
width: 100%;
display: block;
line-height: 18px;
padding: 0 0 0 10px;
background-color: # e6e7e9;
margin: 1px 0;
}
. JGM_content a: hover {
color: # fff penting;
background-color: # 4D4E67; / * Bar warna pada mouseover * /
}
. JGM_more {
background-image: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcWfexnXlgQ8RhPR8XX0Iu_ozjTOY76mLcEQlSYDjSZkvZXW5NWKgVVPNb37o8CfQUNXemDt40SE1icVVi94NAXvj_MS04a3ATiJx2LA2Psm-XlOpv1N_YKEjhn3aMNCfdEoawCAUvKBc/s1600/arrow.gif);
background-repeat: no-repeat;
background-position: 203px 50%;
}
. JGM_back {
position: absolute;
top: 255px;
kanan: 0;
height: 18px;
width: 52px;
background: # d1d1d1;
line-height: 18px;
vertical-align: tengah;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
. JGM_back a {
height: 100%;
width: 100%;
text-decoration: none;
color: # 000 penting; / * Warna dari "Kembali" link * /
display: block;
}
. JGM_back a: hover {
color: # fff penting; / * Warna dari "Kembali" link pada mouseover * /
background: # 4D4E67;
}
. JGM_reset {
position: absolute;
top: 255px;
kanan: 62px;
height: 18px;
width: 52px;
background: # d1d1d1;
line-height: 18px;
vertical-align: tengah;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
JGM_reset a {.
height: 100%;
width: 100%;
text-decoration: none;
color: # 000 penting; / * Warna "Home" link * /
display: block;
}
. JGM_reset a: hover {
color: # fff penting; / * Warna "Home" link pada mouseover * /
background: # 4D4E67;
}

3) Sekarang pergi ke Layout dan paste struktur menu di dalam gadget HTML / Javascript: 

 <div class="jGM_box" id="jGlide_001">

<-! Di sini semua link dari tingkat pertama ->
<ul id="tile_001" class="jGlide_001_tiles" title="Menu" alt="Description dari level"> pertama
<li rel="tile_002"> Link 1 </ li>
<li rel="tile_003"> Link 2 </ li>
<li rel="tile_004"> Link 3 </ li>
<li rel="tile_006"> Link 4 </ li>
<li rel="tile_007"> Tautan 5 </ li>
<a href=" URL alamat "> Tautan 6 </ a> </ li>
<a href=" URL alamat "> Tautan 7 </ a> </ li>
<a href=" URL alamat "> Tautan 8 </ a> </ li>
<a href=" URL alamat "> Tautan 9 </ a> </ li>
<a alamat URL href=" "> Link 10 </ a> </ li>
<a alamat URL href=" "> Link 11 </ a> </ li>
</ Ul>

<-! Di sini semua link dari tingkat kedua ->
<ul id="tile_002" class="jGlide_001_tiles" title="Menu" alt="Description dari level"> kedua
<li rel="tile_005"> Tautan 1.1 </ li>
<a href=" URL alamat "> Tautan 1.2 </ a> </ li>
<a href=" URL alamat "> Tautan 1.3 </ a> </ li>
<a href=" URL alamat "> Tautan 1.4 </ a> </ li>
</ Ul>

<ul id="tile_003" class="jGlide_001_tiles" title="Menu" alt="Description dari level"> kedua
<a href=" URL alamat "> Tautan 2,1 </ a> </ li>
<li rel="tile_008"> Tautan 2,2 </ li>
<a href=" URL alamat "> Tautan 2.3 </ a> </ li>
</ Ul>

<ul id="tile_004" class="jGlide_001_tiles" title="Menu" alt="Description dari level"> kedua
<a href=" URL alamat "> Tautan 3,1 </ a> </ li>
<a href=" URL alamat "> Tautan 3.2 </ a> </ li>
<a href=" URL alamat "> Tautan 3.3 </ a> </ li>
</ Ul>


<ul id="tile_006" class="jGlide_001_tiles" title="Menu" alt="Description dari level"> kedua
<a href=" URL alamat "> Tautan 4.1 </ a> </ li>
<a href=" URL alamat "> Tautan 4.2 </ a> </ li>
<a href=" URL alamat "> Tautan 4.3 </ a> </ li>
</ Ul>

<ul id="tile_007" class="jGlide_001_tiles" title="Menu" alt="Description dari level"> kedua
<a href=" URL alamat "> Tautan 5.1 </ a> </ li>
<a href=" URL alamat "> Tautan 5.2 </ a> </ li>
</ Ul>


<-! Di sini semua link dari tingkat ketiga ->
<ul id="tile_005" class="jGlide_001_tiles" title="Menu" alt="Description dari level"> ketiga
<a href=" URL alamat "> Tautan 1.1.1 </ a> </ li>
<a href=" URL alamat "> Tautan 1.1.2 </ a> </ li>
</ Ul>


<ul id="tile_008" class="jGlide_001_tiles" title="Menu" alt="Description dari level"> ketiga
<a href=" URL alamat "> Tautan 1.2.1 </ a> </ li>
<a href=" URL alamat "> Tautan 1.2.2 </ a> </ li>
</ Ul>

</ Div>

Tambahkan URL dari link dan nama-nama tab dan hanya itu. 
Jika Anda ingin menambahkan lebih banyak link ke tingkat pertama, kemudian tambahkan baris lain seperti ini: 

 <a alamat URL href=" "> Tautan 12 </ a> </ li>

Jika Anda ingin menambah tingkat ke link tersebut, maka garis harus seperti ini: 

 <li rel="tile_0010"> Link 5 </ li>

Kemudian di daerah tingkat kedua atau ketiga, menambahkan potongan seperti ini: 

 <ul id="tile_0010" class="jGlide_001_tiles" title="Menu" alt="Description dari level"> kedua
<a href=" URL alamat "> Tautan 5.1 </ a> </ li>
<a Url href=" "> alamat link 5.2 </ a> </ li>
</ Ul>

Di sini Anda harus menjaga sesuatu dalam pikiran, jika Anda melihat dekat link mengambil atribut REL yang harus sama dengan ID kita pasang di tingkat kedua, ID tersebut tidak harus mengulang dan selalu unik. 
Ya, kedengarannya rumit, tapi setelah Anda memahami konsep ini, Anda akan melihat bahwa sebenarnya cukup sederhana. 

Di daerah dari gaya, ada bagian-bagian yang dapat disesuaikan. Jika Anda ingin menu yang akan statis, katakanlah Anda ingin menambahkan di sidebar, kemudian hapus kode pertama dari script yang ada di miring.Dan dalam gaya CSS, menghapus bagian ini: 

 position: absolute; / * Perubahan absolut dengan diperbaiki jika Anda ingin float * /
top: 50px; / * Jarak di atas * /
kanan: 760px; / * Jarak ke kanan * /

Ketika ada banyak link maka, akan ada menunjukkan beberapa anak panah, jadi ketika Anda Gunaka mouse mereka, ia akan menampilkan sisa link baik atas atau bawah. 

Sepanjang struktur menu kita dapat mengubah nama Menu dan deskripsi juga. 

Sebagai menu ini dibuat dengan JQuery, dianjurkan untuk memverifikasi hanya memiliki satu versi itu.