Langsung ke konten utama

CSS Dropdown Menu


Hello,kali ini saya akan berbagi Widget CSS Dropdown Menu,yaitu Menu dengan css yang sederhana yang dilengkapi dengan fungsi Dropdown dan Sub menu .Penggunaanya sangat praktis dan mudah untuk dimodifikasi.Contohnya kalian bisa melihat langsung dibawah ini.Ohh,saya ingatkan sebelum mencoba widget ini,ada baiknya membackup/download template kamu agar tidak terjadi sesuatu yang diinginkan.


DEMO :


Untuk memasang menu seperti diatas,pertama login ke account blogger kamu,lalu pilih menu template,pilih edit html, lalu copy-paste CSS dibawah ini tepat diatas kode ]]></b:skin>

CSS
#menujohanes{
width: 100%; /* panjang menu */
margin: auto; /* posisi menu auto */
background: #fafafa; /* warna background */
height: 49px; /*tinggi menu*/
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border: 1px solid #ddd;
text-transform: uppercase; /* Huruf besar */
box-shadow: 0px 3px 0px rgba(0,0,0,0.2);
z-index: 99;}
#menujohanes ul{
list-style-type: none;
z-index: 9;
width: 1000px; /* panjang menu */
margin: auto;}
#menujohanes ul li{
float: left;
position: relative;
padding: 12px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
#menujohanes ul li:hover{
background:#557FFF; /* warna background ketika diarahkan*/
box-shadow: 0px 3px 0px rgba(0,0,0,0.2);}
#menujohanes ul li a:hover {
color:#fafafa;} /* warna text ketika diarahkan */
#menujohanes ul li a{
color: #666; /* warna text */
padding: 0 10px;
line-height:25px;
font-size:11px; /* ukuran text */
display:block;
text-decoration:none;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-shadow: 0px 2px 0px rgba(0,0,0,0.1);}
#menujohanes ul li ul li{float: none;position: relative;}
#menujohanes ul li ul{
position: absolute;
top:49px;
left:0;
display: none;
box-shadow: inset 0 4px 3px rgba(0, 0, 0, 0.3), 0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);
width:150px;
border-radius: 0px 0px 5px 5px;
background: #fff;}
#menujohanes ul li:hover > ul{display: block;}
#menujohanes ul li ul li a{line-height:25px;}
#menujohanes ul li ul li ul{
position: absolute;
top:0; left:150px;
display: none;
box-shadow:0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);
border-radius:5px;
width:150px;
background: #fff;}
#menujohanes ul li.selected{color: #000;border-left: 1px solid #ddd;border-right: 1px solid #ddd;}


Selanjutnya,copy-paste HTML dibawah ini diantara kode <body>...</body> tergantung anda ingin meletakan posisi menu ini.

HTML
<div id="menujohanes">
<ul>
<li class='selected'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href="#">Download</a>
<ul>
<li><a href="#">Naruto</a>
<ul>
<li><a href="#">Episode 1</a></li>
<li><a href="#">Episode 2</a></li>
<li><a href="#">Episode 3</a></li>
</ul>
</li>
<li><a href="#">Date A Live</a>
<ul>
<li><a href="#">Episode 1</a></li>
<li><a href="#">Episode 2</a></li>
<li><a href="#">Episode 3</a></li>
</ul>
</li>
<li><a href="#">Devil Survivor2</a>
<ul>
<li><a href="#">Episode 1</a></li>
<li><a href="#">Episode 2</a></li>
<li><a href="#">Episode 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">Google plus</a></li>
</ul>
</li>
<li><a href="#">Multi sub</a>
<ul>
<li><a href="#">Episode 1</a>
<ul>
<li><a href="#">Episode 2</a>
<ul>
<li><a href="#">Episode 3</a></li>
<li><a href="#">Episode 4</a></li>
</ul>
</li>
<li><a href="#">Episode 5</a></li>
</ul>
</li>
<li><a href="#">Episode 6</a></li>
<li><a href="#">Episode 7</a></li>
</ul>
</li>
<li><a href="#">Clients</a></li>
<li><a href="#">Email</a></li>
</ul></div>

*Ganti tanda pagar dengan url link,dan namae link'a

Setelah selesai, simpan,dan lihat hasinya.jika sudah berhasil,tahap selanjutnya adalah mengatur isi menu dan link url pada menu anda.


Setting HTML

1. Normal menu.

<li><a href="#">Anime</a></li&gt
;


2. Drop down menu.

<li><a href="#">Download</a>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</li>


3. Sub menu.

<li><a href="#">Download</a>
<ul>
<li><a href="#">Naruto</a>
<ul>
<li><a href="#">Episode 1</a></li>
<li><a href="#">Episode 2</a></li>
<li><a href="#">Episode 3</a></li>
</ul>
</li>
</ul>
</li>

4. Multi Sub menu.

<li><a href="#">Download</a>
<ul>
<li><a href="#">Naruto</a><ul>
<li><a href="#">Anime</a><ul>
<li><a href="#">Episode 2</a></li>
<li><a href="#">Episode 3</a></li>
</ul>
</li>
<li><a href="#">Episode 2</a></li>
<li><a href="#">Episode 3</a></li>
</ul>
</li>
</ul>
</li>






Selamat mencoba dan semoga bermanfaat,terima kasih.
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

MATERI SENI BUDAYA KELAS XII SEMESTER 1 "SENI RUPA 2D"

Setelah mempelajari Bab 1 ini kamu diharapkan dapat mengapresiasi dan berkreasi seni rupa sebagai berikut: 1.         Mengidentifikasi jenis, simbol, fungsi, dan nilai estetis dalam karya seni rupa dua dimensi. 2.        Mengidentifikasi bahan, media, dan teknik dalam proses berkarya seni rupa dua dimensi. 3.        Membandingkan jenis, simbol, fungsi, dan nilai estetis teknik dalam karya seni rupa dua dimensi. 4.        Membandingkan bahan, media, dan teknik dalam proses berkarya seni rupa dua dimensi. 5.        Memilih bahan, media, jenis, simbol, fungsi, nilai estetis dan teknik dalam proses berkarya seni rupa dua dimensi. 6.        Membuat karya seni rupa dua dimensi.   Di kelas X dan XI kamu sudah mempelajari berbagai jenis karya seni rupa dua dimensi. Karya-karya tersebut ada yang memiliki fungsi pakai dan ada yang memiliki fungsi hias saja. Masih ingatkah kamu perbedaan karya seni rupa terapan dan seni rupa murni? Cobalah perhatikan benda-benda disekitar kamu, dapatkah kamu
Posting Komentar
Baca selengkapnya

Seni Lukis Cirebon

Geliat Seni Lukisan Kaca Di Cirebon Seni Lukis Kaca Di Wilayah Cirebon My World Seni Lukis Kaca Di Wilayah Cirebon My World Kesenian Kebudayaan Cirebon Seni Lukis Kaca Cirebon Yang Lukisan Kaca Warisan Asli Budaya Cirebon Seni Lukis Kaca Di Wilayah Cirebon My World Teknik Serta Makna Lukisan Kaca Cirebon Direktorat Warisan Dan Seni Lukis Kaca Cirebon Yang Memiliki Nilai Sejarah Tinggi Cirebon Cemerlang Lukisan Kaca Cirebon Bagaimana Sejarah Lukisan Kaca Cirebon Seni Rupa Dictio Community Seni Lukis Kaca Di Wilayah Cirebon My World Membuat Lukisan Kaca Khas Cirebon Ukm Serufo Uny Lukisan Kaca Cirebon Wikipedia Bahasa Indonesia Ensiklopedia Bebas Bung Pata Terus Melestarikan Lukisan Kaca Cirebon Radarcire
Posting Komentar
Baca selengkapnya

Gambar Seni Patung Bali

Seni Pemahatan Patung Bali Hindu Indonesia Gambar Monumen Patung Seni Candi Indonesia Fitur Air Bali Gambar Manusia Monumen Seni Candi Bali Mitologi Patung Inilah 5 Patung Ikonik Di Badung Versi Tribun Bali Tribun Bali Nilai Ekspor Patung Bali April 2018 Capai Rp 66 Miliar Bisnis Seni Ukir Patung Di Gianyar Bali Patung Bambu Bali Berukuran Raksasa Ini Tarik Perhatian Turis Gambar Monumen Asia Patung Gargoyle Seni Naga Budaya Tidak Seperti Nasib Getah Getih Ini Deretan Instalasi Bambu Gallery Karya Seni Bali Wisata Seni Ukir Batu Batubulan Gianyar Hard Rock Fm Patung Patung Unik Di Bali Halaman All Kompasiana Com Tuliskan 2 Contoh Karya Seni Rupa Yang Berasal Dari Bali Brainly Gambar Monumen Patung Pariw
Posting Komentar
Baca selengkapnya