Technology

Membuat Menu Auto Scrolling dengan CSS dan JavaScript

 
  • 85
    Shares

Kali ini tim developer kami membagikan cara pembuatan “auto scrolling menu” menggunakan CSS & Javascript seperti yang terlihat pada http://www.jagoanstore.com/demo. Berikut preview hasil jadinya:


1. Copy file CSS berikut dan letak kan pada tag <head>:

  • http://www.jagoanstore.com/demo/elegant1/elegant1/templates/css/change_template.css

 

2. Copy file Javascript berikut dan letak kan pada tag <head>::

  • https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
  • http://www.jagoanstore.com/demo/elegant1/elegant1/templates/js/jquery.easing.1.3.js

 

3. Copy file Javascript berikut dan letak kan pada akhir tag <body>:

  • http://www.jagoanstore.com/demo/elegant1/elegant1/templates/js/change_template.js

 

4. Kemudian pastekan kode berikut di dalam tag <body>:

<div id="fl_menu">

	<div class="menu">
    	<div class="menu_item">
			<div class="right_template">
				<div class="title">Pilihan Template</div>
				<div style="background:#fff;padding-top:5px;padding-bottom:5px;text-align:left;">
					<center><div class="text_content">Silahkan pilih salah satu template. Setiap template memiliki pilihan warna yang berbeda. Tampilan website demo akan berubah sesuai dengan template yang dipilih.</div></center>
					<center><div class="table_content">
					<table border=0 cellspacing=5 cellpadding=3 width="100%">
					<tr>
																	<td class="listing listing_active" valign="top" align="center">
							<table border=0 cellspacing=0 cellpadding=3>
							<tr><td width="60" align="left" valign="top">
							<img src="http://www.jagoanstore.com/demo/elegant1/manage/images/template/elegant1.jpg" width="50" />
							</td><td width="160" align="left" valign="top">
							<div style="margin-top:5px;"><b style="color:#333;">Elegant 01</b></div>
							<div style="margin-top:10px;">

															</div>
							</td></tr>
							</table>
						</td>

																		<td class="listing" valign="top" align="center">
							<table border=0 cellspacing=0 cellpadding=3>
							<tr><td width="60" align="left" valign="top">
							<img src="http://www.jagoanstore.com/demo/elegant1/manage/images/template/elegant2.jpg" width="50" />
							</td><td width="160" align="left" valign="top">
							<div style="margin-top:5px;"><b style="color:#333;">Elegant 02</b></div>
							<div style="margin-top:10px;">
																	<a style="cursor:pointer;" onClick="makeRequest('http://www.jagoanstore.com/demo/elegant1//x_page.php', 'process_container', 'page=addons/change_template/redirect&action=set_template&location=elegant2&last_template=elegant1&page_required=1');">select</a>
															</div>
							</td></tr>
							</table>
						</td>

												</tr><tr>						<td class="listing" valign="top" align="center">
							<table border=0 cellspacing=0 cellpadding=3>
							<tr><td width="60" align="left" valign="top">
							<img src="http://www.jagoanstore.com/demo/elegant1/manage/images/template/Homebanner.jpg" width="50" />
							</td><td width="160" align="left" valign="top">
							<div style="margin-top:5px;"><b style="color:#333;">Home Banner</b></div>
							<div style="margin-top:10px;">
																	<a style="cursor:pointer;" onClick="makeRequest('http://www.jagoanstore.com/demo/elegant1//x_page.php', 'process_container', 'page=addons/change_template/redirect&action=set_template&location=classic&last_template=elegant1&page_required=1');">select</a>
															</div>
							</td></tr>
							</table>
						</td>

																		<td class="listing" valign="top" align="center">
							<table border=0 cellspacing=0 cellpadding=3>
							<tr><td width="60" align="left" valign="top">
							<img src="http://www.jagoanstore.com/demo/elegant1/manage/images/template/nove.jpg" width="50" />
							</td><td width="160" align="left" valign="top">
							<div style="margin-top:5px;"><b style="color:#333;">Noves</b></div>
							<div style="margin-top:10px;">
																	<a style="cursor:pointer;" onClick="makeRequest('http://www.jagoanstore.com/demo/elegant1//x_page.php', 'process_container', 'page=addons/change_template/redirect&action=set_template&location=nove&last_template=elegant1&page_required=1');">select</a>
															</div>
							</td></tr>
							</table>
						</td>

												</tr><tr>						<td class="listing" valign="top" align="center">
							<table border=0 cellspacing=0 cellpadding=3>
							<tr><td width="60" align="left" valign="top">
							<img src="http://www.jagoanstore.com/demo/elegant1/manage/images/template/basic1.jpg" width="50" />
							</td><td width="160" align="left" valign="top">
							<div style="margin-top:5px;"><b style="color:#333;">Simple Basic 01</b></div>
							<div style="margin-top:10px;">
																	<a style="cursor:pointer;" onClick="makeRequest('http://www.jagoanstore.com/demo/elegant1//x_page.php', 'process_container', 'page=addons/change_template/redirect&action=set_template&location=basic&last_template=elegant1&page_required=1');">select</a>
															</div>
							</td></tr>
							</table>
						</td>

																		<td class="listing" valign="top" align="center">
							<table border=0 cellspacing=0 cellpadding=3>
							<tr><td width="60" align="left" valign="top">
							<img src="http://www.jagoanstore.com/demo/elegant1/manage/images/template/basic2.jpg" width="50" />
							</td><td width="160" align="left" valign="top">
							<div style="margin-top:5px;"><b style="color:#333;">Simple Basic 02</b></div>
							<div style="margin-top:10px;">
																	<a style="cursor:pointer;" onClick="makeRequest('http://www.jagoanstore.com/demo/elegant1//x_page.php', 'process_container', 'page=addons/change_template/redirect&action=set_template&location=basic2&last_template=elegant1&page_required=1');">select</a>
															</div>
							</td></tr>
							</table>
						</td>

												</tr><tr>						<td class="listing" valign="top" align="center">
							<table border=0 cellspacing=0 cellpadding=3>
							<tr><td width="60" align="left" valign="top">
							<img src="http://www.jagoanstore.com/demo/elegant1/manage/images/template/watch.jpg" width="50" />
							</td><td width="160" align="left" valign="top">
							<div style="margin-top:5px;"><b style="color:#333;">Watch</b></div>
							<div style="margin-top:10px;">
																	<a style="cursor:pointer;" onClick="makeRequest('http://www.jagoanstore.com/demo/elegant1//x_page.php', 'process_container', 'page=addons/change_template/redirect&action=set_template&location=watch&last_template=elegant1&page_required=1');">select</a>
															</div>
							</td></tr>
							</table>
						</td>

							</tr>
					</table>
					</div></center>
				</div>
				<div style="clear:both;height:5px;"></div>
			</div>
		</div>
		<div class="label">&nbsp;</div>
    </div>
</div>
<div id="fl_menu2">

	<div class="menu">
    	<div class="menu_item">
			<div class="right_warna">
				<div class="title">Pilihan Warna</div>
				<div style="background:#fff;padding-top:5px;padding-bottom:5px;text-align:left;">
					<center><div class="text_content">Berikut pilihan warna untuk template : <b>Elegant 01</b><br />Warna website demo akan berubah sesuai dengan warna yang dipilih.</div></center>
					<center><div class="table_content">
					<table border=0 cellspacing=5 cellpadding=3 width="100%">
					<tr>
																	<td valign="top" align="center">
							<div class="list_warna_active" style="background:url('http://www.jagoanstore.com/demo/elegant1/manage/images/color/maroon.jpg');" onClick="makeRequest('http://www.jagoanstore.com/demo/elegant1//x_page.php', 'process_container', 'page=addons/change_template/redirect&action=set_color&color=style.css&images=images&page_required=1');">
																	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
															</div>
						</td>

																		<td valign="top" align="center">
							<div class="list_warna" style="background:url('http://www.jagoanstore.com/demo/elegant1/manage/images/color/blue.jpg');" onClick="makeRequest('http://www.jagoanstore.com/demo/elegant1//x_page.php', 'process_container', 'page=addons/change_template/redirect&action=set_color&color=style_blue.css&images=images_blue&page_required=1');">
																	<a>select</a>
															</div>
						</td>

																		<td valign="top" align="center">
							<div class="list_warna" style="background:url('http://www.jagoanstore.com/demo/elegant1/manage/images/color/bluefb.jpg');" onClick="makeRequest('http://www.jagoanstore.com/demo/elegant1//x_page.php', 'process_container', 'page=addons/change_template/redirect&action=set_color&color=style_bluefb.css&images=images_bluefb&page_required=1');">
																	<a>select</a>
															</div>
						</td>

																		<td valign="top" align="center">
							<div class="list_warna" style="background:url('http://www.jagoanstore.com/demo/elegant1/manage/images/color/green.jpg');" onClick="makeRequest('http://www.jagoanstore.com/demo/elegant1//x_page.php', 'process_container', 'page=addons/change_template/redirect&action=set_color&color=style_green.css&images=images_green&page_required=1');">
																	<a>select</a>
															</div>
						</td>

																		<td valign="top" align="center">
							<div class="list_warna" style="background:url('http://www.jagoanstore.com/demo/elegant1/manage/images/color/pink.jpg');" onClick="makeRequest('http://www.jagoanstore.com/demo/elegant1//x_page.php', 'process_container', 'page=addons/change_template/redirect&action=set_color&color=style_pink.css&images=images_pink&page_required=1');">
																	<a>select</a>
															</div>
						</td>

												</tr><tr>						<td valign="top" align="center">
							<div class="list_warna" style="background:url('http://www.jagoanstore.com/demo/elegant1/manage/images/color/violet.jpg');" onClick="makeRequest('http://www.jagoanstore.com/demo/elegant1//x_page.php', 'process_container', 'page=addons/change_template/redirect&action=set_color&color=style_violet.css&images=images_violet&page_required=1');">
																	<a>select</a>
															</div>
						</td>

																		<td valign="top" align="center">
							<div class="list_warna" style="background:url('http://www.jagoanstore.com/demo/elegant1/manage/images/color/black.jpg');" onClick="makeRequest('http://www.jagoanstore.com/demo/elegant1//x_page.php', 'process_container', 'page=addons/change_template/redirect&action=set_color&color=style_black.css&images=images_black&page_required=1');">
																	<a>select</a>
															</div>
						</td>

																		<td valign="top" align="center">
							<div class="list_warna" style="background:url('http://www.jagoanstore.com/demo/elegant1/manage/images/color/orange.jpg');" onClick="makeRequest('http://www.jagoanstore.com/demo/elegant1//x_page.php', 'process_container', 'page=addons/change_template/redirect&action=set_color&color=style_orange.css&images=images_orange&page_required=1');">
																	<a>select</a>
															</div>
						</td>

																		<td valign="top" align="center">
							<div class="list_warna" style="background:url('http://www.jagoanstore.com/demo/elegant1/manage/images/color/silver.jpg');" onClick="makeRequest('http://www.jagoanstore.com/demo/elegant1//x_page.php', 'process_container', 'page=addons/change_template/redirect&action=set_color&color=style_silver.css&images=images_silver&page_required=1');">
																	<a>select</a>
															</div>
						</td>

									</tr>
					</table>
					</div></center>
				</div>
				<div style="clear:both;height:5px;"></div>
			</div>
		</div>
		<div class="label">&nbsp;</div>
    </div>
</div>

5. DONE. Selamat mencoba.


  • 85
    Shares

2 komentar

  • 30 Juni 2012 - pukul 19:10

    Wahhh… thanks berat min inpoh nya… :))

  • Musa
    15 Februari 2013 - pukul 9:42

    Cara meletakkan file JS di dalam tag itu caranya bagaimana?

Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *