Axure RP(七)案例(顶部导航栏)

  1. 拖拽一个矩形,设置填充为蓝色、无边框。Axure RP(七)案例(顶部导航栏)
  2. 将蓝色矩形转为动态面板并取消“自动调整为内容尺寸” ,进入State1,删除原来的蓝色矩形,并为State1设置同样蓝色的背景颜色。Axure RP(七)案例(顶部导航栏)
    Axure RP(七)案例(顶部导航栏)
    Axure RP(七)案例(顶部导航栏)
  3. 为动态面板设置100%宽度。Axure RP(七)案例(顶部导航栏)
  4. 往顶部导航栏左侧添加一个“Administrator”字样作为logo。Axure RP(七)案例(顶部导航栏)
  5. 在顶部导航栏的右侧放一个动态面板,State1中放一个头像和用户名,下面再放一个动态面板(下拉菜单)内容为设置和退出登录。下拉菜单默认隐藏。Axure RP(七)案例(顶部导航栏)Axure RP(七)案例(顶部导航栏)
    Axure RP(七)案例(顶部导航栏)
  6. 当鼠标移入头像时显示下拉菜单,当鼠标移出下拉菜单时隐藏下拉菜单。

Axure RP(七)案例(顶部导航栏)