Membuat Menu dengan CSS dan jQuery

Menu. Apa itu menu? menu adalah sebuah pilihan yang menampilkan beberapa pilihan umum atau khusus dengan tujuan menampilkan, menyediakan untuk mempermudah pemilihan suatu makanan dan minuman [ala restoran sih gitu]. Bener kan? Hahaha

Bukan menu makanan maksudnya disini, hihi tapi menu ala web atau blog yang disajikan untuk mempermudah pengunjung dalam menentukan suatu kategori atau menemukan informasi yang diinginkannya. Menu navigasi dibuat untuk memudahkan navigasi sekaligus merapihkan dan mempercantik tampilan suatu website.

Hasilnya kira-kira seperti ini :



Sebenarnya sudah sangat banyak sekali plugin jQuery yang menyediakan pilihan untuk membuat menu dengan lebih elegan dan lebih cantik dengan beberapa animasi seperti slide, fadeIn, fadeOut, dan lain sebagainya. Akan tetapi plugin-plugin diatas memiliki kekurangan yaitu dengan ukurannya yang relatif besar, sehingga membuat loading blog akan terasa lambat, kurang responsif dan tentunya kurang efisien. Disamping itu juga akan menambah bengkak kuota bandwidth web hosting kita.

Jika anda berpikir tentang efisiensi bandwidth, maka anda bisa mencoba tips berikut untuk membuat sendiri menu dengan sedikit script jQuery dipadu dengan CSS. Menu dropdown ini dibuat dengan menggunakan tag ul li bertingkat. Perhatikan skema dibawah ini:

CSS Note: Untuk menu-menu utama kita posisikan relative. Untuk submenu dan seterusnya kita posisikan absolute terhadap menu utama dan submenu utama, ditambah perataan (float) ke kiri dan left:100% untuk submenu.

Berikut langkah-langkahnya :

Membuat Menu Horizontal

  1. Copy Paste script javascript berikut, dan pastikan jQuery telah terinstall pada web anda.
    2. <script type="text/javascript">
$("#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>
  2. HTML code :
    3. <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>
  3. CSS code:
    4. <style type="text/css">
/* HORIZONTAL */
html, body, div, ul, li {
    border: 0;
    margin: 0;
    padding: 0;
    font-family:arial;
    vertical-align:baseline;
}
#menu-horizontal {
    display:block;
    float:left;
    left:0;
    font-size:12px;
    margin:0;
    background-color:green;
}
#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:green;
}
#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:green;
    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:green url(right.png) no-repeat center right;
    padding:0 10px 0 0;
}
 
#menu-horizontal li:hover, #menu-horizontal li > ul li{
    background-color:#006600 !important;
}
#menu-horizontal > ul li:hover, #menu-horizontal li > ul li:hover > ul li {
    background-color:green !important;
}
#menu-horizontal li > ul li:hover > ul li:hover{
    background-color:#006600 !important;
}
</style>
  4. Kode lengkapnya berikut, simpan dengan nama Horizontal.html
    5. <html>
<head>
<title>Menu Horizontal</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#menu-horizontal li").has("ul").addClass("parent");
	$("#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;
}

/* HORIZONTAL */
#menu-horizontal {
	display:block;
	float:left;
	left:0;
	font-size:12px;
	margin:0;
	background-color:green;
}
#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:green;
}
#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:green;
	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:green url(right.png) no-repeat center right;
	padding:0 10px 0 0;
}

#menu-horizontal li:hover, #menu-horizontal li > ul li{
	background-color:#006600 !important;
}
#menu-horizontal > ul li:hover, #menu-horizontal li > ul li:hover > ul li {
	background-color:green !important;
}
#menu-horizontal li > ul li:hover > ul li:hover{
	background-color:#006600 !important;
}
</style>
</head>
<body>
<h1 style="margin-bottom:5px;">Horizontal</h1>
<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>
</body>
</html>

Membuat Menu Vertikal

Sama seperti pada Menu Horizontal, hanya ada beberapa perubahan pada CSS nya.
  1. HTML code Menu Vertikal
    2. <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>
  2. CSS code:
    3. <style type="text/css">
/* VERTIKAL */
html, body, div, ul, li {
    border: 0;
    margin: 0;
    padding: 0;
    font-family:arial;
    vertical-align:baseline;
}
#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:green;
    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:green url(down.png) no-repeat center bottom;
}
#menu-vertical ul ul li.parent {
    background:green url(right.png) no-repeat center;
    display:inline;
}
#menu-vertical li:hover, #menu-vertical li > ul li{
    background-color:#006600 !important;
}
#menu-vertical li > ul li:hover, #menu-vertical li > ul li:hover > ul li {
    background-color:green !important;
}
#menu-vertical li > ul li:hover > ul li:hover{
    background-color:#006600 !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:green;
    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;
}
</style>
  3. Kode lengkapnya, simpan dengan nama Vertikal.html
    4. <html>
<head>
<title>Menu</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#menu-vertical li").has("ul").addClass("parent");
	$("#menu-vertical 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;
}
#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:green;
	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:green url(down.png) no-repeat center bottom;
}
#menu-vertical ul ul li.parent {
	background:green url(right.png) no-repeat center;
	display:inline;
}
#menu-vertical li:hover, #menu-vertical li > ul li{
	background-color:#006600 !important;
}
#menu-vertical li > ul li:hover, #menu-vertical li > ul li:hover > ul li {
	background-color:green !important;
}
#menu-vertical li > ul li:hover > ul li:hover{
	background-color:#006600 !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:green;
	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;
}
</style>
</head>
<body>
<h1 style="margin-bottom:5px;">Menu Vertikal</h1>
<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>
</body>
</html>
  4. Download Source Code [Download]

Baca Juga :

Older Post
Newer Post