PDA

View Full Version : Navigation bar backgruond



allysonnlettie
09-10-2004, 01:15 PM
I am relatively new to dhtml and i was wondering if it is possible to add a background image to the tiles on this(click (http://dynamicdrive.com/dynamicindex1/topnavbar.htm)) navigation bar instead of plain colors.

And if that is not possible how can i tell it to not expand across the entire screen?

cr3ative
09-10-2004, 01:31 PM
Quick note: With TNB3, to not make it expand over the screen, edit these lines in config.js:

var stretchMENU = false; // show empty cells
var showBORDERS = false; // show empty cell borders

To get the menu to not expand over the screen, you could easily customize TNB3 to do this as shown above.

For TNB2, the link you provided, the page it is held on has this to say:

resize(width) :
Resizes the bar to the given width. If already created the headers will be repositioned according the the bar's current alignment setting. Note that if you specify a width less than the value given by getMinWidth() the bar will be resized using the minimum required width instead.

Hope this helps
cr3ative

sbode
09-11-2004, 07:16 AM
If your script has a part you paste in the header, you frequently can add a background image the way you would specify if you were using an external CSS page. One good script that you can do this with is the switch menu, I actually prefer the one written by GetElementById because it is set up already for doing rollovers. You can specify the background image as a url. It is best to have a handy book on CSS and HTML code to look up the exact syntax. I keep a folder on my drive of interesting scripts, so if I need a snippet of code from one I just copy and paste.

.menuOut {
cursor:pointer;
background:#651F39 url('740wbg8.jpg') repeat-y;color:#FEE79E;
width:170px;
border:2px ridge #993366;
padding:4px;
text-align:center;
font-family: "Verdana";
font-weight:bold;
font-size:10pt;
margin:3;
}

.menuOver {
cursor:pointer;
background-color:#970644;color:#FFFFC0;
width:170px;
border:2px ridge #800000;
padding:4px;
text-align:center;
font-weight:bold;
font-family: "Verdana";
font-size:10pt;
margin:3;
}

Please note the code for the background on the Menu Out and Menu Over, the first example is what I changed the code to, the second I found I liked as is. You can use an extremely small file for the image on repeating tiled buttons. You can also note on the example I used a ridge border, which was not on the original file. This came from a CSS handbook, if your header is set up similar to the above, there is much you can change and customize to your liking.