I have a nab bar where the background and nav links change to show which page your on by using class=“active”. I want to be able to create a static header that is the same for each page so that when I change a link they all get changed.
I’m currently using this to insert a static header and footer
I was thinking maybe each page can have a variable that says which page it is, but how can I dynamically add that class to the corresponding nab links <li>?
You could create a static header and using PHP include it on every page:
<?php include_once("header.php"); ?>
Depends where / how you store the variable.
One possibility would be the url as a query string.
Another would be as a data-attribute on an element.
Yet another would be in some kind of client-side storage.
Sorry, let me try again. I already know how to insert a static header. The problem is that whichever page your on needs to have a class added to the nav structure so that it changes the color of that link in the menu.
That shouldn’t be too difficult to do, but just so that I understand correctly, what speaks against hard-coding the class into your navigation on a per page basis?
Is the code for the navigation in a PHP file wich is included via an include statement (as above)?
<script>
$(function(){
$("#insert_header").load("header.html");
});
// then something here to find the page variable at the top of the page (var page = "about.html";)
// then something to look through the navigation and find the li that matches the variable (ex. "about.html ")
// and then add class="active" to the corresponding li
</script>
I’m back at my PC now. I was answering earlier on an iPad (which sucks).
So, on reflection it’s better to use the attribute ends with selector, so that you can select the anchor tags based on the file they link to and not have to worry about if you got the full path correct.
Thanks Pullo, that got it working. However, I think because it I’m using query to insert the menu after the page loads it is causing problems. The drop down menu no-longer opens on hover, but rather requires you to click on it now. Any ideas? here is the site: http://aaronhaas.com/hooper/
Yeah, the script inclusion order is the problem.
How are you initializing the dropdown hover functionality?
Is it just enough to include the plugin?
Do you have an unminified version of it?
I think the bootstrap js for the drop down takes care of initializing it. I could be wrong though. I know it works as is if I just paste the menu back in and don’t use the insert script.
What plugin should I include? Is that the js mentioned below?
I just uploaded and linked to the unminified version
Thanks pull. I tried those changes on several different pages and still no luck. I also tried moving both the query script and your new script up to the head section, but then the menu didn’t show up at all. Any more ideas?