（如果打开过慢，或者打不开，原因你懂得。）
一、目录结构
二、index.html部分
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><script defer async="true" data-main="main" src="../../bower_components/requirejs/require.js"></script><link rel="stylesheet" href="app/nav.css"/><title>用avalon制作导航</title></head><body><div class="navColor" ms-controller="demo"><ul class="_navCenter"><li ms-repeat-el="nav" ms-click="show()"><a ms-attr-href="el.src" ms-text="el.Navname"></a></li></ul></div></body></html>
三、main.js部分
/*** Created by s9-1102 on 2015/5/7.*/require.config({paths:{'avalon':'../../bower_components/avalon.oniui/avalon.min','jquery':'../../bower_components/jquery/dist/jquery.min'}})require(['app/nav'])
四、nav.js部分
/*** Created by s9-1102 on 2015/5/7.*/define(['avalon','jquery'],function(){avalon.ready(function(){var navdemo = avalon.define({$id:'demo',nav:[],show:function(){$(this).addClass('navHover').siblings().removeClass('navHover');}})$.get('app/nav.json',function(json){navdemo.nav=json;$("._navCenter li").eq(0).addClass('navHover');});console.log(navdemo.nav);avalon.scan();})})
五、nav.json部分
[{"Navname":"首页","src":"javascript:"},{"Navname":"个性玩法","src":"javascript:"},{"Navname":"门票","src":"javascript:"},{"Navname":"美食","src":"javascript:"},{"Navname":"交通","src":"javascript:"},{"Navname":"签证","src":"javascript:"},{"Navname":"游玩","src":"javascript:"},{"Navname":"讨论","src":"javascript:"},{"Navname":"关于我们","src":"javascript:"}]
六、nav.css部分
*{margin:0;padding:0;font-family:"Microsoft YaHei","Myriad Pro","Hiragino Sans GB",Calibri,Helvetica, tahoma, arial, simsun, sans-serif}.navColor{height:35px;background-color:#ff6600;line-height:35px;font-size:15px;}._navCenter{padding:050px;list-style: none;}._navCenter li{float: left;}._navCenter li a{display:inline-block;padding:030px;color:#fff;text-decoration: none;}._navCenter li a:hover{background-color:#ff9b59;}.navHover{background-color:#ff9b59;}
总结：通过利用avalon的循环输出能力，和jquery对dom节点强大的操作能力，来制作导航条，不需要重复书写html结构，就可以简单的完成重复性工作。简单高效。