html 无序列表ui,简洁的全屏项目列表滑动面板UI设计

这是一款简洁时尚的全屏项目列表滑动面板UI设计效果。该项目菜单列表开始以缩略图的方式全屏垂直排列，当用户点击了相应的缩略图之后，其它缩略图面板向上滑动，将该项目的内容全部显露出来。

使用方法

HTML结构

该全屏项目列表滑动面板的HTML结果包括2个无序列表。ul.cd-projects-previews是项目缩略图，ul.cd-projects是项目明细。另外，nav.cd-primary-nav是一个全屏的导航菜单。

• Project 1

  Brief description of the project here

• Project 1

  Brief description of the project here

Scroll

• Navigation
• The team

CSS样式

在小屏幕设备中，每一个项目预览图的

元素的宽度等于整个视口的宽度，高度等于1/4视口的高度(因为DEMO中有4个子项目)。项目预览图片使用它们的子元素 来设置背景图片，它的高度等于整个视口的高度，并通过translate将它们分别移动到合适的位置上。

.cd-projects-previews li {

height: 25%;

width: 100%;

overflow: hidden;

transition: transform 0.5s;

}

.cd-projects-previews a {

display: block;

height: 100vh;

width: 100%;

opacity: 0;

transition: opacity 0.5s;

transform: translateY(0%);

}

.cd-projects-previews li:nth-of-type(2) a {

transform: translateY(-25%);

}

.cd-projects-previews li:nth-of-type(3) a {

transform: translateY(-50%);

}

.cd-projects-previews li:nth-of-type(4) a {

transform: translateY(-75%);

}

对于项目明细.cd-projects > li，每一个列表项都设置为绝对定位，并且宽度和高度都等于视口的宽度和高度，默认它们是隐藏的。

.cd-projects > li {

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

opacity: 0;

transition: opacity 0.3s;

}

当用户选择了一个项目之后，相应的.cd-projects > li会被添加.selected class，同时会为项目的预览图添加.slide-out class。

.cd-projects-previews li.slide-out {

transform: translateX(-100%);

}

.cd-projects > li.selected {

z-index: 1;

opacity: 1;

transition: opacity 0s;

}

在大屏幕设备中(视口大于1024像素)，项目预览图片的高度被设置为100%视口高度，宽度等于1/4视口宽度，同时向左移动

@media only screen and (min-width: 1024px) {

.cd-projects-previews li {

display: inline-block;

height: 100%;

width: 25%;

float: left;

}

.cd-projects-previews li.slide-out {

transform: translateY(-100%);

}

.cd-projects-previews a {

/* width equal to window width */

width: 400%;

}

.cd-projects-previews li:nth-of-type(2) a {

transform: translateX(-25%);

}

.cd-projects-previews li:nth-of-type(3) a {

transform: translateX(-50%);

}

.cd-projects-previews li:nth-of-type(4) a {

transform: translateX(-75%);

}

}

对于全屏导航菜单，.cd-primary-nav被放置在.cd-projects-container中，当用户点击了.cd-nav-trigger，项目预览图片会被添加.slide-out class。

.cd-primary-nav {

position: absolute;

z-index: 1;

top: 0;

left: 0;

height: 100%;

width: 100%;

overflow: auto;

text-align: center;

opacity: 0;

transition: opacity 0.6s;

}

.cd-primary-nav.nav-visible {

opacity: 1;

}

JavaScript

该UI设计中使用jQuery来检测项目预览图片的点击事件和.cd-nav-trigger的点击事件。当用户选择了一个项目或打开了主导航菜单，slideToggleProjects()函数会处理相应的项目滑入滑出效果，而makeUniqueRandom()函数则用于获取1-4之间的随机数。

function slideToggleProjects(projectsPreviewWrapper, projectIndex, index, bool) {

var randomProjectIndex = makeUniqueRandom();

if( index < numRandoms - 1 ) {

projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out', bool);

setTimeout( function(){

//animate next preview project

slideToggleProjects(projectsPreviewWrapper, projectIndex, index + 1, bool);

}, 150);

} else {

//this is the last project preview to be animated

projectsPreviewWrapper.eq(randomProjectIndex)

.toggleClass('slide-out', bool)

.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){

// ...

animating = false;

});

}

}