js+json用表格实现简单网站左侧导航

调用很简单，只要将数据组织成json格式即可：格式如下：
复制代码 代码如下:
window.onload = function()
{
var tf="if1";
var data=[{m:"体育网站",s:[{sn:"百度体育",st:"http://news.baidu.com/n?cmd=1&class=sportnews"},
{sn:"搜狐体育",st:"http://sports.sohu.com/"},
{sn:"新浪体育",st:"http://sports.sina.com.cn/"}]},
{m:"新闻网站",s:[{sn:"百度",st:"http://news.baidu.com/"},
{sn:"搜狐",st:"http://news.sohu.com/"},
{sn:"新浪",st:"http://news.sina.com.cn/"}]},
{m:"视频网站",s:[{sn:"百度视频",st:"http://vedio.baidu.com/"},
{sn:"搜狐视频",st:"http://tv.sohu.com/"},
{sn:"新浪视频",st:"http://vedio.sina.com.cn/"}]}
];
var nav=new tableNav("table1",data,tf);
var bautoClose=false; //打开当前导航条时其它导航条是否关闭
nav.generateNav(bautoClose);
}

整个实例代码如下：供初学者学习！
</p> <p><title>simple struct</title> </p> <p>#divtitle{<br /> border:solid 1px #000000;<br /> width:98%;<br /> height:100px;<br /> text-align:center;<br /> }<br /> #div1{<br /> border:solid 1px #000000;<br /> width:18%;<br /> height:700px;<br /> float:left;<br /> }<br /> #div2{<br /> width:80%;<br /> height:700px;<br /> float:left;<br /> }<br /> <!--偶数行,0,2,4...--><br /> .oddrow{<br /> margin-top:1px;<br /> }<br /> .oddrow td{<br /> text-decoration:underline;<br /> background-color:#666666;<br /> color:#ccc;<br /> cursor:pointer;<br /> }<br /> <!--奇数行--><br /> .evenrow{<br /> display:none;<br /> }<br /> .evenrow a{<br /> margin-left:10px;<br /> margin-top:2px;<br /> }<br /> .evenrow td{<br /> background-color:#eee;<br /> display:block;<br /> } </p> <h1>用表格实现简单网站左侧导航</h1> <table id="table1"> </table> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

• 可以媲美Flash的JS导航菜单
• javascript实现的又一个不错的滑动导航效果
• 非常酷的js图形渐隐导航菜单栏
• 用javascript来实现动画导航效果的代码
• javascript实现的鼠标悬停时动态翻滚的导航条
• JavaScript NodeTree导航栏(菜单项JSON类型/自制)
• javascript 树形导航菜单实例代码
• js实现的常用的左侧导航效果
• CSS3+Js实现响应式导航条
• JS实现仿京东淘宝竖排二级导航