Collapsing list indicator animation
How do I make an collapsing list indicator animation?
Idea for styling the indicator on a collapsing list. What is a collapsing list indicator animation? How do you make a collapsing list indicator animation? This script and codes were developed by Aurer on 03 August 2022, Wednesday.
Collapsing list indicator animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Collapsing list indicator animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="page"> <h1>Collapsing list</h1> <h2>Version one</h2> <ul class="nav nav--primary"> <li class="nav-item nav-item--primary"> <div class="nav-label">Packages <svg class="nav-indicator" width="22" height="22" viewbox="0 0 26 26"> <path d="M11,1 L21,11 L11,21 L1,11"></path> </svg> </div> <ul class="nav nav--secondary"> <li class="nav-item"><a href="#">Color</a></li> <li class="nav-item"><a href="#">Write</a></li> <li class="nav-item"><a href="#">Map</a></li> <li class="nav-item"><a href="#">Linter</a></li> <li class="nav-item"><a href="#">Picker</a></li> <li class="nav-item"><a href="#">Emmet</a></li> </ul> </li> <li class="nav-item nav-item--primary"> <div class="nav-label">Themes <svg class="nav-indicator" width="22" height="22" viewbox="0 0 26 26"> <path d="M11,1 L21,11 L11,21 L1,11"></path> </svg> </div> <ul class="nav nav--secondary"> <li class="nav-item"><a href="#">Color</a></li> <li class="nav-item"><a href="#">Write</a></li> <li class="nav-item"><a href="#">Map</a></li> <li class="nav-item"><a href="#">Linter</a></li> <li class="nav-item"><a href="#">Picker</a></li> <li class="nav-item"><a href="#">Emmet</a></li> </ul> </li> <li class="nav-item nav-item--primary"> <div class="nav-label">Documentation <svg class="nav-indicator" width="22" height="22" viewbox="0 0 26 26"> <path d="M11,1 L21,11 L11,21 L1,11"></path> </svg> </div> <ul class="nav nav--secondary"> <li class="nav-item"><a href="#">Color</a></li> <li class="nav-item"><a href="#">Write</a></li> <li class="nav-item"><a href="#">Map</a></li> <li class="nav-item"><a href="#">Linter</a></li> <li class="nav-item"><a href="#">Picker</a></li> <li class="nav-item"><a href="#">Emmet</a></li> </ul> </li> </ul> <h2>Version two</h2> <ul class="nav nav--primary nav--alt"> <li class="nav-item nav-item--primary"> <div class="nav-label">Packages <svg class="nav-indicator nav-indicator--alt" width="22" height="22" viewbox="0 0 26 26"> <path d="M11,1 L21,11 L11,21 L1,11"></path> <path d="M11,1 L1,11 L11,21 L1,11"></path> </svg> </div> <ul class="nav nav--secondary"> <li class="nav-item"><a href="#">Color</a></li> <li class="nav-item"><a href="#">Write</a></li> <li class="nav-item"><a href="#">Map</a></li> <li class="nav-item"><a href="#">Linter</a></li> <li class="nav-item"><a href="#">Picker</a></li> <li class="nav-item"><a href="#">Emmet</a></li> </ul> </li> <li class="nav-item nav-item--primary"> <div class="nav-label">Themes <svg class="nav-indicator nav-indicator--alt" width="22" height="22" viewbox="0 0 26 26"> <path d="M11,1 L21,11 L11,21 L1,11"></path> <path d="M11,1 L1,11 L11,21 L1,11"></path> </svg> </div> <ul class="nav nav--secondary"> <li class="nav-item"><a href="#">Color</a></li> <li class="nav-item"><a href="#">Write</a></li> <li class="nav-item"><a href="#">Map</a></li> <li class="nav-item"><a href="#">Linter</a></li> <li class="nav-item"><a href="#">Picker</a></li> <li class="nav-item"><a href="#">Emmet</a></li> </ul> </li> <li class="nav-item nav-item--primary"> <div class="nav-label">Documentation <svg class="nav-indicator nav-indicator--alt" width="22" height="22" viewbox="0 0 26 26"> <path d="M11,1 L21,11 L11,21 L1,11"></path> <path d="M11,1 L1,11 L11,21 L1,11"></path> </svg> </div> <ul class="nav nav--secondary"> <li class="nav-item"><a href="#">Color</a></li> <li class="nav-item"><a href="#">Write</a></li> <li class="nav-item"><a href="#">Map</a></li> <li class="nav-item"><a href="#">Linter</a></li> <li class="nav-item"><a href="#">Picker</a></li> <li class="nav-item"><a href="#">Emmet</a></li> </ul> </li> </ul>
</div> <script src="js/index.js"></script>
</body>
</html>
Collapsing list indicator animation - Script Codes CSS Codes
body { padding: 2em; background-color: #f5f5f5; color: #444;
}
.page { max-width: 30em; margin: auto;
}
.page h1 { text-align: center;
}
.nav { list-style-type: none; margin: 0; padding: 0;
}
.nav .nav-item { padding: 1em 1em; position: relative; overflow: hidden; cursor: pointer;
}
.nav .nav-item + .nav-item { border-top: 1px solid #ddd;
}
.nav .nav-item a { text-decoration: none; color: #12c777;
}
.nav .nav-item a:hover,
.nav .nav-item a:focus { color: #c76712;
}
.nav .nav-item .nav-indicator { position: absolute; right: 1em;
}
.nav--primary { border: 1px solid #ddd; margin-bottom: 2em;
}
.nav--primary .nav-item.is-active path { stroke-dashoffset: -15;
}
.nav--secondary { overflow: hidden; margin-top: 1em; will-change: height; -webkit-transition: height 0.3s, margin-top 0.3s; transition: height 0.3s, margin-top 0.3s;
}
.is-collapsed .nav--secondary { margin-top: 0; height: 0 !important;
}
.nav--secondary .nav-item { padding: .3em 1em;
}
.nav--secondary .nav-item + .nav-item { border: none;
}
.nav--primary svg.nav-indicator path { fill: none; stroke: #aaa; stroke-linecap: round; stroke-width: 2; stroke-dasharray: 29 40; -webkit-transition: stroke-dashoffset 0.3s; transition: stroke-dashoffset 0.3s;
}
.nav--alt svg.nav-indicator--alt { -webkit-transform: translateY(-20%); transform: translateY(-20%); -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s;
}
.nav--alt svg.nav-indicator--alt path { fill: none; stroke: #aaa; stroke-linecap: square; stroke-width: 2; stroke-dasharray: 14 40; stroke-dashoffset: -15; -webkit-transition: stroke-dashoffset 0.3s; transition: stroke-dashoffset 0.3s;
}
.nav--alt .nav-item.is-active svg { -webkit-transform: translateY(0); transform: translateY(0);
}
.nav--alt .nav-item.is-active svg path { stroke-dashoffset: 0;
}
Collapsing list indicator animation - Script Codes JS Codes
'use strict';
var navPrimary = document.querySelector('.nav--primary');
var navItems = document.querySelectorAll('.nav-item--primary');
navItems.forEach(function (item) { var secondary = item.querySelector('.nav--secondary'); if (secondary) { secondary.style.height = secondary.offsetHeight + 'px'; } item.classList.add('is-collapsed'); item.onclick = function () { item.classList.toggle('is-collapsed'); item.classList.toggle('is-active'); };
});
Developer | Aurer |
Username | aurer |
Uploaded | August 03, 2022 |
Rating | 4.5 |
Size | 4,069 Kb |
Views | 34,408 |
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!
Name | Size |
Fixed banners and parallax backgrounds | 3,526 Kb |
Update manager experimental UI | 3,742 Kb |
Menu handle | 3,349 Kb |
ERC Search panels mockup | 4,970 Kb |
Collapsible menu using CSS transitions | 3,333 Kb |
Vue form theme | 3,755 Kb |
Homepage layout | 3,855 Kb |
A Pen by Aurer | 3,919 Kb |
IOS style checkbox concept | 2,656 Kb |
Tomcat chrome extension UI | 2,979 Kb |
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!
Name | Username | Size |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
Price | Catcode | 2,623 Kb |
CSS3 Form | Tusharbandal | 1,836 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
Obligatory CSS3 UI Nav | Romandiaz | 9,017 Kb |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
Fireworks Show | Arianalynn | 3,048 Kb |
Long Shadow Button | Uixcrazy | 3,550 Kb |
TestTube CSS | EZPK | 2,710 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!