html纵向固定导航菜单代码,CSS3单页⾯垂直固定导航
当屏幕⾜够⼩时(如⼿机移动设备)，会在屏幕右下⾓展⽰⼀个图标，触控图标，则会展开导航菜单，点击菜单页⾯会滚动到对应的节点，效果⾮常酷。
HTML
我们的导航条是⼀个⽆序列表ul，包含在nav.cd-vertical-nav内，通过连接a#section1关联到对应的节点。元素button.cd-nav-trigger是⽤来作为⼩屏幕设备上的⽤来触发菜单的按钮。section.cd-section就是⽤来对应导航节点的内容。
Open navigation
垂直固定导航
CSS
HTML结构部署好后，我们要为页⾯添加必要的CSS样式。在⾮常⼩的屏幕下(视图宽度⼩于800px)，我们将.cd-nav-trigger和的位置固定position: fixed在页⾯右下⾓。当点击或者触摸.cd-nav-trigger时，我们使⽤CSS3来做⼀个平滑的过渡动画使之有⼀个展开导航菜单的动画。
.cd-nav-trigger {
display: block;
position: fixed;
z-index: 2;
bottom: 30px;
right: 5%;
}
.cd-vertical-nav {
position: fixed;
z-index: 1;
right: 5%;
bottom: 30px;
transform: scale(0);
transform-origin: right bottom;
transition: transform 0.2s;
}
.cd-vertical-nav.open {
transform: scale(1);
}
那么在⼤的屏幕设备上，我们⾸先是要 Modernizr 来检测当前使⽤的设备是否⽀持触屏，在⾮触控屏上会有⿏标滑上的效果。我们将右侧的垂直导航条设置为固定的⾼度和宽度，并将其固定在页⾯右侧。默认右侧导航之显⽰⼏个圆点，当⿏标滑上圆点时，导航条会打开，可以选择导航菜单。
right: 0;
top: 0;
height: 100vh;
width: 90px;
}
.cd-vertical-nav::before {
/* this is the navigation background */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
transform: translateX(100%);
transition: transform 0.4s;
}
.no-touch .cd-vertical-nav:hover::before,
.touch .cd-vertical-nav::before {
transform: translateX(0);
}
.cd-vertical-nav .label {
display: block;
transform: translateX(100%);
transition: transform 0.4s;
}
.no-touch .cd-vertical-nav:hover .label,
.touch .cd-vertical-nav .label {
transform: translateX(0);
}
}
为了创建圆点和图标，可以使⽤::after和::before来为a元素添加伪类。
position: relative;
padding: 3em 0 0;
margin: 1.4em auto;
}
.cd-vertical-nav a::before,
.cd-vertical-nav a::after {
/* used to create the filled circle and the background icon */ content: '';
position: absolute;
left: 50%;
transition: transform 0.4s 0s;
}
.cd-vertical-nav a::before {
/* filled circle */
top: 0;
height: 32px;
width: 32px;
border-radius: 50%;
background: #eaf2e3;
transform: translateX(-50%) scale(0.25);
}
.cd-vertical-nav a::after {
/* icon */
top: 8px;
height: 16px;
width: 16px;
background: url(../img/cd-nav-icons.svg) no-repeat; transform: translateX(-50%) scale(0);
}
.no-touch .cd-vertical-nav:hover a::before,
.no-touch .cd-vertical-nav:hover a::after,
导航菜单.touch .cd-vertical-nav li:nth-of-type(n) a::before,
.touch .cd-vertical-nav li:nth-of-type(n) a::after {
transform: translateX(-50%) scale(1);
}
}
当然到这⾥效果已经实现了，但是要实现点击导航菜单时页⾯做平滑滚动效果则需要借助jQuery来实
现滚动动画。本例在下载源码包⾥已经打包了包含的全部jQuery代码，请⼤家下载后查看，本⽂不再描述。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。