A Pen by Kyle

Developer
Size
2,009 Kb
Views
18,216

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 Previews

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" );
});
A Pen by Kyle - Script Codes
A Pen by Kyle - Script Codes
Home Page Home
Developer Kyle
Username kbrec85
Uploaded October 16, 2022
Rating 3
Size 2,009 Kb
Views 18,216
Do you need developer help for A Pen by Kyle?

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!

Kyle (kbrec85) Script Codes
Create amazing love letters 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!