Clipped Navigation
How do I make an clipped navigation?
What is a clipped navigation? How do you make a clipped navigation? This script and codes were developed by Samuel Janes on 26 October 2022, Wednesday.
Clipped Navigation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Clipped Navigation</title> <link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet"> <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='nav'> <a href="#" class='logo'>Logo<span>Here</span></a> <ul class='links'> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Clipped Navigation - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { font-family: "Droid Sans", sans-serif;
}
.logo { text-transform: uppercase; text-decoration: none; color: white;
}
.logo span { font-weight: 700; color: #E3B505;
}
.nav { width: 100%; height: 70px; background: #DB504A; position: fixed; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; padding-right: 0;
}
.nav ul.links { list-style: none; padding: 0; margin: 0; margin-right: -85px;
}
.nav ul.links li { display: inline-flex; height: 70px; width: 150px; clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); transform: translate(-42.5px, 0); position: relative; cursor: pointer; text-align: center; justify-content: center; align-items: center; margin: 0;
}
.nav ul.links li:first-child { transform: translate(0%, 0);
}
.nav ul.links li:last-child { transform: translate(-85px, 0);
}
.nav ul.links li:after { content: ""; width: 100%; height: 100%; position: absolute; bottom: -100%; left: 0; background: white; transition: 0.1s ease-in-out; z-index: -1;
}
.nav ul.links li:hover a, .nav ul.links li.active a { color: #DB504A;
}
.nav ul.links li:hover:after, .nav ul.links li.active:after { bottom: 0;
}
.nav ul.links li a { text-decoration: none; color: white; transition: 0.1s ease-in-out;
}
Clipped Navigation - Script Codes JS Codes
setTimeout( function(){ $("li").first().addClass("active")
}, 250);
setTimeout( function(){ $("li").first().removeClass("active")
}, 2000);
Developer | Samuel Janes |
Username | SamuelJanes |
Uploaded | October 26, 2022 |
Rating | 3 |
Size | 2,966 Kb |
Views | 20,240 |
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!
Name | Size |
Modest Mouse Night on the Sun in CSS | 3,042 Kb |
Queens of the Stone Age Rated R Album Cover in CSS | 2,958 Kb |
Navigation triangle | 2,759 Kb |
CSS only tooltips | 3,273 Kb |
Navigation layout | 3,069 Kb |
Hamburger Menus | 2,520 Kb |
Multi-Step Sign Up Form | 4,177 Kb |
Bottom Right Menu | 2,426 Kb |
Material Ripple Effect on Button | 2,972 Kb |
Cool Loader | 1,782 Kb |
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!
Name | Username | Size |
Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
Subtle site navigation with description | Necks | 3,206 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
Cool audio | Bigliam | 1,868 Kb |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Sass Get Function | Lukewatts | 2,155 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!