Menu Bar

Menu Bar


The code I used for the menu bar is below. When I was looking at menu bars other people had created on the site, I usually found code that had to be pasted on every page. So, I tried to figure out a way to put it all in the CSS. Basically, you upload a single image as your menu bar, and you actually resize and reposition the links that are already there. Then you simply make them invisible!

So, your first step, cut and paste the following code into your CSS:


/* Title Bar */

/* background image for menu bar */
#campaign-header .tab-container {position:relative;top:-18px;left:20px;background-image:url(‘put your background image url in here’);background-repeat:no-repeat;width:726px;height:160px;background-position:0px -2px;}

/* area for campaign banner and menu bar. Made shorter here so there wouldn’t be too much empty space between page elements and menu bar. */
#campaign-header {height:285px;}

/* to get rid of items tab. */
#campaign-header .items {display:none;}

/* area (and placement) of each tab-link. */
li.home a {height:30px;width:34px;}
li.adventure-log a {height:30px;width:40px;}
li.wiki a {height:30px;width:24px;}
li.characters a {height:30px;width:75px;}
li.forum a {height:30px;width:40px;}
li.calendar a {height:30px;width:55px;}
li.maps a {height:30px;width:25px;}
li.comments a {height:30px;width:69px;}

/* to move menu bar and make it invisible. */
#campaign-header .tabnav {opacity:0.3;position:relative;top:60px;left:50px;}


Now, when you save your CSS and look at your banner you should see some light white boxes with link names in them. Kinda like this:

All you need to do is play with the height and width of the links until they look good. Once they do, set the opacity to 0.0.

Back to Tutorials

Menu Bar

Tyellador Thorvaldr Thorvaldr