Jquery And CSS3 Menu Bar - Postingan kali ini masih seputar tutorial dalam membuat sebuah menu blog untuk blogger . Pada beberapa waktu yang lalu [OBC] share tentang menu Cool CSS3 Navigation Menu dengan CSS3 . Kali ini menu yang dishare Jquery And CSS3 Menu Bar yang masih menggunakan CSS3 tapi ada penambahan kode Jquery didalamnya . Untuk lebih jelasnya silahkan brada lihat demonya dibawah ini .
Komponen Menu
Kode Jquery<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">CSS3
</script>
<script type="text/javascript">
$(function() {
//We initially hide the all dropdown menus
$('#dropdown_nav li').find('.sub_nav').hide();
//When hovering over the main nav link we find the dropdown menu to the corresponding link.
$('#dropdown_nav li').hover(function() {
//Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.
$(this).find('.sub_nav').fadeIn(100);
}
, function() {
//Do the same again, only fadeOut this time.
$(this).find('.sub_nav').fadeOut(50);
} )});
</script>
<style>HTML
#dropdown_nav a {
font-family:Arial, Sans-Serif;
font-size:15px;
font-weight:bold;
color:#525252;
text-decoration:none;
}
#dropdown_nav {
width:960px;
padding:0px;
display:inline-block;
list-style:none;
-moz-box-shadow:inset 0px 0px 1px #fff;
-webkit-box-shadow:inset 0px 0px 1px #fff;
border:1px solid #ccc;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:#e2e2e2;
background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
}
#dropdown_nav li {
padding:10px 0px 10px 0px;
float:left;
position:relative;
display:inline-block;
}
#dropdown_nav li a {
padding:10px 15px 10px 15px;
text-shadow:-1px 1px 0px #f6f6f6;
-moz-box-shadow:inset 0px 0px 1px #fff;
-webkit-box-shadow:inset 0px 0px 1px #fff;
border-right:1px solid #ccc;
}
#dropdown_nav li a:hover {
background:#f9f9f9;
background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
}
#dropdown_nav li a:active {
background:#e2e2e2;
background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
}
#dropdown_nav li a.first {
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-radius:5px 0px 0px 5px;
}
/*#dropdown_nav li a.last {
-moz-border-radius:0px 5px 5px 0px;
-webkit-border-radius:0px 5px 5px 0px;
}
*/
/* Sub-Nav styling */
#dropdown_nav .sub_nav {
width:160px;
padding:0px;
position:absolute;
top:38px;
left:0px;
border:1px solid #ccc;
background:#e2e2e2;
}
#dropdown_nav .sub_nav li {
width:160px;
padding:0px;
}
#dropdown_nav .sub_nav li a {
display:block;
border-bottom:1px solid #ccc;
background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
}
#dropdown_nav .sub_nav li a:hover {
background:#f9f9f9;
background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
}
#dropdown_nav .sub_nav li a:active {
background:#e2e2e2;
background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
}
</style>
<!-- Navigation Start -->
<ul id="dropdown_nav">
<li><a class="first" href="http://duniaradioku.blogspot.com/">Home</a></li>
<li><a href="#">Categories</a>
<ul class="sub_nav">
<li><a href="#">Categories</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Categories</a></li>
</ul>
</li>
<li><a href="#">Exchange</a>
<ul class="sub_nav">
<li><a href="#">Exchange</a></li>
<li><a href="#">Exchange</a></li>
<li><a href="#">Exchange</a></li>
<li><a href="#">Exchange</a></li>
</ul>
</li>
<li><a href="#">Freebies</a>
</li>
<li><a class="last" href="#">Other Stuff</a>
<ul class="sub_nav">
<li><a href="#">Other Stuff </a></li>
<li><a href="#">Other Stuff </a></li>
<li><a href="#">Other Stuff </a></li>
<li><a href="#">Other Stuff </a></li>
</ul>
</li>
</ul>
Kustomisasi :
Untuk mempermudah dalam pemasangannya brada gabungkan ketiga kompenen menunya sehingga menjadi seperti ini
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
//We initially hide the all dropdown menus
$('#dropdown_nav li').find('.sub_nav').hide();
//When hovering over the main nav link we find the dropdown menu to the corresponding link.
$('#dropdown_nav li').hover(function() {
//Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.
$(this).find('.sub_nav').fadeIn(100);
}
, function() {
//Do the same again, only fadeOut this time.
$(this).find('.sub_nav').fadeOut(50);
}
);
}
);
</script>
<style>
#dropdown_nav a {
font-family:Arial, Sans-Serif;
font-size:15px;
font-weight:bold;
color:#525252;
text-decoration:none;
}
#dropdown_nav {
width:960px;
padding:0px;
display:inline-block;
list-style:none;
-moz-box-shadow:inset 0px 0px 1px #fff;
-webkit-box-shadow:inset 0px 0px 1px #fff;
border:1px solid #ccc;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:#e2e2e2;
background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
}
#dropdown_nav li {
padding:10px 0px 10px 0px;
float:left;
position:relative;
display:inline-block;
}
#dropdown_nav li a {
padding:10px 15px 10px 15px;
text-shadow:-1px 1px 0px #f6f6f6;
-moz-box-shadow:inset 0px 0px 1px #fff;
-webkit-box-shadow:inset 0px 0px 1px #fff;
border-right:1px solid #ccc;
}
#dropdown_nav li a:hover {
background:#f9f9f9;
background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
}
#dropdown_nav li a:active {
background:#e2e2e2;
background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
}
#dropdown_nav li a.first {
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-radius:5px 0px 0px 5px;
}
/*#dropdown_nav li a.last {
-moz-border-radius:0px 5px 5px 0px;
-webkit-border-radius:0px 5px 5px 0px;
}
*/
/* Sub-Nav styling */
#dropdown_nav .sub_nav {
width:160px;
padding:0px;
position:absolute;
top:38px;
left:0px;
border:1px solid #ccc;
background:#e2e2e2;
}
#dropdown_nav .sub_nav li {
width:160px;
padding:0px;
}
#dropdown_nav .sub_nav li a {
display:block;
border-bottom:1px solid #ccc;
background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
}
#dropdown_nav .sub_nav li a:hover {
background:#f9f9f9;
background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
}
#dropdown_nav .sub_nav li a:active {
background:#e2e2e2;
background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
}
</style>
<!-- Navigation Start -->
<ul id="dropdown_nav">
<li><a class="first" href="http://duniaradioku.blogspot.com/">Home</a></li>
<li><a href="#">Categories</a>
<ul class="sub_nav">
<li><a href="#">Categories</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Categories</a></li>
</ul>
</li>
<li><a href="#">Exchange</a>
<ul class="sub_nav">
<li><a href="#">Exchange</a></li>
<li><a href="#">Exchange</a></li>
<li><a href="#">Exchange</a></li>
<li><a href="#">Exchange</a></li>
</ul>
</li>
<li><a href="#">Freebies</a>
</li>
<li><a class="last" href="#">Other Stuff</a>
<ul class="sub_nav">
<li><a href="#">Other Stuff </a></li>
<li><a href="#">Other Stuff</a></li>
<li><a href="#">Other Stuff </a></li>
<li><a href="#">Other Stuff </a></li>
</ul>
</li>
</ul>
- Klik Tataletak
- Add Gadget / HTML Javascript
- Masukan kode diatas
- Save dan lihat hasilnya
Catatan :
Kalau pada template brada sudah terpasang kode Jquery hilangkan kode dibawah ini .
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
"#" Ganti dengan link sobat
Good Luck ...!!!
Source : Bloggeryard
Good Luck ...!!!
Source : Bloggeryard
Ngiring nongkrong ah.. bari ngadon ngopi :)
BalasHapusWalah aya tamu agung yeuhhh
HapusMangga kang .. sakantenan ieu aya goreng cau hehe
ngiluaan ach ngopi jeung aya goreng cau deuih euyy
Hapussok atuh kang beleum sampena kadiekeun ....hha
Hapuskeren banget kang Ruly artikel Jquery And CSS3 Menu Barnya, makasih udah share ijin save yah :)
BalasHapusiya sob ..sama-sama
Hapusmantap mantap.. keknya ada di situs luar
BalasHapusiya sob .. itu ada di info sourcenya
Hapusoo iyo dihh kecil nya tulisannya sampe" sy nda lihat tadi
Hapuskalau ada yang bagus bagus jadi pengen masang jadinya... suruput kopi hola ah
BalasHapusmangga Mang langsung disuruput waelah ,,,
Hapussilahkan pasang mang ... mumpung gratis wkwkwkwk
HapusParantos aya nu enggal deui pemirsa sadaya,mangga bilih hoyong nyobian Tutor nu pang enggalna sumpingan waee blogna Kang Ruli anu pangkasepna sa Cianjur kidul heuheu
BalasHapuspromosi kang .. piraku geulis atuh hehe
Hapuswaw kodenya banyak banget.
BalasHapusthx ^_^
it kalau dipisahkan sob .. tapi cukup ringan ko
Hapusudah lama pisan saya teh ngga ngutak ngatik jeroan blog, pengen mah pengen...tapinya bakal jlimet dan butuh waktu nyantai euy.
BalasHapusudah diklik demonya...keren banget tuh...cuman lodingnya bakal berat ngga yah?
ya kalau ada waktu aja sob...
Hapuslumayan ringan
wahhhhh mantap,,,,,,,
BalasHapustadinamah rek make link aktif tapi sieun Ko'OD euyyyy wkwkkwkkwkkw
kO'oD teh naon kang hehe
Hapusaduhh.. kodenya banyak sekali,, kepala saya pusing gan :D
BalasHapusjangan dibikn pusing sob .. toh tinggal masukin doang ko !!!...
HapusPengen ini penhen itu semua dipasang jd berat gak ya? Nice tar utik2 kalo dah luang
BalasHapusringan -ringan aja ko ...
Hapusngronda tengah malam sambil baca2 artikel tutorialnya Kang Ruly hehehe..
BalasHapusMet mlm kang, maaf baru bisa hadir lagi ... :)
mantap pisan atuh kang menunya top markotop ajip ajipp..
BalasHapus