[TYPO3-UG US] Menu question (was: Re: TYPO3-UG-US Digest, Vol 19, Issue 3)

[Christopher Torgalson]

Hi again,

On 11/3/06, K from DC <kfromdc at gmail.com> wrote:
> Hi Christopher,
>
> Question: what are you trying to achieve? What _should_ the resulting
> markup look like?
>
> Answer: The way the menu works now:
>
> at level 1:
>
> Page1
> Page2
> Page3
>
> -------------------------
>
> at level 2 (after clicking on Page1):
>
> Page1
>    Subpage 1
>    Subpage 2
> Page2
> Page3


This is not markup. What should the HTML look like? Except for obvious
syntactical errors, t's very difficult to debug TS without knowing
what the output is _supposed to_ look like.


> Every link in the menu is of class "no" and depending on the level, it gets
> the appropriate styling. This is all fine but I'd like to add some
> functionality:
> 1. Give the current page link a class "cur" so that I can style it
> differently, i.e. I'd like the users to be able to tell which is the current
> page in the menu
> 2. Give an indication that a page has subpages, by adding ">>" at the end of
> the link for example.
>
> And just for the record, the menu was created by somebody else (long time
> ago,) I'm new to TYPO3, and my abilities to figure out how to modify the
> markup are rather limited at the moment.


Based on your requirements above, you should be able to use CSS to
style the output of the following TS as you've indicated:

lib.menu = HMENU
lib.menu {
	1 = TMENU
	1 {
		wrap = <ul id="nav">|</ul>
		noBlur = 1
			
		NO = 1
		NO {
			wrapItemAndSub = <li>|</li>
		}
			
		ACT = 1
		ACT {
			wrapItemAndSub = <li class="current">|</li>
		}
		
		ACTIFSUB = 1
		ACTIFSUB {
			wrapItemAndSub = <li class="current parent">|</li>
		}
	}
	
	2 < .1
	2.wrap = <ul>|</ul>
	3 < .2
	4 < .2
}


This will produce HTML like this:

<ul id="nav">
  <li>
    <a href="#">Lorem</a>
  </li>
  <li>
    <a href="#">Ipsum</a>
  </li>
  <li class="current parent">
    <a href="#">Dolor</a>
    <ul>
      <li>
        <a href="#">Sit</a>
      </li>
      <li>
        <a href="#">Amet</a>
      </li>
      <li>
        <a href="#">Adipiscing</a>
      </li>
      <li class="current">
        <a href="#">Elit</a>
      </li>
      <li>
        <a href="#">Mauris</a>
      </li>
      <li>
        <a href="#">Sodales</a>
      </li>
      <li>
        <a href="#">Consectetuer</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Ligula</a>
  </li>
  <li>
    <a href="#">Donec</a>
  </li>
</ul>


You mentioned (I think) that every item had a class, but to do that is
just to unnecessarily bloat your code; you can style the links like
this:

/* 'NO' state, level 1: */
#nav a { ... }

/* 'NO' state level 2: */
#nav ul a { ... }

/* 'NO' state level 3: */
#nav ul ul a { ... }

/* 'NO' state level 4: */
#nave ul ul ul a { ... }

/* 'ACT' state: */
#nav li.current a { ... }

/* 'ACTIFSUB' state: */
#nav li.parent a { ... }



-- 
Christopher Torgalson