php仿微信底部菜单,js实现仿爱微网两级导航菜单效果代码

本文实例讲述了js实现仿爱微网两级导航菜单效果代码。分享给大家供大家参考。具体如下：

这是一款仿爱微网两级导航菜单，tab选项卡形式的导航菜单，原生js做的tab选项卡型的导航菜单，需要鼠标点击才切换出二级子菜单，可修改成鼠标移过去就更换内容的形式。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

一个两级的网页菜单

*{margin:0;padding:0;}

.subnav {

background-color: #3188DA;

color: #C0DEF9;

height: 20px;

}

.subnav a {

color: #FFFFFF;

margin-bottom: 0;

margin-left: 5px;

margin-right: 5px;

margin-top: 0;

}

.subnav a.cur {

color: #FAEC04;

}

.aa {

background-image: url("images/ui1.png");

background-origin: padding-box;

background-position: left -92px;

background-repeat: no-repeat;

}

.bb {

background-color: #75BAFB;

background-image: url("images/ui1.png");

background-position: left -183px;

background-repeat: no-repeat;

}

.cc{color:#ffffff;}

.dd{color:#000}

ul,li{list-style-type:none}

#navbox {

margin-bottom: 15px;

position: relative;

width:960px;

}

.mainnav {

border-bottom-color: #3188DA;

border-bottom-style: solid;

border-bottom-width: 5px;

height: 31px;

}

.mainnav li {

color: #FFFFFF;

float: left;

font-size: 14px;

font-weight: bold;

line-height: 31px;

margin-right: 5px;

text-align: center;

width: 90px;

}

.mainnav li a {

display: block;

font-weight: normal;

height: 31px;

}

.uhide{display:none;}

.ushow{display:block;}

• 首页
• PHP教程
• 网页前端
• 网页特效
• 脚本下载

PHP基础 |

mysql教程 |

smarty教程 |

PHP框架 |

PHP开源 |

Linux教程

DIV+CSS布局 |

javascript教程 |

jquery教程 |

ajax教程 |

flash开源 |

photoshop教程

js导航菜单 |

js表单特效 |

js幻灯片 |

js文本特效 |

js弹出层 |

js网页特效

function g(o){return document.getElementById(o);}

function qh(n){

for(var i=0;i<=6;i++){

g('ta_'+i).className='aa';

g('ta_'+n).className='bb';

g('a'+i).className='dd';

g('a'+n).className='cc';

g('tab_'+i).className='uhide subnav';

g('tab_'+n).className='ushow subnav';

g('tab_0').className='uhide';

g('tab_0').className='uhide';

g('tab_4').className='uhide';

g('tab_4').className='uhide';

}

}

希望本文所述对大家的javascript程序设计有所帮助。