So my situation is this (please bear with me). I’m working on an assignment for a college class. The website being made has to use javascript to create a burger menu, and has to incorporate php (bootstrap isn’t allowed).
My files are like this:
- css/style.less
- includes/nav.inc.html.php
- link1/link1.html.php
- link2/link2.html.php
- scripts/burger.js (my burger menu javascript)
- index.php
The problem I have is that I want my menu to not only be responsive, but to highlight which page a person is currently on. The highlighting part has managed to elude me however and is what I need help with.
(Also I’m really not good at javascript, so that doesn’t help me either).
Included below is the code for things. CSS is under control at the moment, so I’ll only add the “active” portion from that which would provide the highlighting.
Nav coding is:
<?php define('BASE_URL', '/cas222/'); ?>
<nav>
<div class="topnav" id="myTopnav">
<a class="mynav" href="<?php echo BASE_URL; ?>">Link 1</a>
<a class="mynav" href="<?php echo BASE_URL; ?>link2">Link 2</a>
<a class="mynav" href="<?php echo BASE_URL; ?>link3">Link 3</a>
<a class="mynav" href="<?php echo BASE_URL; ?>link4">Link 4</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
</nav>
Burger Javascript is:
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
CSS highlight
.active {
background-color: @color1;
color: white;
}
html for the link1 page is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Sean Ropp, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Site Title</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/generic.css" rel="stylesheet" type="text/css">
<link href="css/grid.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<?php include 'includes/nav.inc.html.php'; ?>
<header>
<h1>Heading 1</h1>
</header>
<main>
<h2>Heading 2</h2>
<p>
Paragraph.
</p>
<p>
Paragraph.
</p>
<?php include 'tables/tables.inc.html.php'; ?>
<br>
<h2>Heading 2</h2>
<p>
Paragraph.
</p>
</main>
<footer>
<p>Social Media Links</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scripts/burger.js"></script>
</div>
</body>
</html>
Thanks for the help.