教程如何制作可伸缩的全局导航

　　可伸缩的全局导航可以帮助用户寻找到感兴趣的类目，鼠标在一级分类上悬停，一级分类下的二级和三级分类就会显示出来，结束悬停时，二级和三级分类就会收缩起来。
　　话不多说，立马开始分享：
　　首先，我们将导航分为两个区域，A区域是正常情况下显示出来的区域，B区域是鼠标悬停以后显示出来的区域。当鼠标在A区域悬停的时候，A区域背景会变深，同时B区域的内容出现并且可以点击；当鼠标从A和B的非共同边界移出时，A区域颜色回到正常情况下的颜色，同时B区域隐藏。
　　一、新建A区域动态面板
　　（1）拖拽一个动态面板部件到页面中，命名为A1。
　　（2）将A1动态面板state1的名称修改为常态，在常态状态中拖拽一个与A1面板相同大小的矩形部件（A1常态矩形），颜色自定义。
　　（3）为A1新建一个状态为变换，同在变换状态中添加一个与A1面板相同大小矩形部件（A1变换矩形），颜色比A1常态矩形的颜色深一些。
　　二、新建B区域动态面板
　　（1）再拖拽一个动态面板部件到页面中，命名为B1（B1与A1右上角对齐）。
　　（2）B1动态面板state1的名称修改为状态1，在状态1中拖拽一个与B1面板相同大小的矩形部件（B1矩形），颜色与A1变换矩形相同。
　　（3）回到首页中，右击B1面板，将它设置为隐藏。
　　设置完效果如下：
　　三、给面板添加事件
　　（1）找到A1面板的常态状态中的矩形部件，在这个矩形的鼠标悬停事件中，做两个动作：
　　将B区域的B1面板显示出来；
　　将A1面板的状态修改为深色背景的变换状态。
　　（2）为B1面板的状态1中的矩形部件添加一个鼠标移出事件，做两个动作：先隐藏B1面板；再将A1面板的状态恢复为常态。
　　（3）为A1面板的变换状态中的矩形部件添加一个鼠标移入事件，做一个动作：将B1设置为可见。
　　四、添加文字
　　拖拽一个矩形部件到A1常态状态中，双击输入相应文字并将矩形填色和边框都设置为无。
　　右击这个矩形，选择交互样式，在鼠标悬停中勾选下划线。
　　把矩形的外尺寸调整得跟矩形当中的文字外尺寸差不多，并且在A1的常态和变换状态都放上这个矩形。
　　同理，在B1拖拽一个矩形部件到状态1中，双击输入相应的文字并将矩形填色和边框都设置为无。（这时你会发现当鼠标悬停在B1的文字上时，B1面板会被关闭。这是因为文字是矩形部件，当鼠标进入到B1的文字上方是就相当于移出B1面板中的B1矩形部件，就触发了鼠标移出事件，而这个事件就会关闭B1面板。）
　　所以我们必须去掉B1面板状态1中鼠标移出事件，另外想办法实现B1面板的关闭。
　　五、设定响应区域
　　办法是在A1的两个状态中的矩形和B1状态中的矩形周围添加一圈响应区域，这个区域的作用就是响应鼠标移出事件，但它们本身是透明的。所以我们用热区部件来实现，利用它既可以添加事件，又透明的特性，并且它有颜色，你可以看见它有利于我们操作。
　　（1）在B1面板状态1中的矩形上方，添加一个宽度与矩形相同，高度为5的热区部件。添加一个鼠标移入事件，两个动作：先隐藏B1面板；再将A1面板的状态恢复为常态。
　　（2）同样我们在B1的右侧、下方以同样方式添加热区，左侧有点特殊，高度不能与矩形一致，要把与A1相交的地方空出来，这样当从交界处移出的时候不会关闭B1。
　　（3）在A1的两个状态下我们也要在它们的上、左、下方添加这样的热区，并设置相同的事件。
　　六、更多的动态面板
　　以相同的方式添加其他的A区域和B区域，例如新添加A2和B2，因为在A1和A2的边界上面要有一些特殊处理。
　　（1）在页面中复制一个A1，命名为A2，然后将A1面板的常态和变换状态中的矩形下方的那个5像素的相应区域的热区删除。因为A2会直接处于A1的下方，所以我们在A2中的矩形的鼠标移入事件中去关闭B1就可以了。同时也需要删除A2面板常态和变换状态中矩形上方和下方的热区。
　　（2）同样复制一个B1，修改名称为B2，先处理A2常态状态中的矩形鼠标移入事件隐藏B1；将A1状态转换成常态；显示B2；设置A2状态转换成变换；隐藏B3；将A3状态转换成常态。
　　（3）处理A2变换状态中的矩形鼠标移入事件：显示B2。
　　（4）把A2和B2中的所有热区的鼠标移入事件改为隐藏B2和修改A2的状态。
　　（5）这时B1和B2会同时出现，同时在A1的事件中要关闭B2，A1中的事件也要修改。
　　（6）同理复制生成A3、B3，根据加入动态面板按照之前的逻辑修改相应的事件。
　　（新问题：如果鼠标从A1进入B1在从A1与A3相交的地方进入A3，A1就不会关闭，这时候保险起见就把所有A系列面板常态状态下的矩形鼠标移入事件中添加一个关闭所有其他B系列面板并且将所有其他A系列面板的状态设置为常态）
　　这是一个垂直的导航，大家感兴趣也可以试试水平方向的。