19个不错的css和js经典导航菜单

简单说下： 1、可以自定义事件--evt : 'click' || 'mouseover' 2、可以自定义默认显示标签--defaultIndex: 0~n(当然N不能超过标签的最大索引值) 3、还是跟我的划过变色一样，一次可以控制多个对象，当然你也可以一次一个，多次调用 4、可以根据标签导航的id值（tabId）,设置标签容器，然后通过导航标签的XHTML标签(tTag)通过tabId.getElementsByTagName(tTag)获取所有标签，同时也可以直接通过函数获取所有的导航标签(tabs)和要显示的内容(contents)。这样基本可以适应多变的布局样式。 5、另外的一个处理，就是不需要像有些朋友的代码，每次通过遍历标签项（tabs）和内容项(contents)来设置当前标签和当前内容的样式。因为你需要设置样式只有4个（1个当前标签（currentTab），1个上次点击标签（lastTab），1个当前内容（currentContent），1个上次显示内容（lastContent））节点样式。 6、如果采用点击事件，那么我就阻止了li或这其他tab标签里链接的事件触发。而当脚本不能运行或禁用时，用户有可以点击这些链接到相应的页面，算是个向后兼容。 2009年6月26日补充说明 到今天为止一共展示出了10个标签导航的示例，应该常用的一些滑动门导航效果这里都有了。我选的这些效果都比较有代表性，实用性也强，都是我从YAHOO、MSN、淘宝、京东等这样的大站点收集整理出来的，希望对加大的开发有帮助。有空我还会更新更多的我看到的或想到的其他表现形式的实用的滑动门。呵呵，看完这些例子，可能有人会发现：“哦，原来这个效果只是一个滑动门啊！”，呵呵，其实就是这样的。只不过我们的WEB工程师们添加了动画效果，使用了更炫的表现形式。而这些东西的本质都是一样的，滑动门。至少我是这么理解的。 我想经常来这了的朋友以前肯定看到过类似的帖子，我这个帖子算是做个补充，给出了更加完整的和丰富的示例。呵呵，重点也在这里，这里的示例是可以直接运用到实际开发中的，大家应该仔细看看这些示例的XHTML代码结构和CSS的布局技巧。特别是对刚接触前端开发的朋友。 我概要的介绍些这里用到的主要两个技巧： 1、浮动元素的特性： A、浮动非替换元素要指定一个明确的宽度；否则，它们会尽可能地窄。 B、按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。 技巧：使用overflow:hidden使浮动元素的父节点获得高度 C、假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。 （不过我的实际经验告诉我，Chorme目前会一直接在一排浮动，不会换行。一个BUG!!） 技巧：所以为了兼容，在你需要清除浮动，希望换行的地方给改节点设置clear:both; D、浮动元素会生成一个块级框，而不论它本身是何种元素。 技巧：如果你视图直接给a或span这样的行内元素设置line-height,height是不起任何作用的，但是如果给他们加上float:left/right;那么这个设置就生效了。 还有：设置了margin-left/right的浮动元素，一定要记得使用display:inline;避免IE6中出现双倍的边距 2、position属性和设置了relative和absolute值的元素特性： relative:元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute:元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框 顺便说下：这里的一个“占空间”和一个“完全删除”就好像visibility:hidden;和display:none; 我的最后一个示例就是充分运用float的“会被移出文档流”，absolute的“从文档流完全删除”特性达到这个布局效果的。但是不幸的是在IE6中，即使absolute的display:none，但是float的威力依然存在，还会让它之后的float元素接在它后面浮动。所以我给每个h4设置了clear:right;把它左边的display:none的含有float的absolute元素的浮动清除掉，这样它们才能显示成一行。 好了，就这么大概的介绍下，其余的大家仔细去看吧，不要只看“热闹”，要看看里面的“门道”。 哎，说道JS的封装，大家要看的，就是如何使用闭包的特性，来模拟私有变量，私有方法和公用方法，特权方法（当然我的例子里有些没有涉及到），如何运用JS的灵活的语法特点.要彻底搞清楚JS中作用域的含义，什么能够在JS中构成作用域。唉，总之虽然我的JS封装得不怎么的，看时还是有不少门道的。当然，个人能力也十分有限，有什么不对和需要提高的，也请高手谅解这指点。