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

Karya Seni Patung Gregorius Sidharta

Homage G Sidharta Soegijo Dalam Seni Rupa Indonesia 11 12 09 Gregorius Sidharta G Sidharta Tokoh Seniman Patung Indonesia G Sidharta The Concept Homage G Sidharta Soegijo Dalam Seni Rupa Indonesia Pengawal Batas Indonesian Visual Art Archive Karya Karya G Sidharta Homage Artdig Gregorius Sidharta Soegijo Homegallery Posts Facebook Indonesian Visual Art Archive Karya Karya G Sidharta Gregorius Sidharta Ilmuseni Com Homage G Sidharta Soegijo Dalam Seni Rupa Indonesia 11 12 09 Gregorius Sidharta Soegijo Homegallery Posts Facebook Karya Seni Pembentuk Identitas Negara Indonesian Visual Art Archive Karya Karya G Sidharta Sejarah Awal Dan Perkembangan Seni Patung Di Indonesia Lukisan Berma...
Posting Komentar
Baca selengkapnya

Seni Lukis Impresionisme

Impresionisme Pengertian Ciri Tokoh Contoh Karya Analisis Apa Yang Dimaksud Dengan Aliran Impresionisme Seni Rupa Apa Itu Impresionisme Sejarah Seni Lukis Impresionisme Dunia Lukisan Javadesindo Art Gallery Sejarah Aliran Seni Apa Yang Dimaksud Dengan Aliran Impresionisme Seni Rupa Seni Rupa Impresionisme Dan Ciri Ciri Lukisannya Bilik Seni Impresionisme Pengertian Ciri Tokoh Contoh Karya Analisis Aliran Seni Lukis Impresionisme Thegorbalsla Siapa Saja Tokoh Seni Lukis Aliran Impresionisme Seni Rupa Impresionis Aliran Yang Awalnya Tertolak Kompasiana Com Impresionisme Definition And Synonyms Of Impresionisme In The Media Pembelajaran Lukisan Impresionisme Impressionism Mengapresiasi Lukisan Impresionisme Karya Leonid Afrem...
Posting Komentar
Baca selengkapnya

Seni Lukis Patung

Cabang Cabang Seni Rupa Seni Patung Sening Lukis Seni Grafis Dk Blog Contoh Karya Seni Lukis Patung Beserta Apresiasinya Seni Rupa Murni Nusantara Dan Mancanegara Art Lesson In Smp Seni Patung Beserta Pengertian Fungsi Teknik Contohnya Seni Budaya Sejarah Perkembangan Seni Rupa Lukisan Patung Liberty Berjilbab Tuai Kontroversi Dream Co Id Apa Itu Seni Patung Tambah Wawasanmu Tentang Dunia Seni Di Sini Di Balik Senyap Tampilkan Karya Seni Patung Dan Lukisan Bagaimana Sejarah Seni Rupa Yunani Kuno Seni Rupa Dictio Pengertian Dan Contoh Seni Rupa Murni Genggam Internet Dk Blog Contoh Karya Seni Lukis Patung Beserta Apresiasinya Pameran Seni Lukis Fotografi Dan Patung Hadir Selama Sepekan Di Gambar Wanita Monumen Patung Kesedi...
Posting Komentar
Baca selengkapnya