PDA

View Full Version : Need help with this left Nav

:kj:
04-03-2003, 07:07 PM
Can anyone figure this one out?????

I need to add a left nav to my site similar to the one on this:

http://ariba.com/solutions/solutions_overview.cfm

The only one I found close was this menu by :
_________________________________________
Cool Table Menu
By Clarence Eldefors (http://www.freebox.com/cereweb) with modifications from javascriptkit.com
Visit http://javascriptkit.com for this and over 400+ other scripts

Test sample:
http://www.javascriptkit.com/script.../coolmenu.shtml
__________________________________________

The issue:

I need it to change color on hover (which the script above does just fine) but... I need the hover color to remain "on" once the link is clicked
- Just like the ariba.com site mentioned at the top of this message

Can anyone help me with this?

Cheers,

Kelli
Cherubae
04-03-2003, 08:29 PM
Well on each page is a new copy of the script, so couldn't you put the "on" image as the one that the page is about? On the ariba site, the solutions_overview.cfm page has the "Solutions Overview" with the same color (green) on the mouseOver and mouseOut, while the rest of the links have a mouseOut as white.

On the strategy_overview.cfm, the old "Solutions Overview" now mouseOuts with a white background and the "Strategy" mouseOuts with a green background to make it appear as it's selected.


- Cher
:kj:
04-03-2003, 09:15 PM
since i'm not a coder - just a designer with basic HTML skills

could you cut and poaste what you are refering to, i did not see the "on" in the script - just "hover"

thanks so much Cher for the reply :)
pardicity3
04-03-2003, 09:38 PM
Unfortunatly, that site uses tables for layout which I--along with most people here--do not like to see. Nonetheless I will explain the code they use, and then explain a better method.

Here is their code:

<tr bgcolor="#99CC66">
<td width="163" height="20"
onMouseOver="this.style.backgroundColor='#99CC66'"
onMouseOut="this.style.backgroundColor='#99CC66'">
<p align="right" class="leftnav">
<a href="solutions_overview.cfm" class="leftnav">Solutions
Overview</a>
</td>
</tr>


They are using the onMouseOver and onMouseOut Javascript functions to change the background color of the "links". Now this link that I have provided the code for uses the same color value for both mouseover and mouseout thus keeping the color the same the whole time. This changes from each page. See, depending on which page you are on, the designer of the site changed the code so that the appropriate link was highlighted. Do you understand this so far?

This effect can actually be achieved in a much easier way utilizing CSS. Here is what you can do:


<head>
<style type="text/css">
<!--
.container {
width: 20%;
/*This is the size of the division that will
"contain" your links/navbar */
}

a.navlink {
background-color: #ffffff;
/* Insert whatever color you want the
links background to be normally above */

display: block;
/* This makes sure that the link spans the
width of its container */

padding: 4px;
/*Change the above value to adjust the
padding as desired */
}

a.navlink:hover {
background-color: #ff0000;
/* Insert whatever color you want the
links background to be when the user
puts his or her mouse over it */
}

a.navlinkHere {
background-color: #ff0000;
/* This will be the background color of the
link that you want to always have the same
background-color */

display: block;
/* This makes sure that the link spans the
width of its container */

padding: 4px;
/*Change the above value to adjust the
padding as desired */
}
-->
</style>
</head>


This may look like a lot of code, but it makes the implementation soo much easier. Here is an example of what your navbar should look like if you utilize the above code:


<body>
<div class="container">
<a href="#" class="navlink">Home</a>
<a href="#" class="navlinkHere">About</a>
<a href="#" class="navlink">Contact</a>
</div>
</body>


Notice how the About link uses the navlinkHere class. This means that the user is on the About page and that the background color on the About link won't change onmouseover.

Now for all your other pages just change the class to the appropriate links. If you are on your homepage, your code might look like this:


<body>
<div class="container">
<a href="#" class="navlinkHere">Home</a>
<a href="#" class="navlink">About</a>
<a href="#" class="navlink">Contact</a>
</div>
</body>


This may have been a little confusing, but try playing around with the code. If you are new to CSS you will probably be really confused. Feel very free to ask as many questions as you'd like :)!
:kj:
04-04-2003, 06:18 PM
WOW!

Thanks so much - so far it's working pretty good, although i am using a table format for the mane links and I'll use the "Container" div for the sub cats.

Here's the next question:

How do I position the text so it's about 20 pixels from the right edge. I can cheat and put in a shim or space - &nbsp;

If I add cell padding, it pads the top and bottom as well, which i dont want

help!

Here's my test page:

http://www.dagazsolutions.com/sabrix_new/solutions_overview.html
:kj:
04-04-2003, 06:57 PM
One last thing I noticed...

I cant see the CSS styles (title and sub-title colors) on the MAC in the main content area - I assume it is like that in Netscape as well.

Your left Nav suggestion works great on all platforms :)

Works great in Explorer, of course :)

Thanks so much for your help!
pardicity3
04-04-2003, 09:12 PM
For the padding issue, you can just add in some padding-right like this:

padding-right: 20px;

That way it will just pad to the right of the text and not all of it.