html 滑动门效果,js实现简洁的滑动门菜单(选项卡)效果代码

本文实例讲述了js实现简洁的滑动门菜单。分享给大家供大家参考。具体如下：

一个简洁实用的网页选项卡菜单，在同一个页面中实现两个选项卡，第一个是滑动门，从布局上来说基本是相似的，第二个是选项卡，这里主要使用了Js自定义函数：tabMenu，函数功能：实现tab菜单，参数说明：tabMenu(tabBox,navClass);

参数一：tabBox(tab容器id)

参数二：navClass(当前标签样式class)

备注：依赖指定html结构。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

简洁的选项卡菜单

ul,li{margin:0;padding:0;}

.tabBox{width:268px;margin:20px;}

ul.tabTag{height:28px;border-bottom:1px solid #000;list-style:none}

ul.tabTag li{float:left;line-height:27px;height:27px;padding:0 18px;color:#ccc;border:1px solid #ccc;bord