✔ Cara Menciptakan Hidangan Droup Down Dengan Css
Cara Membuat Menu Droup Down Dengan CSS Kali ini akan Mencoba Membuat Menu Droup Down Dengan CSS, Siapa tau sobat lagi muter muter bersama Om
2. Untuk menciptakan caranya gampang tinggal pilih Rancangan >> Edit HTML
3. Lalu cari kode ]]></b:skin> dan copykan isyarat CSS dibawah ini diatas nya.
nav{font:bold 16px Calibri,Arial,Sans-Serif}
nav *{margin:0 0 0 0; padding:0 0 0 0; list-style:none}
nav ul{background:#0A8603; background:-webkit-linear-gradient(top,#0A8603,#1F6A1C); background:-moz-linear-gradient(top,#0A8603,#1F6A1C); background:-ms-linear-gradient(top,#0A8603,#1F6A1C); background:-o-linear-gradient(top,#0A8603,#1F6A1C); background:linear-gradient(top,#0A8603,#1F6A1C); height:40px; -webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4)}
nav li{float:left; display:inline}
nav li a{padding:0px 15px; line-height:40px; color:#111; text-shadow:0px 1px 0px rgba(255,255,255,0.3); display:block; text-decoration:none; -webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1)}
nav li a:hover{background:rgba(0,0,0,0.1)}
nav li a:active{background:#0A8603; background:-webkit-linear-gradient(bottom,#0A8603,#1F6A1C); background:-moz-linear-gradient(bottom,#0A8603,#1F6A1C); background:-ms-linear-gradient(bottom,#0A8603,#1F6A1C); background:-o-linear-gradient(bottom,#0A8603,#1F6A1C); background:linear-gradient(bottom,#0A8603,#1F6A1C)}
nav li ul{display:block; width:170px; position:absolute; left:auto; z-index:10; height:auto; visibility:hidden; opacity:0; -webkit-transition:all 0.26s ease-out 0.2s; -moz-transition:all 0.26s ease-out 0.2s; -ms-transition:all 0.26s ease-out 0.2s; -o-transition:all 0.26s ease-out 0.2s; transition:all 0.26s ease-out 0.2s}
nav li li{display:block; float:none; width:100%}
nav li:hover &amp;amp;amp;gt;ul{visibility:visible; width:200px; opacity:1}
nav li li ul{left:200px; margin-top:-40px}
nav li.sub &amp;amp;amp;gt;a{position:relative; padding-right:30px}
nav *{margin:0 0 0 0; padding:0 0 0 0; list-style:none}
nav ul{background:#0A8603; background:-webkit-linear-gradient(top,#0A8603,#1F6A1C); background:-moz-linear-gradient(top,#0A8603,#1F6A1C); background:-ms-linear-gradient(top,#0A8603,#1F6A1C); background:-o-linear-gradient(top,#0A8603,#1F6A1C); background:linear-gradient(top,#0A8603,#1F6A1C); height:40px; -webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4)}
nav li{float:left; display:inline}
nav li a{padding:0px 15px; line-height:40px; color:#111; text-shadow:0px 1px 0px rgba(255,255,255,0.3); display:block; text-decoration:none; -webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1)}
nav li a:hover{background:rgba(0,0,0,0.1)}
nav li a:active{background:#0A8603; background:-webkit-linear-gradient(bottom,#0A8603,#1F6A1C); background:-moz-linear-gradient(bottom,#0A8603,#1F6A1C); background:-ms-linear-gradient(bottom,#0A8603,#1F6A1C); background:-o-linear-gradient(bottom,#0A8603,#1F6A1C); background:linear-gradient(bottom,#0A8603,#1F6A1C)}
nav li ul{display:block; width:170px; position:absolute; left:auto; z-index:10; height:auto; visibility:hidden; opacity:0; -webkit-transition:all 0.26s ease-out 0.2s; -moz-transition:all 0.26s ease-out 0.2s; -ms-transition:all 0.26s ease-out 0.2s; -o-transition:all 0.26s ease-out 0.2s; transition:all 0.26s ease-out 0.2s}
nav li li{display:block; float:none; width:100%}
nav li:hover &amp;amp;amp;gt;ul{visibility:visible; width:200px; opacity:1}
nav li li ul{left:200px; margin-top:-40px}
nav li.sub &amp;amp;amp;gt;a{position:relative; padding-right:30px}
4. Lalu Klik Pratinjau Kalau sudah tidak ada dilema lagi Tinggal Simpan Tempelats
5. Buka Tata Letak kemudian Tambah Gadget Pilih HTML JAVAScript dan masukan Scrip dibawah ini
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li class="sub"><a href="#">Jurnal</a>
<ul>
<li><a href="#">2000</a></li>
<li><a href="#">2001</a></li>
<li class="sub"><a href="#">2002</a>
<ul>
<li><a href="#">21 April</a></li>
<li><a href="#">22 April</a></li>
<li class="sub"><a href="#">23 April</a>
<ul>
<li><a href="#">Senin</a></li>
<li><a href="#">Selasa</a></li>
<li><a href="#">Rabu</a></li>
<li><a href="#">Kamis</a></li>
</ul>
</li>
<li><a href="#">24 April</a></li>
<li><a href="#">25 April</a></li>
</ul>
</li>
<li><a href="#">2003</a></li>
<li><a href="#">2004</a></li>
</ul>
</li>
<li><a href="#">Komentar</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
NB: Bisa juga dipasang code ini di antara header dan conten-wrapper atau di taruh di bawah header,atau </head> ya sesuakain saja di mana harusnya ini di letakan..Sekian Semoga bermanfaat
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li class="sub"><a href="#">Jurnal</a>
<ul>
<li><a href="#">2000</a></li>
<li><a href="#">2001</a></li>
<li class="sub"><a href="#">2002</a>
<ul>
<li><a href="#">21 April</a></li>
<li><a href="#">22 April</a></li>
<li class="sub"><a href="#">23 April</a>
<ul>
<li><a href="#">Senin</a></li>
<li><a href="#">Selasa</a></li>
<li><a href="#">Rabu</a></li>
<li><a href="#">Kamis</a></li>
</ul>
</li>
<li><a href="#">24 April</a></li>
<li><a href="#">25 April</a></li>
</ul>
</li>
<li><a href="#">2003</a></li>
<li><a href="#">2004</a></li>
</ul>
</li>
<li><a href="#">Komentar</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
Belum ada Komentar untuk "✔ Cara Menciptakan Hidangan Droup Down Dengan Css"
Posting Komentar