A Pen by Kyle
How do I make an a pen by kyle?
What is a a pen by kyle? How do you make a a pen by kyle? This script and codes were developed by Kyle on 16 October 2022, Sunday.
A Pen by Kyle - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Kyle</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <ul class="menu"> <li><a href="#" >Home</a></li> <li><a href="#" >About</a></li> <li><a href="#" >Design</a></li> <li><a href="#" >Community Benefits</a></li> <li class="current-menu-item"><a href="#" >Sustainability</a></li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A Pen by Kyle - Script Codes CSS Codes
nav { height: 50px; text-align: center; text-transform: uppercase; background: #fff;
}
nav ul, nav ul li { margin: 0; padding: 0; list-style: none;
}
nav ul li { display: inline-block; *display: inline; zoom: 1; margin-right: 10px;
}
nav ul li a { display: block; line-height: 50px; padding: 0 20px; margin-right: 20px; color: #000; text-decoration: none; font-size: 22px;
}
nav ul li:last-of-type { margin-right: 0;
}
nav ul li a:hover { background-color: #dfdcda;
}
nav ul li.current-menu-item a{ background-color: #dfdcda; position: relative;
}
nav ul li.current-menu-item a:after { position: absolute; top:100%; left: 50%; content: ""; display: block; border-top: 10px solid #dfdcda; border-left: 20px solid transparent; border-right: 20px solid transparent; margin-left: -20px;
}
A Pen by Kyle - Script Codes JS Codes
$( ".menu li" ).click( function() { $( ".menu li" ).removeClass( "current-menu-item" ); $( this ).addClass( "current-menu-item" );
});
Developer | Kyle |
Username | kbrec85 |
Uploaded | October 16, 2022 |
Rating | 3 |
Size | 2,009 Kb |
Views | 18,216 |
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 |
Quilt Loader | 2,649 Kb |
SIdebar for g and g idea | 2,793 Kb |
HR styling for forums | 1,917 Kb |
CSS3 Animation | 2,556 Kb |
Logo Round 1 | 2,423 Kb |
Hyphen test | 2,562 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 |
Bootstrap example | Ssaakkaa | 2,716 Kb |
Toolbar | Onsen | 5,414 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
Blog Concept - Single Post | Marionebl | 9,603 Kb |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
Pure CSS Tooltip | APinix | 2,815 Kb |
Vertical drag to change | Plasm | 4,488 Kb |
Twitch Live Channels | Inkblotty | 4,956 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
Flying Bee | Pwsm50 | 3,711 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!