At 10:17 AM 7/22/2005, Ketan M. Vakil (518-506-6812) wrote:
I am wondering if the following is possible using CSS/Javascript, and
if so, can someone point me in the right direction?
If I have a list of links (items) on a page as well as a list of
links that are categories, I want to be able to hover over a
"category link" and have only the "item links" that belong in that
category to then make themselves bold (or "dim" the ones that do not
belong in the category) Is this even possible?
Ketan,
You can do this using either CSS or JavaScript.
Using javascript alone, you simply need to assign behaviors to your
category links to toggle classNames in your sub-lists of anchors. There
doesn't have to be a relationship between the categories and the links
lists in the markup.
Using CSS, you can take advantage of li:hover to affect all of the sub-list
items inside a single category list item. Mozilla browsers can manage it
with just CSS using the :hover pseudo-class on non-anchor elements;
Internet Explorer will need javascript support to do the same thing. Using
this technique, the link lists must be inside (descendants of) the category
links:
<ul id="links">
<li><a href="...">Category 1</a>
<ul>
<li><a href="...">Link 1</a>
<li><a href="...">Link 2</a>
<li><a href="...">Link 3</a>
</ul>
</li>
<li><a href="...">Category 2</a>
<ul>
<li><a href="...">Link 1</a>
<li><a href="...">Link 2</a>
<li><a href="...">Link 3</a>
</ul>
</li>
...
</ul>
Using CSS, take the 2nd level menus out of the flow by positioning them
relatively or absolutely:
ul#links ul
{
position: absolute;
}
This will cause the 1st level category items to collapse together as one
list. That leaves a problem of positioning the sub-lists on the page,
perhaps by giving the sub-lists unique ids or class names so you can
position them sequentially.
Then tweak the sub-list anchor attributes when a category link is hovered over:
/* off state */
ul#links li li a
{
color: #CCC;
}
/* hover state */
ul#links li:hover li a
{
color: #000;
}
By marking this up with an anchor tag everywhere you want interactivity,
you can always fall back to server-side replacement of page content
(jumping to another page or another version of the same page) on IE in the
absence of javascript.
Regards,
Paul
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
