Ui design and project management ui

Ui design and project management ui

This is a very creative Card Project Management Interface, uidesign effect. In this uidesign, projects are stacked on the screen in the form of cards. when a project is clicked, the project picture is enlarged in full screen, scroll down to view the Project Introduction Information.

The project management interface also provides a full-screen navigation menu. You can use the hamburger icon in the upper-right corner to trigger the full-screen menu.

Download Online Preview source code

Method of use: HTML Structure

The HTML structure of the chip project management interface is divided into three parts:.cd-nav-triggerIs the trigger button of the full screen menu,nav.cd-primary-navIs a full-screen navigation menu,.cd-projects-containerIs the container of the unordered project list.

Each project containsdiv.cd-titleElement anddiv.cd-project-infoElement. The project image is set.cd-title::beforeThe background image of the pseudo element.

<Header> <a href = "#0" class = "cd-logo">  </a> <button class = "cd- nav-trigger "> Menu <span aria-hidden =" true "class =" cd-icon "> </span> </button> CSS style
div.cd-project-infoThe element (project information) is set to a height and relative location of 100%. Each individual project uses absolute positioning, and sets a 100% height and is placed in their parent container.cd-project-info. In the beginning, they are stacked together.
The second and third projects are used.translateYProperties move down along the Y axis, respectively.cd-project-infoThe height is 1/3 and 2/3. In this way, the three items are displayed in 1/3 of the same screen.
.cd-projects-container {  height: 100%;  position: relative;  overflow: hidden;}.cd-projects-container .single-project {  position: absolute;  top: 0px;  left: 0px;  height: 100%;  width: 100%;  transition: transform 0.4s;}.cd-projects-container .single-project:nth-of-type(2) {  transform: translateY(33.3333333333%);}.cd-projects-container .single-project:nth-of-type(3) {  transform: translateY(66.6666666667%);}                            
.cd-title(Project title) is set to 33.33% (1/3 height of the viewport), and its pseudo element.cd-title::beforeSet to 300%, which is equal to the height of the view.
. Cd-title {height: 33.3333333333% ;}. cd-title: before {/* background image */content: ''; position: absolute; top: 0; left: 0; height: 300%; width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover ;}. single-project: nth-of-type (1 ). cd-title: before {background-image: url (.. /img/img-1.jpg );}
When a project is selected.selectedClass, which appliestranslateY(0)Conversion. At the same time, move the sibling element of the project outside the screentranslateY(100%)So that the entire screen is fully occupied.
. Cd-projects-container. single-project.selected {/* selected project */transform: translateY (0);}. cd-projects-container. single-project.selected ~ Li {/* hide other projects */transform: translateY (100% );}
For.cd-project-info(Project information), it has a height of 100%,overflow: autoAttribute (so that it can be rolled), which is placed in the parent Element.single-project. Its::beforeA pseudo-element is a blank placeholder, which is equal to the width and height of the screen view. It enables full screen display at the beginning of the project image, instead of beingcontent-wrapper.
. Cd-project-info {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; opacity: 0; visibility: hidden; transition: opacity 0.4 s, visibility 0.4 s ;}. cd-project-info: before {/* use and placeholder, project image */content: ''; display: block; height: 100%; width: 100%; pointer-events: none ;}. cd-project-info. content-wrapper {position: relative; z-index: 2; padding: 2em 0 3em; background-color: # FFFFFF ;}. selected. cd-project-info {opacity: 1; visibility: visible; transition: opacity 0 s, visibility 0 s ;}
For full-screen navigation menus.cd-primary-navElements are placed in.cd-projects-container. When the user clicks.cd-nav-triggerAfter the buttons, all items are moved to the bottom of the screen, and the full-screen navigation menu is displayed.
.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
JQuery is used to listen to this uidesign..cd-nav-triggerAnd.single-projectClick Event on the element, and add and remove the corresponding class for the corresponding element.