1.2.203 • Published 1 year ago
@cg_dev_2003/js-header v1.2.203
Header in JavaScript
Install
npm install @cg_dev_2003/js-headerFirst you have to include the js and css files.
<link rel="stylesheet" href="./node_modules/@cg_dev_2003/js-header/header.css"><script type="module">
import Header from './node_modules/@cg_dev_2003/js-header/header.js';
const headerLinks = ["Home-index.html", "About-index.html", "Service-index.html", "Contact-index.html"];
const logo = "assets/logo.png";
const header = new Header(logo, headerLinks);
</script>Now you need to declare the logo and the links. The header object needs two parameters, the logo and the links. Make an array for the links. Each entry must contain the name and the href separated by a dash like:
"Home-index.html"
const logo = "assets/logo.png";
const headerLinks = ["Home-index.html", "About-index.html", "Service-index.html", "Contact-index.html"];Now create a new header
const header = new Header(logo, headerLinks);Result
Full Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="./node_modules/@cg_dev_2003/js-header/header.css">
<title>Responsive Header</title>
</head>
<body>
<script type="module">
import Header from './node_modules/@cg_dev_2003/js-header/header.js';
const headerLinks = ["Home-index.html", "About-index.html", "Service-index.html", "Contact-index.html"];
const logo = "assets/logo.png";
const header = new Header(logo, headerLinks);
</script>
</body>
</html>Dependencies
You need to install jQuery.
Use jQuery
npm i jqueryOr add CDN to head
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>Author
Colin Grahm, Webdeveloper at Colin Grahm Media & Commerce.