Menu Slider dengan CSS, JS dan AJAX

Masih dalam seputar CSS, namun kali ini mendapat tambahan dengan JS (JavaScript) dan AJAX (Asynchronous JavaScript and XMLHTTP ), penasaran dengan bahasan kali ini ?

Sekilas tentang “JS” dan “AJAX”


JS (JavaScript)
Javascript adalah sebuah bahasa komputer atau kode pemrograman yang digunakan pada website agar website tersebut menjadi lebih interaktif dan dinamis. Javascript adalah jenis bahasa pemrograman client side. Pembahasan lengkap tentang Javascript bisa anda dapatkan dari WikiPedia , ikuti tautan tersebut untuk mendapatkan info lebih lanjut tentang Javascript.

AJAX (Asynchronous JavaScript and XMLHTTP )
AJAX adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan.

Lebih lengkap pembahasan ajax Anda bisa kunjungi WikiPedia untuk mendapatkan penjelasan detailnya.

Diatas adalah sekilas tentang JS dan AJAX, sekarang langsung saja fokus pada script dibawah.

Script Menu Slider

<!DOCTYPE html>
<html>
<head>
    <title>Menu Slider dengan CSS, JS dan AJAX</title>
    <meta charset="UTF-8" />

<!-- Need Ajax for animated, Used from google -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<!-- begin JS for menu -->

<script type="text/javascript">
$(document).ready(function () {
    $(".menus").click(function () {
    $(".menu").slideToggle("slow");
    });
});
</script>

<!-- end JS menu -->

<!-- begin menu CSS code -->

<style type="text/css">
body { background: #eee; font-family: tahoma; size: 12px; color: #333; }
.menu {
	display: block;
	background-color: #000;
	position: fixed;
	width: 300px;
	top: -10px;
	left: 80px;
	z-index: 9 !important;
	padding: 20px;
	color: white;
	font-family: verdana;
	margin: 0 auto;
	border-radius: 8px;
	border: 2px solid gainsboro;
	-webkit-user-select: none;
	-moz-user-select: none;
	box-shadow: 0px 3px 10px black;
	cursor: default;
}
.menu:hover {
	border: 2px solid white;
}
.menus:hover {
	color: red;
}
.menu span.menus {
	line-height: initial;
	position: absolute;
	right: 8px;
	top: 6px;
	background-color: transparent;
	font-family: verdana;
	color: white;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
}
span.menus:hover {
	color: lime;
	cursor: pointer;
}
.linkmenu {
	color: lime;
	text-decoration: none;
	cursor: pointer;
}
</style>

<!-- end of CSS menu code -->

</head>
<body>

<!-- this content between tag <body>...</body> will be show on browser -->

<div style="font-family: tahoma; font-size: 12px; color: #0000ff; margin-top: 120px;">
    Contoh <b>Menu Slider</b> dengan <b>CSS</b>, <b>JS</b> dan <b>AJAX</b>.
    <p><i style="color:#333;">* Klik pada label <b>MENU</b> di pojok kiri atas untuk melihat menu dari script ini</i>.</p>
</div>

<!-- begin menu HTML code -->

<a href="#" class="menus" style="position: fixed; left: 10px; top: 10px; text-decoration: none;" title="Klik disini untuk membuka menu">
    <b>MENU</b>
</a>
<div class="menu" style="display:none; text-align:center;">
    MENU SLIDER DENGAN AJAX
    <hr>
        <a href="https://my-id.site" target="blank" class="linkmenu" title="My-ID.site is Free URL Shortener">Free URL Shortener</a>
    <hr>
        <font color="yellow" size="2">Anda bisa menambahkan link atau text lainya disini.</font>
    <span class="menus" title="Tutup menu">x</span>
</div>

<!-- end of HTML menu code -->


<p style="font-family: tahoma; font-size: 11px; color: #0000ff;">
    » Now try with yourself.... 
</p>
<hr>

<!-- End of body content -->

</body>
</html>

Script diatas sudah lengkap satu paket, HTML, CSS, JS dan AJAX, seperti biasa Anda bisa meng-Copy Paste script diatas dan disimpan dalam ekstensi .html (dot html) kemudian di eksekusi di peramban kesukaan Anda.

Ingin langsung edit dan melihat hasilnya ? Silahkan gunakan Realtime HTML Editor ↗ untuk edit dan melihat hasilnya langsung secara real, script diatas otomatis ditampilkan di halaman tersebut.

Jangan bosan untuk belajar, tetap semangat, salam sukses Saya untuk Anda, semoga bermanfaat sedikit artikel tentang Menu Slider dengan CSS, JS dan AJAX ini.

Mungkin Anda Menyukai