当前位置:Gxlcms > html代码 > CSS3单页面垂直固定导航_html/css_WEB-ITnose

CSS3单页面垂直固定导航_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:1人阅读

越来越多的开发者喜欢将单页面尤其像产品介绍页面设计成用一个简单的导航条关联的页面各个重要部分(节点)。本例中,一个页面由多个重要节点组成,在页面一侧会垂直展示多个简单的导航远点,滑上圆点会展示对应节点部分的名称,点击页面会滚动到对应的节点部分,而导航条位置固定不变。

查看演示 下载源码

当屏幕足够小时(如手机移动设备),会在屏幕右下角展示一个图标,触控图标,则会展开导航菜单,点击菜单页面会滚动到对应的节点,效果非常酷。

HTML

我们的导航条是一个无序列表ul,包含在nav.cd-vertical-nav内,通过连接a#section1关联到对应的节点。元素button.cd-nav-trigger是用来作为小屏幕设备上的用来触发菜单的按钮。section.cd-section就是用来对应导航节点的内容。

  

垂直固定导航

scroll down

CSS

HTML结构部署好后,我们要为页面添加必要的CSS样式。在非常小的屏幕下(视图宽度小于800px),我们将.cd-nav-trigger和

人气教程排行