Arrow Navigation

Developer
Patrick
Size
1,973 Kb
Views
12,144
  1. Arrow Navigation Previews
  2. Arrow Navigation HTML Codes
  3. Arrow Navigation CSS Codes
  4. Arrow Navigation JS Codes

How do I make an arrow navigation?

What is a arrow navigation? How do you make a arrow navigation? This script and codes were developed by Patrick on 21 November 2022, Monday.

Arrow Navigation Previews
IQ Test

Arrow Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Arrow Navigation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="#">Item 1</a><a href="#">Item 2</a><a href="#">Item 3</a><a href="#">Item 4</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Arrow Navigation - Script Codes CSS Codes

* { box-sizing: border-box; }
body { margin: 30px; }
a { display: inline-block; position: relative; height: 50px; width: 200px; padding: 0 10px 0 40px; font: 14px/50px helvetica, sans-serif; text-decoration: none; color: #fff; background: coral; }
a:first-child { border-radius: 4px 0 0 5px; }
a:last-of-type { border-radius: 0 4px 4px 0; } a:after { content: ""; display: inline-block; position: absolute; right: -15px; z-index: 2; border-left: 15px solid coral; border-top: 25px solid transparent; border-bottom: 25px solid transparent; } a:last-of-type:after { display: none; } a:before { content: ""; display: inline-block; position: absolute; top: -2px; left: 0; z-index: 1; border-left: 17px solid white; border-top: 27px solid transparent; border-bottom: 27px solid transparent; } a:first-child:before { display: none; }
a:hover { background: powderblue; color: black; } a:hover:after { border-left-color: powderblue; }
.linkOn { background: orange; } .linkOn:after { border-left-color: orange; }

Arrow Navigation - Script Codes JS Codes

$('a').click(function() { $(this).toggleClass('linkOn');
});
Arrow Navigation - Script Codes
Arrow Navigation - Script Codes
Home Page Home
Developer Patrick
Username hinducows
Uploaded November 21, 2022
Rating 3
Size 1,973 Kb
Views 12,144
Do you need developer help for Arrow Navigation?

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!

Patrick (hinducows) Script Codes
Name
Item Display
Menu Overlay
3D Transforms
3D Transforms Flip
JQuery CSS Transition Content Slide-In
Hexagon v2
Sloppy Panels
Flat UI Element
CSS Filters
Fixed Scrolling Backgrounds
Create amazing captions 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!