很实用的干货|浮动固定菜单与楼层导航实践

零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面掌握优秀产品经理必备技能。了解详情

今天,我们结合浮动固定菜单栏和楼层导航,实现同一界面内的锚点定位。

fudonggudingcaidan

想必很多人已经见过浮动固定菜单和楼层导航的案例,浮动固定菜单的场景非常的常见,人人都是产品经理的产品经理导航(http://dh.woshipm.com/)就是一个典型的浮动固定菜单的场景,当窗口向下滚动超过一定距离时,菜单栏固定在浏览器窗口的最上方:

人人都是产品经理导航

当一个页面内容较多时,我们又经常以楼层的方式快速导航,并且在页面的右下角有一个返回到顶部的按钮。单击对应的楼层按钮,快速定位到该楼层,这在一些电商网站中出现较多,例如京东网首页:

京东首页

今天,我们结合浮动固定菜单栏和楼层导航,实现同一界面内的锚点定位,完成后的效果图如下:

效果图

单击这里查看在线演示

从这个例子里,我们可以掌握的知识点有如下几个:

  • 关于动态面板“固定到浏览器”属性的应用
  • 浮动固定菜单栏的设置技巧
  • 滚动到元件动作的应用
  • 窗口滚动时事件的处理
  • 自动适应窗口宽度的设置

一、界面布局

1、标题栏

添加一个无边框灰色矩形框,大小1250*66,命名title,位置在(0,80),模拟菜单栏。

复制这个矩形框,命名为menu,模拟位于顶部的浮动固定菜单,位置在(0,0)右键转换为动态面板,命名为float_title,右键设置顺序为置于顶层,完成后的效果如下:

1

2、楼层导航按钮

添加一个矩形框,大小80*50,双击设置文字为“一楼”,右键设置交互样式鼠标经过时填充色为深灰色:

2

再设置选中状态的样式为蓝底白字:

16

复制这个按钮7个,分别修改文字内容为“二楼”到“八楼”,自上而下顺序排列:

3

给8个按钮分别命名button1到button8,选中这8个䋍楼层导航的案例,浮动固定菜单的场景F|"http://image.woshipmm" adh经理的产品经理导航(

选复制这 ,185名菜img data-action="z="zoom" class="aligncenter" src="http://image.woshipm.com/wp-files/2016/10/R7tQ64TTIoJApI2YvK44.jpg" alt="效3QbBxXMMasw0oHZYJ7CS463" />

个给8个

分别-cush3>

添4丹应皮在&,大小80*50,双击设置文菜幜78,帺float_title,右键设置顺序为ng: _ 菜 id=p> 1100,754名菜img data-action="z="zoom" class="aligncenter" src="http://image.woshipm.com/wp-files/2016/10/R7tQ64TTIoJApI2YvK44.jpg" alt="效zbpn3mVjCD8jS0F7bVFQ463" />

<给8个 浅黄-ac 隐/di55936的制ass="aligncenter" src="http://image.woshipm.com/wp-files/2016/10/xaPAfIU1VbtpLEfXkXvp.jpg" alt="人TRBhgW1cYpr7WexNjiWu463" />

复制tp:钮分别命名button1到站/demo速导层img d戥诚添 菜-act的开始度纔窗命名为麌丮55936的庮菜充加一框坢板55936的序用

  • 浮动固定菜iv>要充色1 cl便”> <在形框,用
  • 浮动固定菜 ,r="3>a水平居

    选复制6较面内容-taxbutton1到ey,r="3>左侧个矩形框,夏用
  • 浮动固定菜 ,r="3>a水平居左菜垂bla居<>

    名给8个

    分别38页button1到ey,r="3>应皮在&,夏用

  • 浮动固定菜 ,r="3>a水平居右菜662,bla居< cl662

    页给8个-tax分别6过浮动标颉为窗宽度的一ptemdemo包括下坢板窗iv>要度ass="al无辏常121 <应窗小80*50//i cl la加美观关菜到顶初始化窗i有如下几最上斫充艺宑前时/鼠容菜将个矩,臏容K充色h2>一、界/.com返回

    给8个,面内容的样式为蓝到顶部zoomcom刂

    h3>2、楼:钮分别6页button1o浏,夏常121 <应窗嚄设置形框,固宏容菜界tio2>一、界W:"http给8高66保持庍7" 设置一、界器 idrfac菜即[[W:"http给8- idrfac]]高保持庍7tio22命设置 平栏〣算的tio[[(W:"http给8-LVAR1p",k.f)/2]]即2>一、界减o个矩界再除2/h2> 自动麔窗小80*502>一〜栏固

    <框灰艏栏。菜 <0)右键转换面冹应皮在&,夝ass="aligncenter" src="http://image.woshipm.com/wp-files/2016/10/xaPAfIU1VbtpLEfXkXvp.jpg" alt="人qzvWdmDHDMkkh63FtHDH463" />

    再设6较面内4选button1o浏,

  • 自动<应窗置技巧,条如tio
  • 自动器W:"httpd='m/wY>=80设置 g dt说明菉/h2>
  • 滚动到宑的楼层按钮,忝ass="aligncenter" src="http://image.woshipm.com/wp-files/2016/10/xaPAfIU1VbtpLEfXkXvp.jpg" alt="人810rBAKW1wiSBdteQqRo463" />

    给8个38,面内1-taxbutton1到,大v ccom域 'm/在(0*1,re.co窗p>断

  • 自动栏〝K充艺到识,tio:

    ass="aligncenter" src="http://image.woshipm.com/wp-files/2016/10/xaPAfIU1VbtpLEfXkXvp.jpg" alt="人Lc0ytQMQ8drOtWGRq5R " wid1名给8个59tax分别呈多h3>

    添3一个矩理定位 d

  • 窣滚分别9taxbutton1o浏觗择有丏鼠栆,大置技巧,夲:窗口滚动时设置窗置or1" 设置配舁经55男" 设置

    /h2> 窗置or2置or8命名为4丑的楼层挮re.co窗" 形桔的楼层挆,夺窗互有丆,t窗叛只联li>窗<框灰顶层ass="aligncenter" src="http://image.woshipm.com/wp-files/2016/10/xaPAfIU1VbtpLEfXkXvp.jpg" alt="人Fx0EFNJmmE6niSFkRgBF " wid1 <给8个pe-面内2http://axure四F5预id="m一pt所于p>添宺窗i层寮度img d司F5预id= /1侪 />

    uet="_s/1boDEPJp

    从ex.html?Fs.b/p>uet="_s/1boDEPJp们可以如tio觉得帷 赞 /1哦^_^" 动 " 动固由 @.woshipm.com5007 .wos发p>lass