Results 1 to 7 of 7

Thread: Top Nav Bar III Help

  1. #1
    Join Date
    Jun 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Top Nav Bar III Help

    Hello,

    i am attempting to modify Top Nav Bar III. I would like to add some spaces between each tab (horizontally). i want to have 6 seperate tabs that do not touch, with about 10 pixels in between, and i want the space in between each tab top be transparent so you can see what is undernieth.

    does anyone have any suggestions on how i can accomplish this? thanks!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'd set up dummy items with no links or display text, width set to 10 and the background color set to transparent. Remember to retain empty quotes for any item not used. If you get an error using no link, you can probably use "#" or "javascript:void(0)".
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks for your reply.

    i actually tried that, but when i set the background color to "transparent" it displays as black...

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'm looking at the menu now, it appears that this configuration item:
    Code:
    var bCOLOR = 	"black"	// main nav border color
    is not actually a border in the strict html or css sense, rather a background color. If you set that to transparent and set this:
    Code:
    var bSIZE = 	1;		// main nav border size
    to 10, you will have pretty much what you say you are after. However, you will lose the nice 1px solid black border for the main navitems which is the default we just changed. To get something like that back, use html in the text for these entries, ex:
    Code:
    addMainItem("http://www.dynamicdrive.com/","<div style='padding:7px 0;border:1px solid black;height:100%;width:80px;'>Home</div>",80,"center","","",0,0,"","#ffeeee","#ffeecc","#000066","#660066");
    and changing:
    Code:
    var vtOFFSET = 	0;		// main nav vertical text offset (+/- pixels from middle)
    to 4
    Last edited by jscheuer1; 06-29-2005 at 07:15 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    that looks like it's going to work perfectly. thanks a lot for the help!

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Just tested this out in Mozilla, looked horrible. Follow the same advice for the first two variables but, then it gets complicated. The HTML for the item's text will look like this:
    Code:
    <div style='position:relative;top:0!important;top:8px;padding:3px 0 7px 0!important;padding:5px 0;border:1px solid black;height:12px;width:77px;'>Home</div>
    and 'var vtOFFSET' will be -8. That seems to work well in both. Since this seems, even to me, to be way too much fudging around. Images might be a better solution. Gif's with transparent backgrounds and the desired text and borders could substitute for this complicated html and repositioning scheme. Also, I'd try taking a trip to Brothercake's site. There he has extensive tutorials on this menu. An even better solution may present itself.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jun 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks, this is working great.

    Does anyone know how I can make the submenu text be bold on hover? I don't see a setting for that...

    Thanks.

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
  •