CSS Accordion Menu

Developer
Ken Chung
Size
2,603 Kb
Views
36,432
  1. CSS Accordion Menu Previews
  2. CSS Accordion Menu HTML Codes
  3. CSS Accordion Menu CSS Codes

How do I make an css accordion menu?

What is a css accordion menu? How do you make a css accordion menu? This script and codes were developed by Ken Chung on 10 August 2022, Wednesday.

CSS Accordion Menu Previews
IQ Test

CSS Accordion Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Accordion Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CSS Accordion Menus</title> <link rel="stylesheet" href="CSS/style.css"/> <link rel="stylesheet" href="CSS/accordion.css"/> </head> <body> <div class="container"> <div class="headline"> <h1>Frequently Asked Questions</h1> </div> </div> <div class="tab-group"> <!-- start tab-1 --> <div class="tab"> <input id="tab-1" type="checkbox" name="tabs"> <label for="tab-1" >Label One</label> <div class="tab-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.</p> </div> </div> <!-- end tab-1 --> <!-- start tab-2 --> <div class="tab"> <input id="tab-2" type="checkbox" name="tabs"> <label for="tab-2" >Label Two</label> <div class="tab-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.</p> </div> </div> <!-- end tab-2 --> <!-- start tab-3 --> <div class="tab"> <input id="tab-3" type="checkbox" name="tabs"> <label for="tab-3" >Label Three</label> <div class="tab-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.</p> </div> </div> <!-- end tab-3 --> <!-- start tab-4 --> <div class="tab"> <input id="tab-4" type="checkbox" name="tabs"> <label for="tab-4" >Label Four</label> <div class="tab-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.</p> </div> </div> <!-- end tab-4 --> <!-- start tab-5 --> <div class="tab"> <input id="tab-5" type="checkbox" name="tabs"> <label for="tab-5" >Label Five</label> <div class="tab-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.</p> </div> </div> <!-- end tab-5 --> <!-- start tab-6 --> <div class="tab"> <input id="tab-6" type="checkbox" name="tabs"> <label for="tab-6" >Label Six</label> <div class="tab-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.</p> </div> </div> <!-- end tab-5 --> </div> </body>
</html>
</body>
</html>

CSS Accordion Menu - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Audiowide);
/* BASE STYLES */
html { box-sizing: border-box; font-family: Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.4;
}
html,
body { height: 100%; margin: 0; padding: 0; width: 100%;
}
body:before {	content: ""; display: table; clear: both;
}
body { color: #797e83; font-size: 16px;	margin: 0; line-height: 1.5;
}
h1 {	font-size: 1.75em;
}
ul,
li { margin: 0; padding: 0; list-style-type: none;
}
a { color: #656a6e; text-decoration: none; font-weight: 400;
}
.container {	width: 90%;	margin: auto;
}
*,
*:before,
*:after { box-sizing: inherit; }
/********************************
Accordion Menu
********************************/
.headline { text-align: center; margin: 2.5em auto 1em;
}
.tab-group { background: #eee;	margin: 2em auto;	max-width: 40em;	width: 100%;
}
.tab {	position: relative; width: 100%;
}
.tab input {	left: 0;	position: absolute;	top: 0;	z-index: -999;
}
.tab label {	background: #72d2c6;	color: #fff;	cursor: pointer;	display: block;	font-weight: bold;	line-height: 3;	margin-bottom: 0.5em;	padding-left: 0.5em;	transition: letter-spacing 0.55s ;
}
.tab input:focus + label,
.tab label:hover{	background: #85D8CE;	letter-spacing: 1px;
}
.tab-content {	max-height: 0;	overflow: hidden;	transition: all 0.35s;
}
.tab-content p {	margin: 1em 0;
}
/* open the tab when label is checked */
.tab input:checked ~ .tab-content {	max-height: 6.25em;
}
/*.tab > input:not(:focus) ~ .tab-content {	max-height: 0;	transition: all .75s cubic-bezier(0.19, 1, 0.22, 1) .15s;
}*/
CSS Accordion Menu - Script Codes
CSS Accordion Menu - Script Codes
Home Page Home
Developer Ken Chung
Username kenc96
Uploaded August 10, 2022
Rating 3
Size 2,603 Kb
Views 36,432
Do you need developer help for CSS Accordion 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!

Ken Chung (kenc96) Script Codes
Name
Free Code Camp - Basic Front-End Development Project 1
Fixed Navigation Using JQuery
Hand-Coded Sticky Footer From Scratch
Free Code Camp - Basic Front-End Development Project 2
Create amazing video scripts 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!