Accordion Nav

Developer
Katy DeCorah
Size
4,490 Kb
Views
66,792
  1. Accordion Nav Previews
  2. Accordion Nav HTML Codes
  3. Accordion Nav CSS Codes

How do I make an accordion nav?

What is a accordion nav? How do you make a accordion nav? This script and codes were developed by Katy DeCorah on 28 July 2022, Thursday.

Accordion Nav Previews
IQ Test

Accordion Nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accordion Nav</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/5e3594c5f394b457f8b8ffbb4.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Montserrat'>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { font-family: "Montserrat",sans-serif; font-weight: normal; font-size: 100%; line-height: 1.618; background: #ddd;
}
.nav { width: 15em;
}
.nav-link { display: block; color: #fff; text-decoration: none; text-align: center; text-transform: uppercase; transition: background .2s linear;
}
.nav-item { display: block; width: 15em; position: relative; transition: transform 0.175s ease-in-out, height 0.35s ease-in-out;
}
.nav-item .nav-link { background: #3399DB; padding: 0.7em 0; border: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 0;
}
.nav-item .nav-link:hover { background: #cc6624;
}
.nav-item:hover .nav-link { background: #cc6624;
}
.nav-item:hover .nav-item { width: 15em; height: 3em;
}
.nav-item:hover .nav-item:nth-child(even), .nav-item:hover .nav-item:nth-child(odd) { transform: skew(0);
}
.nav-item:hover .nav-item .nav-link { padding: 0.7em 0;
}
.nav-item:hover .nav-item .nav-link:hover { background: #de8145;
}
.nav-item:hover .accordion:before { content: "\f106";
}
.accordion { position: relative; left: 0;
}
.accordion:before { content: "\f107"; position: absolute; top: -2.25em; right: 1em; font-family: FontAwesome; font-smoothing: antialiased; color: #fff; background: rgba(255, 255, 255, 0.05); border-radius: 100%; display: block; width: 1.5em; height: 1.5em; line-height: 1.5; vertical-align: middle; text-align: center; box-shadow: inset 0 0.1em 0.1em rgba(0, 0, 0, 0.3);
}
.accordion .nav-item { height: 0; overflow: hidden;
}
.accordion .nav-item:nth-child(even) { transform: skew(45deg);
}
.accordion .nav-item:nth-child(odd) { transform: skew(-45deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul class='nav'> <li class='nav-item'> <a class='nav-link' href='#'>Home</a> </li> <li class='nav-item'> <a class='nav-link' href='#'>About</a> <ul class='accordion'> <li class='nav-item'> <a class='nav-link' href='#'>History</a> </li> <li class='nav-item'> <a class='nav-link' href='#'>Our Team</a> </li> <li class='nav-item'> <a class='nav-link' href='#'>Locations</a> </li> </ul> </li> <li class='nav-item'> <a class='nav-link' href='#'>Clients</a> </li> <li class='nav-item'> <a class='nav-link' href='#'>Contact Us</a> <ul class='accordion'> <li class='nav-item'> <a class='nav-link' href='#'>Hay!</a> </li> <li class='nav-item'> <a class='nav-link' href='#'>This handles</a> </li> <li class='nav-item'> <a class='nav-link' href='#'>multiple</a> </li> <li class='nav-item'> <a class='nav-link' href='#'>instances</a> </li> </ul> </li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Accordion Nav - Script Codes CSS Codes

body { font-family: "Montserrat",sans-serif; font-weight: normal; font-size: 100%; line-height: 1.618; background: #ddd;
}
.nav { width: 15em;
}
.nav-link { display: block; color: #fff; text-decoration: none; text-align: center; text-transform: uppercase; transition: background .2s linear;
}
.nav-item { display: block; width: 15em; position: relative; transition: transform 0.175s ease-in-out, height 0.35s ease-in-out;
}
.nav-item .nav-link { background: #3399DB; padding: 0.7em 0; border: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 0;
}
.nav-item .nav-link:hover { background: #cc6624;
}
.nav-item:hover .nav-link { background: #cc6624;
}
.nav-item:hover .nav-item { width: 15em; height: 3em;
}
.nav-item:hover .nav-item:nth-child(even), .nav-item:hover .nav-item:nth-child(odd) { transform: skew(0);
}
.nav-item:hover .nav-item .nav-link { padding: 0.7em 0;
}
.nav-item:hover .nav-item .nav-link:hover { background: #de8145;
}
.nav-item:hover .accordion:before { content: "\f106";
}
.accordion { position: relative; left: 0;
}
.accordion:before { content: "\f107"; position: absolute; top: -2.25em; right: 1em; font-family: FontAwesome; font-smoothing: antialiased; color: #fff; background: rgba(255, 255, 255, 0.05); border-radius: 100%; display: block; width: 1.5em; height: 1.5em; line-height: 1.5; vertical-align: middle; text-align: center; box-shadow: inset 0 0.1em 0.1em rgba(0, 0, 0, 0.3);
}
.accordion .nav-item { height: 0; overflow: hidden;
}
.accordion .nav-item:nth-child(even) { transform: skew(45deg);
}
.accordion .nav-item:nth-child(odd) { transform: skew(-45deg);
}
Accordion Nav - Script Codes
Accordion Nav - Script Codes
Home Page Home
Developer Katy DeCorah
Username katydecorah
Uploaded July 28, 2022
Rating 4.5
Size 4,490 Kb
Views 66,792
Do you need developer help for Accordion Nav?

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!

Katy DeCorah (katydecorah) Script Codes
Name
Bowl of Trees
Google Font Explorer
Haml Calendar
Twinner Spinner
BLOOD
END by Catt
Snowflaker 2016
CSS Haiku - Constellations
Food by nos
Rabbit by Beard Chicken
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!