Folding nav tabs

Developer
Ianchouinard
Size
2,371 Kb
Views
8,096
  1. Folding nav tabs Previews
  2. Folding nav tabs HTML Codes
  3. Folding nav tabs CSS Codes

How do I make an folding nav tabs?

Quick little navigation experiment. . What is a folding nav tabs? How do you make a folding nav tabs? This script and codes were developed by Ianchouinard on 03 December 2022, Saturday.

Folding nav tabs Previews
IQ Test

Folding nav tabs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>folding nav tabs</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <div><h1>Folding Nav Tabs</h1></div> <ul> <li>Tab</li> <li>Tab</li> <li>Tab</li> <li>Tab</li> <li>Tab</li> <li>Tab</li> </ul>
</nav>
</body>
</html>

Folding nav tabs - Script Codes CSS Codes

nav { font-family: 'Open Sans', sans-serif;
}
nav div { background: #deddde; padding: 2.5em 0; z-index: 1; -webkit-box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.3);
}
nav div h1 { font-size: 2.25em; padding: 0 5%;
}
nav ul { z-index: 2; padding: 0 5%;
}
nav ul li { display: inline-block; margin-right: 2.25%; padding: .5em 1em; background: #deddde; cursor: pointer; -webkit-box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.3); transition: all 500ms;
}
nav ul li:hover { background-image: linear-gradient(#deddde, #c8c8c8); box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
}
body { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/[email protected]");
}
Folding nav tabs - Script Codes
Folding nav tabs - Script Codes
Home Page Home
Developer Ianchouinard
Username ianchouinard
Uploaded December 03, 2022
Rating 3
Size 2,371 Kb
Views 8,096
Do you need developer help for Folding nav tabs?

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!

Ianchouinard (ianchouinard) Script Codes
Name
Animated Text Appearance
A form.
Slider Transition Layout Experiment
Working JS Boggle
Ajax load button animation
SVG Gradient fade animation
Background expand on hover transition
Site Mapper
Paint with Canvas and p5. Works on touchscreen.
Css3 3D atom figure
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!