SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal tab menu question

    Hi,
    I am using a horizontal tab menu from:
    http://www.cssplay.co.uk/menus/snazzymenu.html (code below)

    How can I make it so that the tab that is clicked on for the page shows that the visitor is now ON that page, like amazon?

    ie
    Code:
    <style type="text/css">
    
    #outer ul {margin:1em; padding:0; list-style-type:none; background:transparent; height:1em;}
    #outer li {display:block; float:left;}
    #outer {display:block; position:relative; background:#eee; padding:1.5em;}
    
    .xsnazzy {background:transparent;}
    .xsnazzy span {text-align:center; color:#fff; margin:0; font-weight:normal; padding-bottom:0.5em;}
    
    .xtop {display:block; background:transparent; font-size:1px;}
    .xb1, .xb2, .xb3, .xb4 {
    display:block; 
    /* hide overflow:hidden from IE5/Mac */ 
    /* \*/ 
    overflow: hidden; 
    /* */ 
    }
    .xb1, .xb2, .xb3 {height:1px;}
    .xb2, .xb3, .xb4 {background:#dd7; border-left:1px solid #fff; border-right:1px solid #fff;}
    .xb1 {margin:0 5px; background:#fff;}
    .xb2 {margin:0 3px; border-width:0 2px;}
    .xb3 {margin:0 2px;}
    .xb4 {height:2px; margin:0 1px;}
    
    .xboxcontent {display:block; background:#cc6; border:0 solid #fff; border-width:0 1px 1px 1px;}
    
    
    a.xmenu2, a.xmenu2:visited {display:block; text-decoration:none; width:7em; font-size:0.9em;}
    a.xmenu2:hover {background:transparent; cursor:pointer;}
    a.xmenu2:hover span {color:#000;}
    a.xmenu2:hover .xboxcontent {background:#eee; border-color:#888; border-bottom:1px solid #eee;}
    a.xmenu2:hover .xb1 {background:#888;}
    a.xmenu2:hover .xb2, a.xmenu2:hover .xb3, a.xmenu2:hover .xb4 {background:#fff; border-color:#888;}
    
    
    
    </style>
    
    
    </head>
    
    <body>
    
    <div id="outer">
    <ul>
    <li>
    <a class="xmenu2" href="tablink2.html"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b><span class="xboxcontent">
    Paul<br />Cezanne</span>
    </b></a>
    </li>
    <li>
    <a class="xmenu2" href="tablink.html"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b><span class="xboxcontent">
    Henri<br />Matisse</span>
    
    </b></a>
    </li>
    <li>
    <a class="xmenu2" href="#nogo"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b><span class="xboxcontent">
    William<br />Turner</span>
    </b></a>
    </li>
    <li>
    <a class="xmenu2" href="#nogo"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b><span class="xboxcontent">
    John<br />Constable</span>
    </b></a>
    </li>
    <li>
    
    <a class="xmenu2" href="#nogo"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b><span class="xboxcontent">
    Claude<br />Monet</span>
    </b></a>
    </li>
    </ul>
    </div>
    Obviously I need to change some things above but I wanted to see if I could do what i wanted first.

    many thanks
    Sxx

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You can't do it automatically. You would need to add a class of current to the selected tab on the page that opens. That means the class is ona different position depending on what page was open.

    You then give that current class the same styles that the hover gets and the tab will be highlighted for theat page.

    e.g.
    Code:
    a.xmenu2, a.xmenu2:visited {display:block; text-decoration:none; width:7em; font-size:0.9em;}
    a.xmenu2:hover,a.current {background:transparent; cursor:pointer;}
    a.xmenu2:hover span,a.current span{color:#000;}
    a.xmenu2:hover .xboxcontent,a.current .xboxcontent{background:#eee; border-color:#888; border-bottom:1px solid #eee;}
    a.xmenu2:hover .xb1,a.current .xb1{background:#888;}
    a.xmenu2:hover .xb2, 
    a.xmenu2:hover .xb3, 
    a.xmenu2:hover .xb4,
    a.current .xb2,
    a.current .xb3,
    a.current .xb4{background:#fff; border-color:#888;}
    
    
    
    </style>
    </head>
    <body>
    <div id="outer">
    	<ul>
    		<li> <a class="xmenu2 current" href="tablink2.html"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b><span class="xboxcontent"> Paul<br />
    Hope that helps

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, that is great.
    I have pracitsed it on static html pages but the problem is now that I am using a template system and I can't work out how to have different body code for each page.

    I am sure it will come in handy in teh furture though, and hope it also helps someone else when they are doing searched.

    Many thanks
    Sharon

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I have pracitsed it on static html pages but the problem is now that I am using a template system and I can't work out how to have different body code for each page.
    You will need to folow the example in this demo.:

    http://www.pmob.co.uk/temp/nav-body.htm

    Just view source on each page as the links are working and you can see how the body id changes only and yet the correct item is selected. You will need a class for each nav item as well.

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your example is very clear but I don't think it will work for what I need. I didn't explain it very well. I am using cubecart and the body classes are the same for every single page. I can't change the body classes but there is a mod to enable me to use different style sheets for different pages. I was hoping there was a way to change the style sheet but not the body code. Do you know if that is possible? Sorry to be difficult!
    Edited to add: i think I will try a more basic horizontal menu (more like yours but horizontal) and try to work it out. The tabbed menu looks great but the styling of it is confusing me a bit!
    Sharon
    Last edited by shesays; Sep 14, 2006 at 10:44. Reason: more info

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    and the body classes are the same for every single page. I
    Are you allowed to add body classes because you can have more than one class on the same tag. <body class="home current">

    If you can't use the body tag can you add the class to a page wrapper if there is one (or put one in).

    If you can't change anything then you could change the class dynamically by js or php but that's a question for another forum.

    If you want to use additional stylesheets you can just insert an extra stylesheet in each page and have different css in each one that changes that pages class only.

    e.g.
    li.page1 a {background:red;}

    That would be the additional stylesheet for page 1. Then for the next entry on the nav you would have a stylesheet that styles that alone.

    li.page2 a {background:red}

    and so on....

    Just make a unique stylesheet for each of those pages and then that item only gets styled when the correct stylesheet is active.

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for your help (and patience!)
    Yes I can add my own body tags but they have to be the same for every page. I will try your suggestion
    e.g.
    li.page1 a {background:red;}

    That would be the additional stylesheet for page 1. Then for the next entry on the nav you would have a stylesheet that styles that alone.

    li.page2 a {background:red}
    as I can use additional style sheets.
    Thanks so much!
    S


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
  •