Cards Menu

Developer
Mikita
Size
4,611 Kb
Views
6,072
  1. Cards Menu Previews
  2. Cards Menu HTML Codes
  3. Cards Menu CSS Codes
  4. Cards Menu JS Codes

How do I make an cards menu?

Pure css implementation of the concept: https://dribbble.com/shots/2389505-Cards-Menu-Concept. What is a cards menu? How do you make a cards menu? This script and codes were developed by Mikita on 19 January 2023, Thursday.

Cards Menu Previews
IQ Test

Cards Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cards Menu</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='menu' id='menu'> <input checked class='menu__trigger menu__trigger_main' id='trigger-main' name='trigger' type='radio'> <label class='menu__close' for='trigger-projects'></label> <input class='menu__trigger' id='trigger-contact' name='trigger' type='radio'> <div class='menu__item menu__item_contact'> <label class='menu__in' for='trigger-contact'></label> <label class='menu__out' for='trigger-main'></label> <header class='menu__header'> <h2 class='menu__title'> Contact </h2> </header> <div class='menu__container'></div> </div> <input class='menu__trigger' id='trigger-about' name='trigger' type='radio'> <div class='menu__item menu__item_about'> <label class='menu__in' for='trigger-about'></label> <label class='menu__out' for='trigger-main'></label> <header class='menu__header'> <h2 class='menu__title'> About </h2> <div class='menu__container'></div> </header> </div> <input class='menu__trigger' id='trigger-team' name='trigger' type='radio'> <div class='menu__item menu__item_team'> <label class='menu__in' for='trigger-team'></label> <label class='menu__out' for='trigger-main'></label> <header class='menu__header'> <h2 class='menu__title'> Team </h2> <div class='menu__container'></div> </header> </div> <input class='menu__trigger' id='trigger-projects' name='trigger' type='radio'> <div class='menu__item menu__item_projects'> <label class='menu__in' for='trigger-projects'></label> <label class='menu__out' for='trigger-main'></label> <header class='menu__header'> <h2 class='menu__title'> Projects </h2> <div class='menu__container'></div> </header> </div> <div class='menu__bg'></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Cards Menu - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body { background: #1c182f; font: 14px/1.2 'Open Sans', helvetica, sans-serif;
}
.menu { height: 480px; width: 280px; border-radius: 6px; overflow: hidden; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.menu__bg { -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; background: #cddbee; width: 100%; height: 100%; position: absolute; z-index: 1;
}
.menu__inner { background: #cddbee; height: 100%; width: 100%; border-radius: 6px;
}
.menu__trigger { opacity: 0; width: 0; height: 0; position: absolute;
}
.menu__trigger:checked ~ .menu__close { opacity: 1; -webkit-transform: rotate(0) translate(0, 0); transform: rotate(0) translate(0, 0);
}
.menu__trigger:checked ~ .menu__bg { opacity: 1;
}
.menu__trigger:checked ~ .menu__item_contact { -webkit-transform: translate(7%, 12.5%); transform: translate(7%, 12.5%);
}
.menu__trigger:checked ~ .menu__item_about { -webkit-transform: translate(14%, 25%); transform: translate(14%, 25%);
}
.menu__trigger:checked ~ .menu__item_team { -webkit-transform: translate(21%, 37.5%); transform: translate(21%, 37.5%);
}
.menu__trigger:checked ~ .menu__item_projects { -webkit-transform: translate(28%, 50%); transform: translate(28%, 50%);
}
.menu__trigger:checked:not(.menu__trigger_main) ~ .menu__bg { opacity: 0;
}
.menu__trigger:checked:not(.menu__trigger_main) ~ .menu__item_contact { -webkit-transform: translate(100%, 12.5%); transform: translate(100%, 12.5%);
}
.menu__trigger:checked:not(.menu__trigger_main) ~ .menu__item_about { -webkit-transform: translate(100%, 25%); transform: translate(100%, 25%);
}
.menu__trigger:checked:not(.menu__trigger_main) ~ .menu__item_team { -webkit-transform: translate(100%, 37.5%); transform: translate(100%, 37.5%);
}
.menu__trigger:checked:not(.menu__trigger_main) ~ .menu__item_projects { -webkit-transform: translate(100%, 50%); transform: translate(100%, 50%);
}
.menu__trigger:checked:not(.menu__trigger_main) + .menu__item { -webkit-transform: translate(0, 0); transform: translate(0, 0);
}
.menu__trigger:checked:not(.menu__trigger_main) + .menu__item .menu__header { padding-left: 60px;
}
.menu__trigger:checked:not(.menu__trigger_main) + .menu__item .menu__container { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);
}
.menu__trigger:checked:not(.menu__trigger_main) + .menu__item .menu__in { width: 0; height: 0;
}
.menu__trigger:checked:not(.menu__trigger_main) + .menu__item .menu__out { opacity: 1; pointer-events: all;
}
.menu__item { -webkit-transition: -webkit-transform .2s ease-in-out; transition: -webkit-transform .2s ease-in-out; transition: transform .2s ease-in-out; transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out; position: absolute; padding-bottom: 20px; width: 100%; height: 100%; border-radius: 6px; top: 0; left: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0);
}
.menu__item_contact { background: #563761; color: #f3825f; z-index: 5;
}
.menu__item_about { background: #a7425c; color: #ffe26f; z-index: 10;
}
.menu__item_team { background: #f3825f; color: #563761; z-index: 15;
}
.menu__item_projects { background: #ffe26f; color: #a7425c; z-index: 20;
}
.menu__header { -webkit-transition: padding .2s ease-in-out; transition: padding .2s ease-in-out; padding: 20px 7%; height: 56px;
}
.menu__title { text-transform: uppercase; font-weight: 500;
}
.menu__container { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; opacity: 0; padding: 0 20px; -webkit-transform: translateY(20px); transform: translateY(20px); overflow: auto; max-height: calc(100% - 56px);
}
.menu__close { -webkit-transition: all .2s linear; transition: all .2s linear; z-index: 2; opacity: 0; -webkit-transform: rotate(90deg) translate(20px, 20px); transform: rotate(90deg) translate(20px, 20px); height: 20px; width: 20px; top: 20px; left: 20px; cursor: pointer; position: absolute; overflow: hidden;
}
.menu__close:before, .menu__close:after { content: ''; position: absolute; height: 2px; width: 20px; margin: -1px 0 0 -10px; top: 50%; left: 50%; background: #7097B0;
}
.menu__close:before { -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.menu__close:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
.menu__in { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1;
}
.menu__out { -webkit-transition: opacity .2s linear; transition: opacity .2s linear; position: absolute; cursor: pointer; opacity: 0; pointer-events: none; width: 20px; height: 16px; top: 20px; left: 20px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; z-index: 2;
}
.menu__out:before { content: ''; position: absolute; left: 0; top: 5px; width: 100%; height: 2px; background: currentColor;
}

Cards Menu - Script Codes JS Codes

/**
Pure css implementation of the concept:
https://dribbble.com/shots/2389505-Cards-Menu-Concept
**/
Cards Menu - Script Codes
Cards Menu - Script Codes
Home Page Home
Developer Mikita
Username MikitaLisavets
Uploaded January 19, 2023
Rating 3
Size 4,611 Kb
Views 6,072
Do you need developer help for Cards Menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mikita (MikitaLisavets) Script Codes
Name
Accordion card
Buttons
Tree search
Target scroll callback
Water Tracker
Blur
Demon deer
Math Trick
Simple pure CSS3 donut chart
Angular chart directive
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!