思洋互动网站建设学前班

淘宝商城的全局导航（3）步骤3 为面板添加事件
接下来，我们开始为添加的两个动态面板中的元素添加事件。
01. 我们找到class1面板的normal状态中的矩形部件，在这个矩形的OnMouseEnter事件中，添加如下的内容

Label部件名称	Class1NormalRectangle
部件类型	Rectangle
动作类型	OnMousEnter
所属页面	Home
所属面板	class1
所属面板状态	normal
动作类型	动作详情
Show Panel(s)	Show subclass1
Set Panel state(s) to State(s)	Set class1 state to rollover

我们只做了两个动作，一个是将B区域的subclass1面板显示出来，第二个是将class1面板的状态修改为具有深色背景的rollover状态。
02. 然后，我们为subclass1面板的状态1中的矩形添加一个OnMouseOut事件，当这个事件发生时，我们要首先要隐藏subclass1面板，然后，要将class1面板的状态恢复为normal。如下图所示


广州网站建设,网站建设,广州网页设计,广州网站设计

Label部件名称	subclass1Rectangle
部件类型	Rectangle
动作类型	OnMouseOut
所属页面	Home
所属面板	Subclass1
所属面板状态	State1
动作类型	动作详情
Hide Panel(s)	Hide subclass1
Set Panel state(s) to State(s)	Set class1 state to normal

好了，现在我们生成一下整个项目，在浏览器中查看一下效果。我们会发现，确实出现了我们想要的效果，但是当鼠标从Subclass1面板的state1进入到class1面板的rollover状态时，按理说subclass1是不应该被关闭的，但是现在却被关闭了。
03. 所以，我们还需要给class1的rollover状态中的矩形添加一个OnMouseEnter事件，在这个事件中，我们再将subclass1设置为可见。这样，当用户的鼠标从subclass1的其他边界移出的话，subclass1便会不可见了。

Label部件名称	Class1RolloverRectangle
部件类型	Rectangle
动作类型	OnMouseEnter
所属页面	Home
所属面板	Class1
所属面板状态	rollover
动作类型	动作详情
Show Panel(s)	Show subclass1

步骤4 添加文字链
步骤5 取巧的响应区域
步骤6 更多的动态面板
步骤7 更多更多的动态面板
总结
我们已经实现了可伸缩的面板的高保真制作过程。这是一个垂直的导航，对于水平导航的处理方式是类似的，读者可以自己试一试。我们制作的这个面板在美工上面比较粗糙，相比淘宝商城的"成品"，读者也可以自己添加一些装饰性的元素，比如小的分割线，不同分类的不同的背景，小箭头等等。当然，也可以加入一些图标和图片。总之，实现的方式是类似的，但是大家可以自由发挥。

广州网站建设,网站建设,广州网页设计,广州网站设计