Akhirnya bisa update lagi,mohon maaf karena sekarang saya agak lama update,karena sekarang saya sibuk mengerjakan tugas-tugas sekolah and hari senin besok saya akan melaksanakan
UAS (Ujian Akhir Semester).di postingan ini sekalian saya ingin meminta ijin karena mungkin untuk 2 minggu kedepan saya tidak akan blogging. loh kok jadi curhat ya,...?? ok langsung saja cekedot
Inilah Screenshotnya :
Kali ini saya akan share
cara membuat style menu navigasi dropdown ala cunayz.mungkin ada dua style yang sering menu navigation yang populer digunakan oleh para Blogger, yaitu efek Fading dan Sliding Di postingan ini saya akan share dua efek yang sederhana namun tetap satu jenis silahkan sobat tinggal pilih saja efek yang mana yang paling bagus menurut sobat.
View DemoLangkah pertama : harus sobat lakukan adalah menentukan penempatan menu navigasi ini (misalnya di atas atau di bawah header),
Salin kode berikut dan letakan ditempat sobat ingin meletakan menu navigasi ini
:
<div class='cunayzmenu'>
<ul>
<li><a href='#'>HOME</a></li>
<li><a href='#'>GUEST BOOK</a>
<ul>
<li><a href='#'>Satu</a></li>
<li><a href='#'>Dua</a></li>
<li><a href='#'>Tiga</a></li>
<li><a href='#'>Empat</a></li>
<li><a href='#'>Lima</a></li>
</ul>
</li>
<li><a href='#'>TOOLS BLOG</a>
<ul>
<li><a href='#'>Satu</a></li>
<li><a href='#'>Dua</a></li>
<li><a href='#'>Tiga</a></li>
<li><a href='#'>Empat</a></li>
<li><a href='#'>Lima</a></li>
</ul>
</li>
<li><a href='#'>KONTAK</a>
<ul>
<li><a href='#'>Satu</a></li>
<li><a href='#'>Dua</a></li>
<li><a href='#'>Tiga</a></li>
<li><a href='#'>Empat</a></li>
<li><a href='#'>Lima</a></li>
</ul>
</li>
</ul>
</div>
Langkah Kedua : Letakan CSS dibawah ini,kemudian letakan di atas kode
]]</b:skin> atau
</style>:
.cunayzmenu{font:normal 12px "Times New Roman", Times, serif;line-height:normal;text-transform:uppercase;margin:5px 0;padding:0 0;color:#fff;text-decoration:none;}
.cunayzmenu ul{float:left;height:34px;line-height:34px;background-color:#333;margin:0 0 10px;padding:0 0;border:2px solid #e6e6e6;box-shadow:0 1px 5px #000;-moz-box-shadow:0 1px 5px #000;-webkit-box-shadow:0 1px 5px #000;}
.cunayzmenu li{list-style-type:none;margin:0 0;padding:0 0;color:#fff;float:left;display:inline;}
.cunayzmenu li a{line-height:14px;background-color:#333;border-left:1px solid #444;border-right:1px solid #222;margin:0 0;padding:10px 15px;color:#fff;text-decoration:none;font-weight:bold;vertical-align:top;text-shadow:1px 1px 2px #000;outline:none;display:block;}
.cunayzmenu li ul{position:absolute;z-index:10;left:auto;height:auto;margin:0 0;padding:0 0;width:200px;box-shadow:0 1px 5px #000;-moz-box-shadow:0 1px 5px #000;-webkit-box-shadow:0 1px 5px #000;display:none;}
.cunayzmenu li ul li a{border-left-width:0;border-right-width:0;border-top:1px solid #444;border-bottom:1px solid #222;width:170px;display:block;}
.cunayzmenu li a:focus{background-color:#666;border-left-color:#777;border-right-color:#555;}
.cunayzmenu ul li a:focus{background-color:#666;border-top-color:#777;border-bottom-color:#555;}
.cunayzmenu li a:hover, .cunayzmenu ul li a:hover{color:#ccc;}
Langkah Terakhir : Nah sekarang sobat tinggal memilih efek mana yang paling cocok untuk sobat (pilih salah satu) :
Untuk efek SlideDown - SlideUp salin kode berikut dan letakan diatas kode </head> : <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function () {
$('.cunayzmenu ul li').hover(
function () {
$('ul', this).stop(true, true).slideDown(500);},
function () {
$('ul', this).stop(true, true).slideUp(250);});
});
</script>
Untuk efek Fadeln - FadeOut salin kode berikut dan letakan diatas kode </head> : <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function () {
$('.cunayzmenu ul li').hover(
function () {
$('ul', this).stop(true, true).fadeIn(600);},
function () {
$('ul', this).stop(true, true).fadeOut(200);});
});
</script>
Khusus untuk kode yang Saya beri warna
merah, jika sudah ada tidak perlu ditambahkan.Sekarang klik
Pratinjau. Jika sudah puas dengan hasilnya, simpan
templatemu.
Print
PDF
Blogger
Google+
Facebook
Twitter