刘钢 – 我是UED

今天得到产品经理的一个需求
分类体系 一级分类 以及其子分类 在一个标题栏上展示 只显示5个子分类 其余显示为下拉列表 效果如下图

由于对前端比较痴迷 于是乎用前端来实现了一下 之前这样的需求 都是程序员去做判断 来实现的
查看DEMO
下载代码
已在如下浏览器测试 IE6 IE7 IE8 FF3.5.6 Opera10 Safari4
页面结构用前端实现如下

<div class="Area">
  <div id="menu1" class="main_tit">
	<h2><a href="http://www.iamued.com">IamUed.com-前端开发</a></h2>
	<ul  class="sublist">
		<li><a href="http://www.iamued.com">javascript</a></li>
		<li><a href="http://www.iamued.com">Ria</a></li>
		<li><a href="http://www.iamued.com">ActionScript</a></li>
		<li><a href="http://www.iamued.com">Flash</a></li>
		<li><a href="http://www.iamued.com">Flex</a></li>
		<li><a href="http://www.iamued.com">W3C</a></li>
		<li><a href="http://www.iamued.com">xhtml</a></li>
	</ul>
  </div>
  一级内具体内容
</div>

可以看到 对于程序输出来讲 这样的结构不需要任何逻辑 相对代码结构清晰整洁

核心JS代码如下
阅读全文…