Copyable code - Navbars

Navbar on every page

I've found two simple ways of doing this.

Method 1:


document.write('<a href="#">Thoughts</a> | <a href="#">Dreams</a> | <a href="#">About</a> | <a href="#">Links</a> | <a href="#">Graveyard</a> | <a href="#">Extras</a>');


<div><script src="/js-nav-1.js"></script></div>

Result:

(Ikewise)

Method 2:


var html = '<a href="#">Thoughts</a> | <a href="#">Dreams</a> | <a href="#">About</a> | <a href="#">Links</a> | <a href="#">Graveyard</a> | <a href="#">Extras</a>';
document.getElementById("js-nav-2").innerHTML = html;


<div id="js-nav-2"><script src="/js-nav-2.js"></script></div>

"Pipe" link dividers using css instead of text

This one is useful for me because it reduces the gap between links, making the animation less janky. (Update: it used to) You could also use this to style the dividers differently.


.navbar a {
  border-right:1px solid white;
  padding-left:5px;
  padding-right:5px;
  display:inline-block; //line break if the window is small. You could instead put spaces between the links and change the amount of padding to compensate.
}
#navbarlast {
  border-right: 0;
}


<div class="navbar">
<a href="#">Thoughts</a><a href="#">Dreams</a><a href="#">About</a><a href="#">Links</a><a href="#">Graveyard</a><a href="#" id="navbarlast">Extras</a>
</div>

I got the idea from this website.

Insert content using CSS


.navpic1:before {
  content:url('iconolog/matrix.gif')
}
.navpic2:before {
  content:url('iconolog/space0a.gif')
}
.navpic3:before {
  content:url('iconolog/wiz4e.gif')
}
.navpic1:hover:before, .navpic2:hover:before, .navpic3:hover:before {
  content:url('iconolog/b4_exit0d.gif')
}


<a class="navpic1" href="#"></a> | <a class="navpic2" href="#"></a> | <a class="navpic3" href="#"></a>

Result: | |