I really need some help with a tab menu

[horatiub]

I've been trying to get the menu working properly and no go. I'm almost ready to give up.

my site is <snipped>

basically what I want is the the tabs color to change to blue after they I clicked on them. For example, if I press on the blog page, I want that tab to become blue.

here is my CSS code:

/* Navigation menu */
#navigation {
 padding-left: 30px;
}
#navigation ul{
 list-style:none;
 margin:0;
 padding:0;
}
#navigation li{
 float:left;
 height:27px;
 padding-left:12px;
 background:url(images/tabs_reg_l.png) no-repeat left top;
}
#navigation li a {
font-family: "Trebuchet MS", verdana, helvetica, arial, sans-serif; 
font-weight: bold; 
font-size: 1.1em;
color: #515151;
padding:7px 14px 0 2px;
text-decoration: none;
float:left;
background:url(images/tabs_reg_r.png) no-repeat right top;
height:20px;
}
#navigation li.current{ background:url(images/tabs_active_l.png) no-repeat left top;}
#navigation li.current a{ background:url(images/tabs_active_r.png) no-repeat right top;}
#navigation a:hover{color:#c00;}
#navigation li.current a{color:#fff}

and this is the menu code:

<td id="navigation"><!-- breadcrumbs -->
      <ul>
       <li class="current"><a accesskey="d" href="?L=users.desktop">My Desktop</a></li>
       <li><a href="?L=contacts.contacts">My Contacts</a></li>
       <li> <a accesskey="s" href="?L=search.users">Search</a></li>
       <li><a accesskey="b" href="?L=blogs.browse">Blogs</a></li>
       <li><a href="?L=chat.chat">Chatrooms</a></li>
       <li><a accesskey="f" href="?L=inkspot.index">Inkspot</a></li>
      </ul>
      <!-- /breadcrumbs --></td>

thank you so much in advance, if I can get this to work, I would really appreciate it

[edited by: SuzyUK at 6:10 pm (utc) on Jan. 4, 2007]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

[Fotiman]

You're marking your first list item with the "current" class no matter which tab you've clicked on. If you fix that so that the actual current list item gets the "current" class, then it'll work for you. That's not really a CSS problem though.

In other words:

<ul> 
 <li class="current"><a accesskey="d" href="?L=users.desktop">My Desktop</a></li> 
 <li><a href="?L=contacts.contacts">My Contacts</a></li> 
 <li><a accesskey="s" href="?L=search.users">Search</a></li> 
 <li><a accesskey="b" href="?L=blogs.browse">Blogs</a></li> 
 <li><a href="?L=chat.chat">Chatrooms</a></li> 
 <li><a accesskey="f" href="?L=inkspot.index">Inkspot</a></li> 
</ul> 

<ul> 
 <li><a accesskey="d" href="?L=users.desktop">My Desktop</a></li> 
 <li class="current"><a href="?L=contacts.contacts">My Contacts</a></li> 
 <li><a accesskey="s" href="?L=search.users">Search</a></li> 
 <li><a accesskey="b" href="?L=blogs.browse">Blogs</a></li> 
 <li><a href="?L=chat.chat">Chatrooms</a></li> 
 <li><a accesskey="f" href="?L=inkspot.index">Inkspot</a></li> 
</ul> 

<ul> 
 <li><a accesskey="d" href="?L=users.desktop">My Desktop</a></li> 
 <li><a href="?L=contacts.contacts">My Contacts</a></li> 
 <li class="current"><a accesskey="s" href="?L=search.users">Search</a></li> 
 <li><a accesskey="b" href="?L=blogs.browse">Blogs</a></li> 
 <li><a href="?L=chat.chat">Chatrooms</a></li> 
 <li><a accesskey="f" href="?L=inkspot.index">Inkspot</a></li> 
</ul> 

etc., etc.

PS- Welcome!
PPS- Personal URL's are not permitted (see the TOS link at the bottom of the page)

[edited by: Fotiman at 6:08 pm (utc) on Jan. 4, 2007]

[horatiub]

thanks, but I realized after I posted that I used the current class there. Basically, that's my problem, I don't have a way of making each page a current class, so I heard that I would have to use server side solution to be able to make each page current after I click on the tab, and then that way I could style it.

my site is structured kinda weird, it has a frame.tpl file, which is the main file, and that files has frames in it that points to the content files. So, I don't think there is a way to set that class="current" on each page.

Somebody suggested to use this php code

<?php
$menu = file_get_contents("menu.htm");
$menu = preg_replace("¦<li><a href=\"" . basename($_SERVER['PHP_SELF']) . "\">(.*)</[^>]+></li>¦U", "<li class=\"current\"><span>$1</span></li>", $menu);
echo $menu;
?>

or my site already has a javascript.js class, that is called when I use other tabs in the profile pages, those are the initial tabs, not the ones that i wanted to use

that js function looks something like this: this.classNavActive = "tabberactive";

and here is my all confusion

[pageoneresults]

Welcome to WebmasterWorld horatiub!

You might find an answer in this previous topic...

How do I make a page show the active link?
[webmasterworld.com...]

[horatiub]

thank you for the welcome. I read that thread, but the first link, that says go to post 16, it's not working, so i couldn't see the solution, and the php code, I have no idea what he meant by that :)

My code is different but i just couldn't understand from that how to put in the frame.tpl page.

[horatiub]

ok, I gave up on that menu, what I'm trying now is to make another one that is a little different.

here is the code that I have

#header ul { list-style: none; margin: 7px 0 0 0; padding: 0 0 0 40px; float: left; }
#header ul li { margin: 0 3px; padding: 0; float: left; background: #006699 url(/img/bg/bg_nav_primary_right.gif) no-repeat 100% 0; white-space: nowrap; }
#header ul li a { color: #FFF; display: block; text-decoration: none; background: url(/img/bg/bg_nav_primary_left.gif) no-repeat 0 0; margin: 0; padding: 7px 20px 5px; text-align: center; font-weight: bold; }

#header ul li:hover, #header ul li.hover { background-color: #197FB2; background-position: 100% -150px; }
#header ul li:hover a, #header ul li.hover a { background-position: 0 -150px; }

#header ul li.on, #header ul li:hover.on { background-color: #3399CC; background-position: 100% -300px; }
#header ul li.on a, div#header ul li:hover.on a { background-position: 0 -300px; }
#header ul ul { margin: 0; padding-top: 6px; background: url(/img/bg/bg_nav_secondary_left.gif) 0 0 no-repeat; position: absolute; left: 0; }
* html #header ul ul { left: 6px; }
#header ul ul li { display: none; }
#header ul li.on ul li { display: block; }

#header ul ul li { margin: -1px 35px 0 0; background: none!important; }
#header ul ul li a { background: none!important; }
#header ul li.on ul li a { padding: 0; }
#header ul li.on ul li a:hover { text-decoration: underline; font-weight: 900; } /* for ie5mac */
#header ul li a { position: relative; outline: none; }
#header ul li a .new { position: absolute; top: -7px; right: 2px; z-index: 1; text-indent: -12345px; background: url(/img/icon/icon_new_32x14.gif) no-repeat; height: 14px; width: 32px; }

#header ul li ul li img.toggle { position: absolute; top: -2px; margin-left: 0; left: 590px; margin-right: -590px; }

can you guys please help me straighten out this code? I'm lost