系统自带的导航组件可以满足一般用户的需要，但是也有用户希望导航可以更加个性化一些。例如，导航中一级导航简洁明了，二级导航图文并茂，如果是这样，就不能用系统自带的导航组件，而是需要用图片和段落结合交互效果拆开来做。

如要实现的导航默认效果图和鼠标悬停效果图如下图所示。

导航默认效果图

导航鼠标悬停效果图

首先，布局好框架，在一个大行里面嵌套两个行，在第一个嵌套的行里面，放一个自定义列宽为4:8的一行两列，左边放logo，右边放一个自定义列宽为9:3的一行两列。自定义列宽为9:3的一行两列中，左边放一行三列，每列放一个段落，右边放一个按钮。

在第二个嵌套的行里面，放一个一行四列的布局，前三列放图片，后一列放段落，内容为WHAT WE DO的相关内容。调整好样式后，复制两个同样的一行四列的布局，换掉图片和段落，分别填充WHO WE ARE和WHY CHOOSE US的相关内容。

布局好框架、填充好内容、调整过基本样式后，开始添加交互事件。

需要明白的是触发对象为第一个嵌套行里面的三个段落，鼠标移入相关段落后，显示相关的二级导航，鼠标移出二级导航后，二级导航消失。

三个放不同内容的一行四列的布局在右侧边栏-样式-显示状态中选择“隐藏”。

选中段落“WHAT WE DO”，在右侧边栏交互-鼠标移入添加事件：

1、“显示”第二个嵌套的行的ID；
2、“显示”第二个嵌套行中第一个填充“WHAT WE DO”相关内容的一行四列的布局ID；
3、“隐藏”第二个嵌套行中第二个填充“WHO WE ARE”相关内容的一行四列的布局ID；
4、“隐藏”第二个嵌套行中第三个填充“WHY CHOOSE US”相关内容的一行四列的布局ID。

选中第二个嵌套的行，在右侧边栏交互-鼠标移入移出添加事件：

1、“隐藏”第二个嵌套的行的ID。

为了方便添加交互事件，可以把四个需要“隐藏”或“显示”的元素ID复制到记事本。

选中段落“WHO WE ARE”，在右侧边栏交互-鼠标移入添加事件：

1、“显示”第二个嵌套的行的ID；
2、“隐藏”第二个嵌套行中第一个填充“WHAT WE DO”相关内容的一行四列的布局ID；
3、“显示”第二个嵌套行中第二个填充“WHO WE ARE”相关内容的一行四列的布局ID；
4、“隐藏”第二个嵌套行中第三个填充“WHY CHOOSE US”相关内容的一行四列的布局ID。

选中段落“WHY CHOOSE US”，在右侧边栏交互-鼠标移入添加事件：

1、“显示”第二个嵌套的行的ID；
2、“隐藏”第二个嵌套行中第一个填充“WHAT WE DO”相关内容的一行四列的布局ID；
3、“隐藏”第二个嵌套行中第二个填充“WHO WE ARE”相关内容的一行四列的布局ID；
4、“显示”第二个嵌套行中第三个填充“WHY CHOOSE US”相关内容的一行四列的布局ID。

为了不让二级导航占据空间，设置第二个嵌套的大行在右侧边栏样式-默认-定位：定位-滚动漂浮，样式-默认-定位-层级：5。至此，个性化导航就基本完成了。