Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

50
Tgl. 29 September 2012

Cara Membuat Sub Menu Pull Down Bertingkat Pada Bilah Navigasi Pengganti Navbar

Artikel ini merupakan kelanjutan dari artikel sebelumnya yang berjudul “ Cara Membuat Tab Menu Horizontal Seperti Navbar Di Atas Header Ha...

ELTELU - Pull Down Dengan Sub Menu Bertingkat Pada Bilah Navigasi
Artikel ini merupakan kelanjutan dari artikel sebelumnya yang berjudul “Cara Membuat Tab Menu Horizontal Seperti Navbar Di Atas Header Halaman Blog”. Apabila dalam artikel tersebut diuraikan mengenai cara menyembunyikan bilah navbar sekaligus membuat bilah navigasi baru yang berisikan 2 (dua) buah kolom menu, maka perlu diketahui bahwa menu yang terbentuk atas penggunaan rangkaian kode yang terdapat dalam artikel tersebut hanyalah berupa 1 (satu) baris tab menu saja. Dengan demikian dapat diartikan bahwa ketika Anda ingin menambahkan sub menu pada masing-masing menu utama yang ada, tentu saja belum dapat dilakukan karena belum ada dukungan kode CSS yang digunakan untuk membuat bagian tersebut.

Lantas bagaimana jika Anda bermaksud atau berkeinginan untuk menambahkan sub menu pada menu utama yang ada pada bilah navigasi, sehingga akhirnya terbentuk menu bertingkat seperti yang tampak pada gambar di atas? Untuk mengerjakannya maka yang perlu dilakukan adalah dengan cara menambahkan rangkaian kode CSS berikut ini ke dalam template, dimana rangkaian kode CSS yang dimaksud nantinya akan berguna untuk menata desain tampilan sub menu yang akan dimunculkan. Dan kiranya tak perlu uraian panjang lebar, untuk menambahkan sub menu bertingkat seperti yang saya uraikan di atas, maka Anda dapat melakukannya dengan mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template>Edit HTML>Lanjutkan’.

Kedua, sisipkan kode CSS berikut ini di bawah rangkaian kode CSS sebelumnya (lihat rangkaian kode CSS yang terdapat pada langkah ketiga artikel sebelumnya), atau dapat pula Anda sisipkan di atas kode ]]></b:skin>.
.kolom-menu ul li ul, 
.kolom-menu ul li:hover li ul, 
.kolom-menu ul li:active li ul, 
.kolom-menu ul li:focus li ul {
  z-index: 100; 
  position: absolute; 
  left: -1800px;
  height: auto; 
  margin: 0; 
  padding: 0;
  background-color: #336699; 
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
}

.kolom-menu ul li ul li a, 
.kolom-menu ul li ul li ul li a {
  border-right: none; 
  box-shadow: none; 
  width: 100%;
}

.kolom-menu ul li ul li a:hover, 
.kolom-menu ul li ul li a:focus,
.kolom-menu ul li ul li ul li a:hover, 
.kolom-menu ul li ul li ul li a:focus {
  background-color: rgba(255, 255, 255, 0.125); 
  width: 100%;
}

/* List Item Kolom Sub Menu Pertama
------------------------------------*/
.kolom-menu ul li ul li, 
.kolom-menu ul li ul li:first-child {
  border-left: none; 
  width: 100px;
}

.kolom-menu ul li:hover ul, 
.kolom-menu ul li:active ul, 
.kolom-menu ul li:focus ul {
  left: auto; 
  top: 26px; 
  width: 120px;
}

/* List Item Kolom Sub Menu Kedua
------------------------------------*/
.kolom-menu ul li ul li ul li, 
.kolom-menu ul li ul li ul li:first-child {
  border-left: none; 
  width: 300px;
}

.kolom-menu ul li ul li:hover ul, 
.kolom-menu ul li ul li:active ul, 
.kolom-menu ul li ul li:focus ul {
  top: -1px; 
  white-space: normal; 
  text-align: justify;
  left: 120px; 
  width: 320px;
}

Keterangan:
Kode width: 120px; digunakan untuk mengatur ukuran lebar kolom sub menu level 1.  Apabila Anda melakukan perubahan untuk lebar kolom sub menu level 1 dengan mengganti angka yang digunakan pada kode tersebut, maka angka yang terdapat pada width: 100px; juga harus diubah dengan ketentuan angka yang digunakan untuk lebar kolom sub menu level 1 dikurangi 20. Sehingga jika Anda mengubah width: 120px; menjadi width: 200px;, maka secara otomatis width: 120px; harus diubah menjadi width: 180px;.
Demikian pula jika Anda melakukan perubahan untuk angka yang terdapat pada width: 320px;, maka secara otomatis pula angka yang digunakan pada width: 300px; adalah 320 – 20 = 300.
Sedangkan untuk angka yang digunakan pada left: 120px; adalah sama dengan angka yang digunakan pada width: 120px;. Sehingga apabila Anda melakukan perubahan ukuran pada width: 120px;, maka angka yang digunakan pada kode left: 120px; haruslah diisi dengan angka yang sama.

Ketiga, cari rangkaian kode berikutnya (lihat contoh format rangkaian kode yang terdapat pada langkah keempat artikel sebelumnya), kemudian sisipkan rangkaian kode baru di dalamnya dengan menggunakan format seperti contoh di bawah ini.
<ul>
  <li><a href='URL'>Sub Menu 1</a>
    <ul>
      <li><a href='URL'>Sub Menu 1.1</a></li>
      <li><a href='URL'>Sub Menu 1.2</a></li>
      <li><a href='URL'>Sub Menu 1.3</a></li>
    </ul>
  </li>
  <li><a href='URL'>Sub Menu 2</a></li>
</ul>

Sehingga apabila rangkaian kode tersebut telah disisipkan pada kode sebelumnya, maka akan menjadi seperti berikut ini.
<div class='bilah-menu-atas' id='bilahmenuatas' style='top: 0px;'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://eltelu.blogspot.com/'><img alt='L3' height='15px' src='https://lh6.googleusercontent.com/-GrWWmwsRww4/UFjcGGzlSYI/AAAAAAAAAn0/rP9UFz050sk/s800/Beranda.png' width='20px'/></a></li>
        
        
        <li><a href='URL'>Menu Kiri 1</a>
        
          <ul>
            <li><a href='URL'>Sub Menu 1</a>
              <ul>
                <li><a href='URL'>Sub Menu 1.1</a></li>
                <li><a href='URL'>Sub Menu 1.2</a></li>
                <li><a href='URL'>Sub Menu 1.3</a></li>
              </ul>
            </li>
            <li><a href='URL'>Sub Menu 2</a></li>
          </ul>
          
        </li>  
        
        <li><a href='URL'>Menu Kiri 2</a></li>
        
        
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='URL'>Menu Kanan 1</a></li>
        <li><a href='URL'>Menu Kanan 2</a></li>
      </ul>
    </div>
  </div>
</div>

Dan selanjutnya lakukan perubahan URL sesuai dengan link yang akan ditautkan serta sesuaikan pula nama sub menu yang akan ditampilkan.

Keempat, simpan template.

Semoga berguna dan bermanfaat. Dan apabila mengalami kesulitan dalam mengimplementasikan teknik tersebut pada blog  yang Anda kelola, maka silakan mengajukan pertanyaan mengenai kesulitan yang Anda alami dengan cara mengeposkan komentar dalam artikel ini.
Salam.


Katagori: , ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 50 komentar pada artikel ini ▶
Anonim
01/10/12 13.06 O

minta demonya dong kang, kurang faham saja maksudnya walau sudah liat gambar, maklum otak pas2an wkwkkw

01/10/12 21.02 O

Blog nya udah ane follow namanya liong seo, ditunggu followback nya
ke http://liong-seo.blogspot.com/

tolong ya bro, kerjasamanya :)

02/10/12 12.54 O

@teknokers.comUntuk demo dari penerapan teknik tersebut dapat Sobat temukan dalam menu 'Artikel Terkini' yang terdapat pada bilah navbar (bagian atas) halaman ini.

Akan tetapi memang sub menu yang saya gunakan pada bagian tersebut hanya 1 (satu) tingkat saja. Berbeda dengan sub menu yang terdapat pada gambar contoh yang terdiri dari 2 (dua) tingkatan.

Namun demikian saya dapat memastikan bahwa teknik tersebut dapat digunakan untuk membuat 2 (dua) level sub menu seperti yang tampak pada gambar di atas.

Sekian dan salam. :)

14/11/12 03.30 O

Masih Bingung, maklum beginner :)

14/11/12 18.15 O

@Hadrinas NasutionKarena artikel ini merupakan kelanjutan dari artikel sebelumnya, maka agar Sobat tidak bingung silakan pelajari terlebih dulu artikel sebelumnya yang berjudul "Cara Membuat Tab Menu Horizontal Seperti Navbar Di Atas Header Halaman Blog. :)

18/11/12 15.53 O

thanks infonya...

18/11/12 22.44 O

@LUKMAN ARI ZAFATA ( AYIK )Sama-sama Sobat. :)

Anonim
10/12/12 15.39 O

Sore sob ayah,

diriku dulu uda buat breadcumb tutor ayah dan berhasil

sekarang mau kasih sub menu kug masih error..

saya cuma mau buat sub menu 1 aja..
kalau di tutor kan abiz sub menu 1 ada lagi 1.1 nya

truz saya hapus itu kode ul ampe ul (yg berhub dg sub menu 1.1))

tapi masih error..
error terletak pada ul katanya template saya..

mohon pencerahan..
tims yaaa

14/12/12 15.29 O

@andieshinigamiMenurut sepengetahuan saya, bila tag yang dihapus sudah benar maka tidk akan terjadi error kok.

Jadi jika ingin menghilangkan Sub Menu 1.1 s/d Sub Menu 1.3, maka yang dihapus adalah dari tag pembuka s/d penutup utuk bagian tersebut. Sebagai contoh misalnya misalnya seperti yang saya tandai dengan huruf tebal dalam rangkaian kode berikut ini:

[ul]
--[li][a href='URL']Sub Menu 1[/a]
----[ul]
------[li][a href='URL']Sub Menu 1.1[/a][/li]
------[li][a href='URL']Sub Menu 1.2[/a][/li]
------[li][a href='URL']Sub Menu 1.3[/a][/li]
----[/ul]

--[/li]
--[li][a href='URL']Sub Menu 2[/a][/li]
[/ul]

Jadi, coba cermati ulang apakah kode yang dihapus benar-benar sudah sesuai atau belum. :)

Anonim
15/12/12 03.37 O

Infonya bagus dan usefull semua sob...

sukses selalu buat eltelu..

16/12/12 01.24 O

@mimbarkita Terimakasih dan sukses balik untuk Sobat. :)

[]//b:skin ,, itu letaknya dimana ya ?

18/12/12 01.19 O

@SungRa a.k.a Shin Rin Chan ELFSobat dapat menemukannya dalam area CSS template. :)

23/12/12 21.02 O

mas saya mau tanya....itu kan untuk membuat menudropdown doank nah untuk mousenya gmna???harus di klik baru muncul linknya paa di taruh di atas link aja nah itu codenya gmna....saya masih kurang paham,,,

23/12/12 21.02 O

mas saya mau tanya....itu kan untuk membuat menudropdown doank nah untuk mousenya gmna???harus di klik baru muncul linknya paa di taruh di atas link aja nah itu codenya gmna....saya masih kurang paham,,,

24/12/12 16.53 O

@anything4uSobat, jujur saja saya juga agak kurang paham dengan maksud dari pertanyaan yang obat ajukan.

Namun agar Sobat tidak mengalami kesulitan bila mengimplementasikan teknik yang diuraikan dalam artikel ini, maka silakan buka artikel sebelumnya yang berjudul Cara Membuat Tab Menu Horizontal Seperti Navbar Di Atas Header Halaman Blog. Karena seperti yang telah saya tuliskan dalam paragraf pertama bahwasanya uraian dalam artikel ini merupakan kelanjutan dari uraian artikel tersebut.

Semoga dapat membantu. :)

29/12/12 10.30 O

mas mw nanya. misalna qt mw bkin navigasi "about". kan bakalan ada alamat url na. nah alamat url itu kita dpt drmn?
makasih penjelasannya :)

29/12/12 16.12 O

@Putri HidayatiSobat, alamat URL bisa didapat dari link artikel atau laman yang ingin ditautkan.

Sebagai contoh misalnya alamat url untuk artikel ini adalah http://eltelu.blogspot.com/2012/09/cara-membuat-sub-menu-pull-down.html

Semoga dapat membantu. :)

31/12/12 18.45 O

Sobat Ayahe, saya ijin pake yang ini...

31/12/12 21.19 O

MAKASIH gan ,, kunjung balik yaa... :)

01/01/13 15.55 O

@Kraeng FranciscoSilakan Sob. :)

01/01/13 16.07 O

@Aziz YagisSama-sama Sobat. :)

13/01/13 00.23 O

terimakasih, sudah ane coba
http://budayabacabaca.blogspot.com

15/01/13 16.14 O

Bang Semar Bingung, ane mau tanya, ane sdh buat blog dengan ada 5halaman,saya ingin buat sub halaman hanya di halaman 4.Bgmna caranya membuat sub menunya ya...krn ane sdh ngikutin yg Bang Semar bilang, tpi tetep gk bs buat sub halaman.Bgmana ya Bang Semar...supaya bisa dibuat sub halaman...saya tgu jawabannya ya Bang Semar di: hantoro.farrelapringga@gmail.com
Terimaksih Banyak....

16/01/13 16.41 O

@niema elSama-sama Sobat. Semoga bermanfaat.

17/01/13 05.21 O

@hantoro farrelSobat, menurut sepengetahuan saya hal yang seperti itu tidak dapat dilakukan. Hal ini disebabkan karena halaman yang kita buat sebenarnya merupakan halaman mandiri atau yang biasa disebut sebagai halaman statis.

Sehingga yang bisa dilakukan adalah menerbitkan posting baru dan kemudian memasukkan alamat artikel yang telah diposting ke dalam menu/sub menu dengan cara seperti yang diuraikan dalam artikel ini.

Semoga dapat membantu.

19/01/13 18.30 O

Bang klaw mau masukin postingan ke menu lain biar gk ada ada di home, gmna caranya mas ??

22/01/13 01.27 O

@heru sajalahSobat, menurut sepengetahuan saya apabila kita mem-posting artikel, maka artikel tersebut secara default akan ditampilkan di beranda (home).

Terkecuali bila kita melakukan posting pada halaman statis, maka dapat dipastikan postingan tersebut tidak lagi ditampilkan di beranda.

Namun demikian hal yang seperti itu sebenarnya juga dapat dilakukan, dalam hal ini adalah dengan cara mengubah atau mengganti script yang digunakan untuk halaman beranda.

23/01/13 12.08 O

mas bro nice ilmu, saya mao tanya, kalo bikin menu dropdown kayak gtu trus di tambah scroll otomatis bisa ga ya??
tahnx _/\_

24/01/13 00.32 O

@hinstinctSemestinya sih bisa, Sob. Tapi jujur saja saya juga belum pernah mencobanya.

24/01/13 11.23 O

@AYAHE MELA

oke deh mas bro, thanx ya...
izin adopsi style menu pull downnya ya...

24/01/13 11.29 O

@hinstinctSilakan Sob.

14/03/13 13.46 O

nice posting sob....
aku mau tanya nih, gimana cara agar navbar tidak berdekatan sama headernya?
seperti di blog ane nih.
http://felickerz.blogspot.com
di tunggu solusinya gan.

14/03/13 21.36 O

@Inggih RiandinataSobat, setelah melakukan pengecekan pada blog yang Sobat kelola, saya tidak menemukan adanya navbar seperti yang digunakan pada blog ini.

Dengan demikian maka saya rasa tidak ada yang perlu saya berikan uraian penjelasan atas pertanyaan Sobat tersebut. :)

20/03/13 09.02 O

Wahwah.. lha ini yang saya cari :D
Thanks alot infonya. Silahkan mampir juga ke blog saya. Hehe

28/03/13 22.29 O

@Hasana DinaOke...! Terimakasih balik untuk Sobat. :)

09/04/13 10.14 O

wuih mantap banget Gan !!!
dari dulu cari ilmu ini... udah dapet beberapa script tapi malah buat blog super lelet, yang ini mah ngga :D
makasih Gan :)

tapi ada 1 pertanyaan gan..
saya setting page jadi menu horizontal pada blog percobaan ane

http://animeon-lyrics.blogspot.com/

saya pengennya sub menu pull downnya di tulisan AMAGAMI SS, bukan di Nav bar. bisa ngga?
atau ini yang agan bilang halaman statis?

klo bisa, mau saya pake di blog utama saya ione13

makasih sebelumnya :D

15/04/13 15.23 O

@ioneSobat, perlu diingat bahwa uraian teknik ini memang hanya diperuntukkanguna melengkapi teknik pembuatan navbar dalam artikel sebelumnya. Sehingga bila Sobat ingin menerapkan pada bagian yg berbeda, maka tentu saja caranya juga tidak sama. Contohnya misalnya adalah pembuatan sub menu pada bilah menu standar Blogger, yang dapat Sobat temukan artikelnya dalam daftar isi.

15/07/13 09.16 O

mas.. mau tanya ni, saya mau edit blog "labsainsdalazhar.blogspot.com" mau dibuat menu pull down...
saya agak kebingungan.. nanti kalo misalnya diganti.. berarti musti ngerubah semua..
mau tanya mas.. cara singkatnya saya cukup menambahkan tutorial yang mana?

15/07/13 23.05 O

@Laboratorium SainsKalau untuk cara yang paling singkat, lebih baik menggunakan teknik yang saya uraikan dalam artikel di bawah ini Sob.

Cara Membuat Menu Tab Keren Pada Blog Dengan Sub Menu Pull Down Dan Ujung Sudut Melengkung

Saya rasa uraian dalam artikel tersebut lebih rinci, karena di sana juga saya sertakan keterangan yang memberikan penjelasan untuk masing-masing bagian.

Disamping itu artikel tersebut juga merupakan pembaruan (update) dari beberapa artikel sebelumnya yang menjelaskan tentang tata cara pembuatan tab menu horizontal pada bagian atas blog.

29/08/13 18.56 O

terima kasih eltelu..

02/09/13 10.11 O

@melody lodysIya Sob. Sama-sama.

14/12/13 08.12 O

Udah ane coba jos. tapi ada sedikit kendala. kenapa kalau di klik menu drop downya membuak ke jendela baru. ane pengenya gak buka ke jendela baru alias masih di jendela yang ane buka.
Makasih gan

14/12/13 09.35 O

@AsetTerbuka pada tab atau jendela baru disebabkan karena digunakannya target="_blank" pada kode tautan yang dipasang.

Jadi coba hilangkan target="_blank" pada kode tautan yang Sobat pasang pada masing-masing sub menu agar jika diklik tidak lagi terbuka pada tab atau jendela baru.

Semoga dapat membantu. :)

15/12/13 11.30 O

mantep gan saranya. jendela barunya sudah tidak muncul. sangat bermanfaat baget saranya apalagi buat ane yang buta kode html. thank you ELTELU

16/12/13 07.48 O

@AsetSyukurlah kalau sekarang permasalahannya sudah dapat teratasi Sob. :)

20/12/13 09.09 O

gak ketemu kode ]]> nya gimana solusinya

20/12/13 09.30 O

@muhamad dadanMestinya ada Sob. Karena kebetulan template yang Sobat gunakan adalah template standar yang telah disediakan oleh Blogger.

Jadi setelah Edit HTML klik di dalam kode yang ditampilkan dan kemudian coba cari dengan menggunakan Ctrl + F.

25/06/15 19.52 O

mas.. saya masih kurang paham tentang

[ul]
--[li][a href='URL']Sub Menu 1[/a]
----[ul]
------[li][a href='URL']Sub Menu 1.1[/a][/li]
------[li][a href='URL']Sub Menu 1.2[/a][/li]
------[li][a href='URL']Sub Menu 1.3[/a][/li]
----[/ul]
--[/li]
--[li][a href='URL']Sub Menu 2[/a][/li]
[/ul]

bisa tolong dibantu..

26/06/15 06.28 O

@Yensisca Ranni 'URL' menyatakan link artikel atau laman yang ditautkan sedangkan 'Sub Menu ...' menyatakan nama menu yang digunakan Sob.

Sebagai contoh misalnya 'URL' saya isi dengan http://eltelu.blogspot.com/p/sitemap.html dan 'Sub Menu ...' saya isi dengan kata 'DAFTAR ISI' maka jadinya lebih kurang adalah seperti menu daftar iai yang terdapat pada bagian atas laman blog ini.

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog