Collapsing list indicator animation

Developer
Aurer
Size
4,069 Kb
Views
34,408
  1. Collapsing list indicator animation Previews
  2. Collapsing list indicator animation HTML Codes
  3. Collapsing list indicator animation CSS Codes
  4. Collapsing list indicator animation JS Codes

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 Previews
IQ Test

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');	};
});
Collapsing list indicator animation - Script Codes
Collapsing list indicator animation - Script Codes
Home Page Home
Developer Aurer
Username aurer
Uploaded August 03, 2022
Rating 4.5
Size 4,069 Kb
Views 34,408
Do you need developer help for Collapsing list indicator animation?

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!

Aurer (aurer) Script Codes
Name
SVG Loading icons
Laravel AutoSchema Mockup
A Pen by Aurer
Vue form theme
Squished forms mockup
JS Gradient
A responsive table
IOS style checkbox concept
Collapsible menu using CSS transitions
Fixed banners and parallax backgrounds
Create amazing sales emails 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!