Index » Extras » Code » Navbars
Updated 3/28/23

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: | |