一个简单的导航网站，使用 Json 做数据源。

选修课期末要求做一个自己想做的网页， 要求只能使用html，js和css，就做一个简单导航算了。

像这种网页导航用到的数据和样式都比较有规律，所以先写好样式， 然后通过js动态加载节点，对于网站的数据源，如果原先就写好不方便后期添加和修改， 采用json来加载数据源，方便后期添加和修改。

json文件数据源格式比较简单:

{ "logoText": "Ticks的破导航(这里可以写上左上角的logo字样)", "oneWord": "这里是上方的一言", "data": [ { "category": "常用工具(分类名称)", "image": "img/xxx.png(img下的分类图片，显示在左边)", "id": "category_id(分类id,主要用于点击左边可以跳转到指定区域)", "content": [ { "name": "Google翻译(具体分类下的项目)", "image": "google_translate.png(同上)", "description": "中国式机器翻译(网站简要描述)", "url": "https://translate.google.cn/(网站地址，点击会跳转到这里)" }, { "name": "高德地图", "image": "gd_map.png", "description": "很好用的导航，适合路盲", "url": "https://www.amap.com/" } ] } ] } 截图

json文件格式一定要正确，里面图片名称也要正确，不然界面都会出现错误。