[Typo3] TMENU Roll Overs

[Christopher]

Hi,

--- RLB <nveid at comcast.net> wrote:

> Yes.. I saw how you could do that.  But that will make all links on the
> page
> follow that format not just the menu.  I haven't seen a place that
> actually
> tells you how to do just one section how to do that.  Say perhaps for a
> 'Menulink class'


Any good css tutorial explains this; I've also done it 3 or 4 times on this
 list alone :^) But anyways, if you only learn one thing about CSS, learn
this: _CSS is all about context_.

It's possible to do amazing styling without adding any classes or ids
beyond a basic set that lays out the structure of a page...


> For example i have.. the following CSS & it doesn't seem to work.
> 
>  .menulink:link {
>    background-color : transparent;
>    color : blue;
>    text-decoration : none;
>    font-size : 2px
>    font-face : arial
> }
> .menulink:visited {
>    background-color : transparent;
>    color : blue;
>    text-decoration : none;
>    font-size : 2px
>    font-face : arial
> }
> .menulink:hover {
>    background-color : transparent;
>    color : white;
>    text-decoration : none;
>    font-size : 2px
>    font-face : arial
> }
> 
> .menulink:active {
>    background-color : transparent;
>    color : yellow;
>    font-face : arial
>    text-decoration : none;
>    font-size : 2px
> }
> 


But *what* doesn't work? These styles are fine (bloated, but fine),
*provided* that each and every link that you want these styles to apply to
looks like this:

<a href="link/to/file.html" class="menulink">Link Text</a>

...which is almost always totally unnecessary.

To come back to the point about context; define links for a menu *on the
basis of their parent element*. A simple example (using the same styles
you're using, but in a greatly simplified form):


HTML:
==========
<ul id="menu">
  <li><a href="#">Lorem</a></li>
  <li><a href="#">Ipsum</a>
    <ul>
      <li><a href="#">Consectetuer</a></li>
    </ul>
  </li>
  <li><a href="#">Dolor</a></li>
  <li><a href="#">Sit</a></li>
  <li><a href="#">Amet</a></li>
</ul>


CSS:
==========

ul#menu {
  /* Styles for menu unordered list */
}

ul#menu li {
  /* Styles for menu unordered list items */
}

ul#menu a { /* These styles are common to ALL links in this menu,
regardless of pseudoclass */
  text-decoration: none;
  font-size: 12px; /* Changed to 12px; 2px doesn't really make any sense...
*/
  font-family: arial,helvetica,tahoma,sans-serif; /* Changed to
'font-family'...no such thing as 'font-face'. Also, always specify a
generic family in case the user doesn't have your favourite font on their
system... */
  background-color:transparent;
}

ul#menu a:link,
ul#menu a:visited { /* These two pseudoclasses were identical in the
original styles, so combine them... */
  color: #00f; /* It's better to use the actual hex-values; you can also
abbreviate numbers such as #0000ff as #00f */
}

ul#menu a:hover {
  color:#fff;
}

ul#menu a:active {
  color:#ff0;
}


This kind of syntax:

ul#menu a:hover


...means "apply these styles ONLY to the hover state of <a> elements inside
the <ul> element with the id 'menu'". Using this kind of syntax, it is
possible get at very, very specific bits of markup with your CSS. If you
notice also in the example above, I have the same number of declarations as
you do with respect to your menu links, but my CSS will be far easier to
maintain than yours since I've grouped the common properties together, AND
since my method only relies on ONE declaration in the HTML, regardless of
how many menu items are present.

If you want to learn some more about CSS, try out the w3schools CSS
tutorials, and be sure to find out the difference between these ways of
specifying styles:

a.menu {}

.menu a {}

a .menu {}

a#menu {}

#menu a {}

a #menu {}


-Christopher

__________________________________________________
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com