How to use Javascript from Go2Script on your own website?
Go2Script is a free online DHTML menu builder and DHTML Javascript provider. Here you can find some cool and practical Javascript to help you build dynamic navigation menus, create photo slideshows, create image scroller, text scroller and online rating stars. There are also some topical HTML5 elements you can explore.
The Javascripts on Go2script are free of charge and you can download it from our website and use them on your own website for legal usage. To use the scripts, please follow the steps below.
Explore our website and find the one you are interested in, click Download button and you will get a zip file.
Extract the zip file. Here we take http://www.go2script.com/items/
Open the demo.html with a text editor like Notepad++, Dreamweaver and you can see the html codes are as followings (The colored part is what I want to emphasize thereinafter.). You can copy the following HTML to your own HTML file and edit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
<html xmlns="http://www.w3.org/1999/
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu test</title>
<link href="css/webwidget_menu_
<script type="text/javascript" src="js/jquery-1.3.2.min.js"><
<script type="text/javascript" src="js/webwidget_menu_glide.
<body>
<script language="javascript" type="text/javascript">
$(function() {
$(".webwidget_menu_glide").
menu_width: '100px',
menu_height: '30px',
menu_text_color: 'white',
menu_background_color: '#C91A3E',
menu_text_size: '14px',
menu_sprite_color: 'red',
menu_margin: '20px',
sprite_speed: 'normal'//"slow", "normal", or "fast" no-wait
});
});
</script>
<div class="webwidget_menu_glide_
<ul>
<li><a href="link1">menu</a></li>
<li><a href="link2">menu</a></li>
<li class="current"><a href="link3">menu</a></li>
<li><a href="link4">menu</a></li>
<li><a href="link5">menu</a></li>
</ul>
<div style="clear: both"></div>
</div>
</body>
</html>
The blue part contains CSS and JS, if you have changed the folder structure, you need to change their paths accordingly. If you are familiar with CSS, you can change it as you like, however, we recommend that you keep the css and js untouched, otherwise they may not work properly.
The red part is the main javascript to customize the dynamic menu and decide how it looks like. For example, if you need to change the menu width to 200 pixels, you can change menu_width: '100px' to menu_width: '200px'. You can change other elements including menu height, menu background color, menu text size, menu sprite color and menu margin in the same way. //"slow", "normal", or "fast" no-wait indicates that three options are avaiable, which are slow, normal and fast. You can only use one of them. This will change the sprite sliding speed.
The purple part is your dynamic menu. Currently there are five items and of course you can add or remove as you like by adding or removing <li></li> tags. class="current" indicates that once your mouse leaves the menu, the glide will be back to the specified menu.
Now you can add other content to the page.