primeiro vamo criar um código onde teremos um elemento ul que inicializa nossa lista de links
<div id="menu"><ul></ul></div>
Agora chamaremos o nosso código
<script type="text/javascript" src="js/menu.js"></script>
Aqui o conteúdo do código externo
$(document).ready(function () {
$("#menu ul").html(
"<li> <a href='#'> Inicio </a> </li>" +
"<li> <a href='#'> Sobre </a> </li>" +
"<li> <a href='#'> Fale conosco </a> </li>" +
"<li> <a href='#'> Quem Somos </a> </li>"
);
});
Confira o código completo do html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title> menu com jquery </title>
<script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" ></script>
<script type="text/javascript" src="js/menu.js"></script>
<style>
* {margin:0; padding:0;}
div#menu {width:100%; min-height:50px; height:auto; background-color:#c30; text-align:center;}
div#menu ul {list-style-type:none;}
div#menu ul li {display:inline; margin-left:20px;}
div#menu ul li:first-child {margin-left:0;}
div#menu ul li a {font-size:30px; color:#fff; text-decoration:none;}
</style>
</head>
<body>
<div id="menu"><ul></ul></div>
</body>
</html>
Para baixar o script clique aqui http://adf.ly/1cKvCn
