JS实现的简洁二级导航菜单雏形效果

本文实例讲述了射流研究…实现的简洁二级导航菜单雏形效果。分享给大家供大家参考。具体如下：

这是一个二级导航菜单雏形，风格简洁，圆角形，也是当前比较流行的菜单效果，支持二级，演示内容是随便搞的，希望大家喜欢。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-simple-2l-nav-menu-demo/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题二级导航菜单/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS '！-* { font-size :12 px；} html，正文{边际：0文本对齐：居中；过流：隐藏；高度：100%;宽度：100%;} UL { list-style-type :无；margin:0px}。ttl { height:18px}。CTT { height : autopadding :6 pxclear : both border : 1px固体# CCCCCC；} .w 936 {宽度：936 pxclear:both高度： 120像素；边距-top : 20px；右边距： 0;边距-底部： 2px左边距-: 0;} .normaltab { color: # 1F3A87}。悬停选项卡{ color: # FF0000背景色-: # 99cc 00；} .dis { display:block}。undis { display:none}。制表符{宽度：100%;背景# bbd9ee font-size :93；线高：正常值；} .制表符ul { margin :0 padd :10 px 10px 0 50pxlist-style : none；} .制表符Li { display : inline margin :0划水：0;光标：指针；} .制表符一个{ float : leftbackground : URL(' images/table ft。gif ')无重复左上角；余量margin:0padding:0 0 0 4px文本装饰：无；} .选项卡a span { float:left显示：块；背景： URL('图像/标签右侧。gif ')无重复右上方；padd :5 px 15px 4px 6pxcolor : # 666 }。选项卡a span { float:none}。选项卡a :悬停跨度{ color: # FF9834}。制表符a :悬停{背景-位置：0%-42px；} .制表符a :悬停跨度{背景-位置：100%-42px；}-/样式脚本类型='text/javascript '语言='javascript '！-函数g(o){返回文档。getelementbyid(o)；}函数重利(n){ for(var I=1；I=8；I){ g(' TB _ ' I)；g('tbc_0' i).' undi } g(' TBC _ 0 ' n).' dist(' TB _ n ')；}//////script/head dydiv class=' w936 ' div id=' TB _ ' class=' TB _ tab ' ul Li id=' TB _ 1 ' on mouse over=' Horselli(1)；'a href=' # ' SPan AsP/SPan/a/Li Li id=' TB _ 2 ' on mouse over=' HeaLTH Li(2)；'a href=' # ' SPan PHp/SPan/a/Li Li id=' TB _ 3 ' on mouse over=' HeaLTH LI(3)；'a href='#'span .NET/span/a/Li Li id=' TB _ 4 ' on mouse over=' HeaLTH Li(4)；'a href=' # ' SPan JSp/SPan/a/Li Li id=' TB _ 5 ' on mouse over=' HeaLTH Li(5)；'a href=' # ' SPan Java/SPan/a/Li Li id=' TB _ 6 ' on mouse over=' HeaLTH Li(6)；'a href=' # ' SPan DelPhi/SPan/a/Li Li id=' TB _ 7 ' on mouse over=' HeaLTH Li(7)；'a href=' # ' SPan VC/SPan/a/Li Li id=' TB _ 8 ' on mouse over=' HeaLTH Li(8)；'a href=' # spanAJax/span/a/Li/ul/div class=' CTT ' div class=' dis ' id=' TBC _ 01 ' ASP的内容一div class=' undis ' id=' tbc _ 02 ' PHP的内容二div class=' undis ' id=' tbc _ 03 ' .网的内容三div class=' undis ' id=' tbc _ 04 ' JSP的内容四/div class=' undi ' id=' TBC _ 05 ' JAVA的内容五/div class=' undi ' id=' TBC _ 06 ' DELPHI的内容六div class=' undis ' id=' tbc _ 07 ' VC的内容七/div class=' undi ' id=' TBC _ 08 ' AJAX的内容/div /div/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。