怎么用axure制作页面顶部吸附导航

 时间:2024-11-11 07:02:33

1、制作需要吸附式导航的页面因为吸附式置顶导航的效果主要在页面比较长的时候呈现,所以首先我们需要制作一个基础页面。

怎么用axure制作页面顶部吸附导航

2、制作需要吸附置顶的导航吸附的导航,并非步骤1中页面的既有导航,而是单独做的一个导航(复制页面中的导航设计即可),为了区分,这里我们命名为“固定导航”。全选固定导航,单击右键,选择转化为动态面板(命名为固定导航)。然后再次单击右键,选择固定到浏览器,水平居左,垂直居顶,把始终保持在顶层选中,然后隐藏该动态面板。

怎么用axure制作页面顶部吸附导航
怎么用axure制作页面顶部吸附导航
怎么用axure制作页面顶部吸附导航

3、制作固定瞄点新建一个动态面板“固定瞄点”在左上角,选择固定到浏览器顶部,大小可以根据你的情况自定义,一般小一点不影响页面交互为好,如“50X50”

怎么用axure制作页面顶部吸附导航

4、制作移动瞄点新建一个热点“移动瞄点”,顶部的位置为你认为页面导航移动到哪里就应该出现固定导航的位置,高度为你想一直显示固定导航的页面区域,一般为整个页面下面区域

怎么用axure制作页面顶部吸附导航

5、设置交互条件首先说下交互的逻辑,当“移动瞄点”的位置随着页面滚动接触“固定瞄点”时,则吸附式导航显示,否则隐藏。接下来我们开始设置(1)窗口滚动时,如果移动瞄点的元件范围接触固定瞄点的元件范围,则显示固定导航,并置顶。(2)窗口滚动时,如果移动瞄点范围未接触固定瞄点元件范围,则隐藏固定导航。

怎么用axure制作页面顶部吸附导航
怎么用axure制作页面顶部吸附导航

6、预览交互效果,成功

怎么用axure制作页面顶部吸附导航
怎么用axure制作页面顶部吸附导航
  • AE的透镜效果怎么使用
  • 怎么在ae中创建渐变色条
  • AE CS6如何生成蜂巢效果的背景图片
  • 如何用C4D制作618节日海报
  • 0基础AE教程 14 用AE制作文字路径效果
  • 热门搜索
    生活中的语文手抄报 安全健康快乐手抄报 关于爱的手抄报图片 国学经典手抄报资料 关于科技手抄报内容 成长手抄报内容 我爱汉字手抄报图片 爱护地球手抄报 节俭养德手抄报 二年级安全手抄报