If we could only write our navbar code in one place, without having to copy/paste it into every html page.....
jquery load is the easy bit. What's harder is stopping flicker on each page load.
Active class is set on each nav item by combining a page id and a nav item class. When these are identical, the active css rules are applied. Lovely and simple.
Stopping flicker....
- #navigation is set to display none in css.
- .nav-container has min height 48px to reserve space on the page, even when #navigation is hidden.
- on page load navigation.html is inserted and then #navigation is displayed.
Not perfect but it stops the worst of the flicker.
Going to need to tinker with this somehow for mobile.....