I got a request to write-up a how-to guide for creating a navigation sidebar similar to the one on my campaign’s wiki.

Well, I whipped one up that is available as a pdf for viewing and download at the url below:

http://docs.google.com/fileview?id=0B5gBfncCduKOY2YzOWU0YTQtZGE5Yi00ZjI2LWIwNzItYzk2MjU5YTk2MDZm&hl=en

Let me know what you think! Happy coding!

That’s a great how-to gnunn! Thanks for being so thorough! I hope everyone sees how great this is and we start seeing some really great home made navigation for campaigns.

Good Gaming,
AutumnsChild(dan)

Thanks, Gnunn! I put this to use in my game as well – it’s awesome! Now all I’ve got to do is find something cool to fill the space on my Wiki main page that used to be taken up with all that navigation stuff!

If we had a rep system I’d lay one on you!

This is a great sidebar and I've been using it in my campaign, thanks gnunn.

Just in case anyone is interested, I’ve created some graphic images that can be used as “buttons” for Grunn’s “Site Index” and “Recaps Main” navigation system. You can find these at the Free Navigation Buttons page of my site.

Cheers,

-Arsheesh

Hey all, I'm really happy that so many people have found this little sidebar so useful. I wanted to post some slightly updated code that Creates a cleaner look in my opinion.

What's changed. I have switched the "float:left" attribute for "display:inline-block" This has the effect of ensuring that the main page text continues in a straight column below the sidebar (but it requires that the page body be placed in its own div with "display:inline-block" as well.

I found that "float:left" would occasionally make things look wonky depending on browsers and resolutions and whether your main page text extended below the sidebar.

Tip: When using inline-block, make sure the total width of your divs and margins do not exceed the width of the wiki page (730px?) also, I've found that sometimes, if you accidentally leave a line-break between the end of one in-line div and the start of another, it will cause them to stack vertically instead of side by side.

Anyway, here's the updated code:

<div style="width:150px;display:inline-block;margin-right:20px">
<div style="font-family:garamond;font-size:11pt;line-height:normal;border:1px solid black;">

<div style="background:#660000;color:#FFFFFF;font-weight:bold;padding:1px 4px 1px 6px;fon-size:12pt">INDEX</div>

<div style="background-color:#ddd;alink:red;padding:6px 4px 1px 6px;">

*[[MAIN PAGE]]* <br>
*[[Current Tasks]]* <br>
*[[The Adventure so Far| Adventure Log]]* <br>
*[[House Rules]]*

+*REFERENCES*+
*People*
* [[Players| PCs]]
* "%{color:blue}NPCs%":http://www.obsidianportal.com/campaign/the-westerlands/npc-tracker

*Places*
* [[Countries]]
* [[Cities]]
* [[Regions]]
* [[Important Sites]]
* [[Maps]]

*Groups*
* [[Races of the Westerlands| Races]]
* [[Religions of the Westerlands| Religions]]
* [[Organizations]]

*[[GM Techniques]]*

</div>
</div>
</div>
<div style="width:550px;display:inline-block;vertical-align: top">

Page body text goes here

</div>

Hey thanks for this!
i modified it a little cause it was breaking my tables :P
Try it here
try scrolling and resizing the browser

basically, i use both the menu and the nav buttons. I changed so that their positions are off the side.
as i write the nav buttons first, they are hidden behind the menu, but hteir position is fixed to the browser not the page, so if you scroll down they will apear.

here is the code:
http://d20.sabotender.com/obsidian_menu.txt

i also tried using <script> to include the menu from an external file, but Obsidian didnt let me load external files :P
if this was possible, it would be easier to edit the menu without needing to edit every single page :P

NOTE: i am having some problems with the menu “covering” up the links on my page, trying to fix it now

testpage
that page uses your original code

The problem i was having was that the tables were being pushed out under the menu on the right (opera)
while in Firefox they were being pushed down underneath the menu

i noticed that your updated code works however :)
testpage2

PS. i fixed the error i had with links :)
http://d20.sabotender.com/obsidian_menu.txt

I just found this helpful little thread now and I'll definitely be implementing it into my campaign's wiki main page as soon as possible. My only hope is that I can organize the code to display the index box and my other graphics on the main page without any issues like you have with "The Westerlands".

Below you’ll find a link to my page where I’ve used images for the side bar. A big thanks to gnunn (and chainsaw) for the formatting tutorials!

Click here

This is really awesome! I'm using it at my site, "Encounter RISICAL!":http://www.obsidianportal.com/campaigns/encounter-risical

I shudder to think, though, what will happen when I need to change all the menus (adding new links, for instance). I don't suppose I can change all the menus at once, but I hope somebody will chime in with a way to do exactly that. I can forsee a LOT of pages on my site.

I'm pleased and happy now, though. Thanks again, GNUNN!

The fact that you have to edit each page's sidebar individually is part of the reason I set up my system the way I did. I only include the sidebar on main section pages. On all the sub-pages, I use a simple 2-button system that will take the user to the top of the section, or the main index.

That helps keep the sidebar from getting too long, and if I need to change it, I just go down through the sidebar links copying and pasting the code into the main page for each section. The whole procedure takes just a couple minutes, and I rarely need to do it as the vast majority of pages I create just use the two button system.

It's far from ideal, but it's a good stopgap.

Have everything up and running! Thanks once again, its a big help

The Land of Corra

Anev,

I love the color scheme and the transparency you've added to the sidebar! It ties the pages together really well!

It seems you have to choose between having the sidebar float in Chrome or in Firefox, I use the code so generously given me and it works on FF but not Chrome. I use the "fix" and the bar floats in Chrome but is embedded in Firefox.

Ob'Portal makes me cry.

Kassious, I have used both FF and Chrome and it works for me. Can you put up a link to your campaign and maybe one of us coders can take a look at it?

This is awesome, thanks gnunn!

Is there a way to put this into some sort of text file that I can link to in all of my wiki entries (sort of like a server-side include)? I've got the layout and such pretty much finalized, but if I decide to change something, I'd have to have to edit dozens of entries.

I’m rebooting the Spelljoined pages soon to include Gnunn’s sidebar. Tweaking it now. Thanks for this.

Okay, all installed and SO MUCH better! Gnun, you’re the man!
http://www.obsidianportal.com/campaigns/spelljoined

Thanks killervp! I’m flattered, and must point out that is mostly because of the wonderfully talented players I’ve got who actually write journals! Hope you like the new layout and functionality, I’ve separated out the journals and such to make them easier to access.

Gnun is getting added to my credits page for the wonderful work on the side navbar.

That’s really really weird. Have you tried clearing your browser’s cache and reloading?

Thanks Rase… Same advice as above…

killervp
A God…Rebuilt
Duskreign’s COTM for November

Sir!

Thank you, Gnunn, for working all this out. I've been struggling with it for a while now and this just nails it. Great work!