Download Free Websites - WebCreatorBG

Blog News

WebCreatorBG - Ajax

Lets make a navigation menu dinamic with jquery ajax.
first we need to put this in between


<head> and </head> tags. 

<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>

Set id on <nav id="menu"> Set id on <main id="content"> write this <div id="maintext">

Here will be entryng text </div> when you see main close tag put this after the close tag 

<script type="text/javascript"> $(document).ready(function(){ $('#menu ul li a').click(function(){ $('#content').load('pages.html #' + $(this).attr('href')); return false; }); }); </script>

Now open a new notepad file put this code there 

<div id="homepage"> This will be homepage </div>

<div id="downloads"> HERE PUT DOWNLOADS </div>

<div id="aboutus"> HERE WRITE SOMETHING ABOUT YOU </div>

<div id="contactus"> HERE WRITE CONTACT US FORM </div>

and saved like pages.html on the same directory with index.html !

Okay now we have two files pages.html with our pages information and index.html main page.

Index.html and pages.html must be in the same directory and look like this 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>

<style>

body { background:#333}

header { position:relative; margin:auto; background:#CCC; width:950px; height:150px;}

nav { position:relative; margin:auto; background:#3CF; width:950px; height:80px; border-top-left-radius: 80em 1em;border-top-right-radius: 80em 1em; border-bottom-right-radius:80em 1em;border-bottom-left-radius:80em 1em;}

main { position:relative; margin:auto; background:beige; width:950px; height:400px;}

footer { position:relative; margin:auto; background:#3CF; width:950px; height:80px; border-top-left-radius: 80em 1em;border-top-right-radius: 80em 1em; border-bottom-right-radius:80em 1em;border-bottom-left-radius:80em 1em; text-align:center;}

.logo { position:absolute; margin:auto; background:beige; width:950px; height:150px; text-align:center;}

h2 { font-size:32px; font-style:italic; color:black; text-transform: uppercase;}

small { font-style:oblique; color:black; }

ul { position:absolute; width:900px; height:45px;}

li {  float:left;margin-left:80px; padding:3px 3px 3px 3px; font-size:28px; display:block; text-decoration:none;}

li a:hover {color:white;}

li a {text-decoration:none;color:black;}

</style>

<title> WebCreatorBG HTML5 BASIC </title>

</head>

<body>

<header>

<div class="logo"> <h2> welcome to webcreator bg </h2> <small>HTML 5 First webpage Toturial</small>

</div>

</header>

<nav id="menu">

<ul>

<li><a href="homepage">Home </a></li>

<li><a href="downloads">Downloads </a></li>

<li><a href="aboutus">Abouts US</a>>/li>

<li><a href="contactus">Contact Us</a>/li>

</ul>

</nav>

<main id="content">

				<div id="maintext">

Hello,Word
				</div>


</main>

<script type="text/javascript">

			$(document).ready(function(){

				

				$('#menu ul li a').click(function(){

					$('#content').load('pages.html #' + $(this).attr('href'));

					return false;

				});

	
			
			});

</script>

<footer>

Defines a footer for a document,the end of the page

</footer>

</body>

</html>

pages.html source


<div id="homepage">

	This will be homepage

</div>




<div id="downloads">

	HERE PUT DOWNLOADS

</div>

	

<div id="aboutus">

	HERE WRITE SOMETHING ABOUT YOU

	

</div>

<div id="contactus">

	HERE WRITE CONTACT US FORM



</div>

Finish your website! NEXT