Cara Membuat Menu Cantik Dengan Jquery | Ketika mendesain sebuuah website, kita tidak akan pernah lepas dari yang namanya menu, karena dari menu atau navigasi ini yang membuat website kita menjadi semakin kaya akan fitur dan juga lebih interaktif dengan pengunjung website.
Berikut ini kita akan bahas cara Cara Membuat Menu Cantik Dengan Jquery, sebenarnya kita bisa saja membuat menu navigasi sederhana, yang hanya menampilkan kata lalu diberikan link di dalamnya, tapi kita akan mencoba yang lebih baik, tentu saja akan lebih indah juga.
Oke, langsung saja kita mulai, pertama kita buat file php di localhost, jika belum faham silahkah dipelajari dulu tutorial singkat Cara Membuat File PHP di Localhost bisa dilihat Disini
Ketikkan script dibawah ini
<html>
<head>
<title>Menu</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu-vertical li, #menu-horizontal li").has("ul").addClass("parent");
$("#menu-vertical li, #menu-horizontal li").hover(function(e){
e.preventDefault();
$(this).find("ul:first").slideToggle();
});
});
</script>
<style>
html, body, div, ul, li {
border: 0;
margin: 0;
padding: 0;
font-family:arial;
vertical-align:baseline;
}
#container{
width:1000px;
margin:0 auto !important;
}
#menu-vertical{
display:block;
float:left;
left:0;
font-size:12px;
margin:0;
}
#menu-vertical ul{
list-style: none;
margin: 0;
}
#menu-vertical li {
position:relative;
float:left;
background-color:#1026fc;
border-right: 1px solid rgba(30, 30, 30, 0.125);
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}
#menu-vertical ul li.parent {
background:#1026fc url(down.png) no-repeat center bottom;
}
#menu-vertical ul ul li.parent {
background:#1026fc url(right.png) no-repeat center;
display:inline;
}
#menu-vertical li:hover, #menu-vertical li > ul li{
background-color:#b50613 !important;
}
#menu-vertical li > ul li:hover, #menu-vertical li > ul li:hover > ul li {
background-color:1026fc !important;
}
#menu-vertical li > ul li:hover > ul li:hover{
background-color:#b50613 !important;
}
#menu-vertical a{
color: #fff;
display: block;
line-height: 35px;
padding: 0 10px;
text-decoration: none;
vertical-align:baseline;
left:0;
}
#menu-vertical ul ul{
display: none;
position: absolute;
top: 35px;
left: 0;
float: left;
min-width: 180px;
background-color:#1026fc;
z-index:1;
}
#menu-vertical ul ul a{
line-height: 0.7em;
padding: 10px;
width: 180px;
height: auto;
}
#menu-vertical ul ul li{
min-width: 180px;
}
#menu-vertical ul ul ul{
left: 100%;
top: 0;
}
/* HORIZONTAL */
#menu-horizontal {
display:block;
float:left;
left:0;
font-size:12px;
margin:0;
background-color:#1026fc;
}
#menu-horizontal ul{
list-style: none;
margin: 0;
}
#menu-horizontal li {
position:relative;
border-bottom: 1px solid rgba(30, 30, 30, 0.125);
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
background-color:#1026fc;
}
#menu-horizontal a{
color: #fff;
display: block;
line-height: 30px;
padding: 0 10px;
text-decoration: none;
}
#menu-horizontal ul ul{
display: none;
position: absolute;
min-width: 180px;
background-color:#1026fc;
left:100%;
float:left;
top:0;
z-index:1;
}
#menu-horizontal ul ul a{
width: 180px;
line-height: 30px;
}
#menu-horizontal ul ul li{
min-width: 180px;
}
#menu-horizontal ul ul ul{
left:100%;
top:0;
}
#menu-horizontal ul li.parent {
background:#1026fc url(right.png) no-repeat center right;
padding:0 10px 0 0;
}
#menu-horizontal li:hover, #menu-horizontal li > ul li{
background-color:#b50613 !important;
}
#menu-horizontal > ul li:hover, #menu-horizontal li > ul li:hover > ul li {
background-color:#1026fc !important;
}
#menu-horizontal li > ul li:hover > ul li:hover{
background-color:#b50613 !important;
}
</style>
</head>
<body>
<div id="container">
<br>
<h4 style="margin-bottom:5px;">Vertikal</h3>
<div id="menu-vertical">
<ul>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a>
<ul>
<li><a href="">Sub Menu 2.0</a></li>
<li><a href="">Sub Menu 2.1</a></li>
<li><a href="">Sub Menu 2.2</a></li>
<li><a href="">Sub Menu 2.3</a></li>
</ul>
</li>
<li><a href="">Menu 3</a>
<ul>
<li><a href="">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="">Menu 4</a></li>
<li><a href="">Menu 5</a>
<ul>
<li><a href="">Sub Menu 5.0</a>
<ul>
<li><a href="">Sub Menu Sub Menu 5.0.1</a></li>
<li><a href="">Sub Menu Sub Menu 5.0.2</a></li>
</ul>
</li>
<li><a href="">Sub Menu 5.1</a></li>
</ul>
</li>
<li><a href="">Menu 6</a></li>
</ul>
</div>
<br clear="all"/>
<h4 style="margin-bottom:5px;">Horizontal</h3>
<div id="menu-horizontal">
<ul>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a>
<ul>
<li><a href="">Sub Menu 2.0</a></li>
<li><a href="">Sub Menu 2.1</a></li>
<li><a href="">Sub Menu 2.2</a></li>
<li><a href="">Sub Menu 2.3</a></li>
</ul>
</li>
<li><a href="">Menu 3</a>
<ul>
<li><a href="">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="">Menu 4</a></li>
<li><a href="">Menu 5</a>
<ul>
<li><a href="">Sub Menu 5.0</a>
<ul>
<li><a href="">Sub Menu Sub Menu 5.0.1</a></li>
<li><a href="">Sub Menu Sub Menu 5.0.2</a></li>
</ul>
</li>
<li><a href="">Sub Menu 5.1</a></li>
</ul>
</li>
<li><a href="">Menu 6</a></li>
</ul>
</div>
</div>
</body>
</html>
Kemudian simpan dengan nama index.html
selanjutnya download gambar kecil yang akan digunakan sebagai penanda sub menu, gambar bisa di download Disini lalu extrak ke dalam satu folder dengan file index.html tadi
Selanjutnya kita buat file jquery, lihat script jquerynya Disini, Copy semua lalu paste di text editor anda dan simpan dengan nama jquery.min.js letakkan juga ke dalam satu folder dengan file index.html
kalau sudah semua silahkan klik dua kali file index.html kalau scriptnya tidak ada yang salah kurang lebih tampilannya bisa dilihat Disini.
Dan Source Code lengkapnya bisa langsung di Download Disini
Demikian Tutorial singkatnya. Semoga bermanfaat.
0 Response to "Cara Membuat Menu Cantik Dengan Jquery"
Post a Comment