本章不解读JavaScript HTML5和CSS的基本用法，只对JS控制的逻辑做讲解。如果没有相应基础的，可留言提问。
1.结构层，编写HTML：
此处不粘贴<!DOCTYPE>声明，我用的是H5，即：<!DOCTYPE html>
绑定事件有多种方法，此处用最简单的HTML内嵌。
<body>
<ul>
<li class="active nav-li" οnclick="clickFn(event)">Menu One</li>
<li class="nav-li" οnclick="clickFn(event)">Menu Two</li>
<li class="nav-li" οnclick="clickFn(event)">Menu Three</li>
<li class="nav-li" οnclick="clickFn(event)">Menu Four</li>
</ul>
</body>2.表现层， 菜单基本样式代码：
CSS采用LESS预编译工具，以下是LESS源码：
小普及：LESS是减少代码冗余的CSS预处理语言，还有SASS/STYLUS都是不错的CSS预处理语言，前端工程师编完码（就是敲完代码）之后，可用koala工具把less等预处理语言编译为CSS语言（此步不可少
版权声明：本文为yan_lychee原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。