.cd-primary-nav { position: absolute; top: 0; left: 0; /* height = (100% - 9%) - 9% is the space taken by the projects when the navigation is open */ height: 91%; width: 100%; overflow: auto; opacity: 0; } .cd-primary-nav ul { transform: translateY(50px); transition: transform 0.4s; } .cd-primary-nav.nav-open { opacity: 1; } .cd-primary-nav.nav-open ul { transform: translateY(0); } .cd-projects-container.nav-open .single-project { box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); transform: translateY(91%); } .cd-projects-container.nav-open .single-project:nth-of-type(2) { transform: translateY(94%); } .cd-projects-container.nav-open .single-project:nth-of-type(3) { transform: translateY(97%); }
JavaScript
该UI设计中使用jQuery来监听.cd-nav-trigger和.single-project元素上的点击事件，并为相应的元素添加和移除相应的class。