Collapsible menu using CSS transitions

Developer
Aurer
Size
3,333 Kb
Views
46,552
  1. Collapsible menu using CSS transitions Previews
  2. Collapsible menu using CSS transitions HTML Codes
  3. Collapsible menu using CSS transitions CSS Codes
  4. Collapsible menu using CSS transitions JS Codes

How do I make an collapsible menu using css transitions?

Using CSS transitions with cubic-bezier easing to produce a bouncy effect.. What is a collapsible menu using css transitions? How do you make a collapsible menu using css transitions? This script and codes were developed by Aurer on 03 August 2022, Wednesday.

Collapsible menu using CSS transitions Previews
IQ Test

Collapsible menu using CSS transitions - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Collapsible menu using CSS transitions</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>Collapsible menu using CSS transitions</h1> <nav class="crumbs"> <button>Menu (up to 5 items)</button> <ul> <li><a href="">Suspendisse feugiat</a></li> <li><a href="">In auctor lobortis lacus</a></li> <li><a href="">Fusce ac felis sit amet ligula</a></li> <li><a href="">Fusce neque</a></li> <li><span>In ac felis quis tortor malesuada pretium</span></li> </ul> </nav> <nav class="crumbs alternating"> <button>Menu</button> <ul> <li><a href="">Suspendisse feugiat</a></li> <li><a href="">In auctor lobortis lacus</a></li> <li><a href="">Fusce ac felis sit amet ligula</a></li> <li><a href="">Fusce neque</a></li> <li><a href="">Suspendisse feugiat</a></li> <li><a href="">In auctor lobortis lacus</a></li> <li><a href="">Fusce ac felis sit amet ligula</a></li> <li><a href="">Fusce neque</a></li> <li><span>In ac felis quis tortor malesuada pretium</span></li> </ul> </nav>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Collapsible menu using CSS transitions - Script Codes CSS Codes

body { background: #eee; padding: 1em;
}
.page { max-width: 600px; margin: auto;
}
.crumbs { margin-bottom: 1em;
}
.crumbs button { background: #015581; color: #fff; border: none; padding: .5em; outline: none;
}
.crumbs button:after { content: " \25BC";
}
.crumbs.active button:after { content: " \25B2";
}
.crumbs ul { padding: 0; margin: 0;
}
.crumbs li { list-style: none; background: #009FD6; padding: 0 .5em; padding-right: 25px; color: #fff; position: relative; line-height: 0; -webkit-transition: all 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045); transition: all 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.crumbs.active li { padding-top: .5em; padding-bottom: .5em; line-height: 1.2; -webkit-transition: all 0.2s cubic-bezier(0.06, 0.91, 0.23, 1.435); transition: all 0.2s cubic-bezier(0.06, 0.91, 0.23, 1.435);
}
.crumbs li a,
.crumbs li span { color: inherit; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crumbs li:after { content: ''; border: 0px solid transparent; border-width: 0px; border-top-color: #009FD6; position: absolute; bottom: 0; right: 15px; z-index: 10; -webkit-transition: all 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045); transition: all 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.crumbs li:nth-child(2) { background: #0088b7;
}
.crumbs li:nth-child(2):after { border-top-color: #0088b7;
}
.crumbs li:nth-child(3) { background: #007299;
}
.crumbs li:nth-child(3):after { border-top-color: #007299;
}
.crumbs li:nth-child(4) { background: #005b7a;
}
.crumbs li:nth-child(4):after { border-top-color: #005b7a;
}
.crumbs li:nth-child(5) { background: #00445c;
}
.crumbs li:nth-child(5):after { border-top-color: #00445c;
}
.crumbs li:last-child:after { border: none;
}
.crumbs.alternating li:nth-child(2n+1) { background: #009FD6;
}
.crumbs.alternating li:nth-child(2n+1):after { border-top-color: #009FD6;
}
.crumbs.alternating li:nth-child(2n) { background: #0088b7;
}
.crumbs.alternating li:nth-child(2n):after { border-top-color: #0088b7;
}
.crumbs.active li:after { border-width: 15px; bottom: -29px; right: 1px; -webkit-transition: all 0.2s cubic-bezier(0.06, 0.91, 0.23, 1.435); transition: all 0.2s cubic-bezier(0.06, 0.91, 0.23, 1.435);
}

Collapsible menu using CSS transitions - Script Codes JS Codes

// Toggle class to show menu
$('.crumbs button').on('click', function(){ $(this).parent().toggleClass('active');
})
// Show the menus just for the demo
$('.crumbs').each(function(i,o){ setTimeout(function(){ $(o).addClass('active'); }, (i+1)*500);
})
Collapsible menu using CSS transitions - Script Codes
Collapsible menu using CSS transitions - Script Codes
Home Page Home
Developer Aurer
Username aurer
Uploaded August 03, 2022
Rating 3
Size 3,333 Kb
Views 46,552
Do you need developer help for Collapsible menu using CSS transitions?

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
Learning canvas drawing
JS Gradient
CSS cube experiment
Collapsing list indicator animation
Update manager experimental UI
Homepage layout
Pagination
Laravel AutoSchema Mockup
Fixed banners and parallax backgrounds
SVG Loading icons
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!