Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: CSS Tab Menu

  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Tab Menu

    Test site

    Would someone mind explaining how I can pass this onto other pages and have it high-light a tab to indicate the current page. On my site I plan to have a structure something like:

    ROOT
    |_> AboutUs/index.asp
    |_>Contact.asp/index.asp

    Index.asp

    The menu would be included at the top of every page.

    I would also like to add a sub menu under item1 if anyone knows how. Not a drop down just 2 more links that that go across in a bar underneath.

    Used THIS tutorial to make what I have so far.

    Any help much appreciated.

  • #2
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #3
    New to the CF scene
    Join Date
    May 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Bon but its not really what im looking for, im working in asp not php and im not sure how I could adapt your code into my tab menu so the colours changed depending on the page.

    Its just a normal tab menu I need been going around and around in circles trying to get different onse to work getting fed up now

    LIke this

    http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

    but no nasty roll-over effect the sub menu would come up when pressed and I am confused how I would use this with my site. Do you include it at the top of the page and it magicly knows what page its on so high-lights the appropriate tab? dunno.

  • #4
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How about this one then...?

    http://bonrouge.com/br.php?page=currentcss

  • #5
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    from your example is seems maybe you are after something like the menu on here: Menu

    Simple to make, and looks pretty good too.

    If you wanted to use something like that, feel free to take snippits of my source.

    Hope that helps

    jon
    "You only live once, play it right, and once is enough" - me :)
    "When i die only god can take my soul" - me again! :P

  • #6
    New to the CF scene
    Join Date
    May 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Jonny but wasas after something more like:

    PLAY.com

    Try clicking the DVD tab. I was after a sub menu like that.

  • #7
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    you mean the main menu for play.com? or the sub menu underneath?

    The submenu is just underline when hover, you could do that with a pseudo class couldent you?

    Jon
    "You only live once, play it right, and once is enough" - me :)
    "When i die only god can take my soul" - me again! :P

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Css

    You could add a specific class (or id) to the current menu option, which is what BonRouge's example did (I'm sure you can figure out a way to do this in ASP as well), or add ids to all menu items and use for example a body class to address the accompanying style rules for the hightlighted menu item (do a Google for "body class" to find some additional info on this technique).

    The same would more or less apply to sub menus: you could create the entire menu as a two level list, positioning the second level lists absolutely underneath the top level and toggle their visibility in a similar way as you would control highlighting the "current" menu item.

    Alternatively, you could have the script leave out the entire sub menus and only include them if they need to show up, but a have a feeling leaving them in may improve findability for search engines (no proof whatsoever for that, though).

    By the way: are you having difficulties with generating the required markup, or is it about how to style averything using CSS? Perhaps a more compelling approach would be the sliding doors one (including "current" tab styles)
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

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