css侧边栏切换效果,时尚响应式侧边栏布局和切换页面动画特效

这是一款非常时尚的jQuery和CSS3侧边栏布局和切换页面动画特效。该侧边栏布局采用响应式设计，在点击了某个菜单项之后，侧边栏的右边部会出现一条全屏高度的进度条。进度条动画之后，相应的页面从左向右平滑的滑出。

制作方法

HTML结构

该侧边栏布局的HTML结构使用一个.cd-main元素来包裹页面的内容。.cd-side-navigation用于包裹侧边栏元素。还有一个#cd-loading-bar用于制作阿波罗右侧的进度条动画。

• Intro

Animated Page Transition #2

Some text here

Scroll Down

CSS样式

侧边栏.cd-side-navigation使用固定定位方式，它的高度设置为100%，同时设置overflow:hidden;。并且它的子元素

• 设置了一个overflow-y: auto属性，这样，如果侧边栏的内容比页面的高度要高，可以在内部滚动侧边栏。

为了创建在鼠标滑过菜单项时出现在右侧的线条，该特效中使用a::after伪元素来制作它。它们采用绝对定位，4像素宽，和top:0;，right:-4px;。

这里要注意的是每一个列表项元素的宽度使用calc(100%- 4px)来计算，这样可以使a::after伪元素放置在.cd-side-navi