Results 1 to 3 of 3

Thread: Navigation bar backgruond

  1. #1
    Join Date
    Sep 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Navigation bar backgruond

    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) navigation bar instead of plain colors.

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

  2. #2
    Join Date
    Aug 2004
    Location
    Brighton
    Posts
    1,563
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    A retired member, drop me a line through my site if you'd like to find me!
    cr3ative media | read the stickies

  3. #3
    Join Date
    Sep 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default background images

    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 {
    cursorointer;
    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 {
    cursorointer;
    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •