[Typo3] Typo3.org Style Menu

[Christopher]

Hi,

On 6/17/05, Ryan Off <mail at ryanoff.com> wrote:
> I am having problems creating my menu with the beforeImg tag when my
> title are long and need to wrap. There was another post regarding this,
> with an answer which hinted at using beforeWrap. Unfortunately, I still
> have not figured out how to do it correctly as was hoping for an
> example. Basically I want to creat a menu with a roll over arrow
> specifying which page I am on, very similar to Typo3.org menu to the
> left of this article. Could someone please post soem example on how to
> make it work correctly?
> 
> Here is what I have currently:
> 
> temp.leftnav = HMENU
> temp.leftnav.1 = TMENU
> 
> temp.leftnav.1 {
> # Normal state properties
> wrap = |
> NO {
> wrapItemAndSub = &nbsp; |
> stdWrap.htmlSpecialChars = 1
> ATagParams = class="leftnav-level1-NO"
> allWrap = |
> beforeImg = EXT:tmpl_urbannomad/template/images/arrow_blue_clear.gif
> beforeROImg = EXT:tmpl_urbannomad/template/images/arrow_blue.gif
> beforeImgTagParams = hspace=5
> RO = 1
> after =
> ATagBeforeWrap = 1
> }
> }
> 
> The text on long menu items does not wrap as you can see at:
> http://gaiainternational.com/gaia/index.php?id=15
> 

Well, if I can offer an opinion, this is a disastrously complex way of
making what is really a very simple menu. Having said that, you can
find an example of almost _exactly_ what you want in the TS By Example
manual ( hint hint :-p ) [1].

And since I've opined that this method is er, sub-optimal, The way I'd
do it is shown below. You'll notice that the HTML and TS become
extremely simple, but some of the complexity moves into the CSS. It's
really not that complex, but you may prefer the complex TS instead. If
you like the CSS route, then google 'listamatic' for more good
list-based navigation samples...

-Christopher

[1] http://typo3.org/documentation/document-library/doc_core_tsbyex/TMENU/


CSS Method for Achieving the Same Effect:
__________________________________

TS:
==============================
temp.navigation = HMENU
temp.navigation {
  1 = TMENU
  1 {
    expAll = 1
    noBlur = 1
    wrap = <ul id="navigation">|</ul>
    NO.wrapItemAndSub = <li>|</li>
  }

  2 = TMENU
  2 {
    expAll = 1
    noBlur = 1
    wrap = <ul>|</ul>
    NO.wrapItemAndSub = <li>|</li>
  }
}


HTML (i.e. sample output of TS above):
==============================
<ul id="navigation">
  <li><a href="#">Lorem</a></li>
  <li><a href="#">Ipsum</a>
    <ul>
      <li><a href="#">Amet</a></li>
     <!-- The next line is long enough to test how the css behaves
when the line wraps: -->
      <li><a href="#">Consectetuer Adispiscing Adit</a></li>
    </ul>
  </li>
  <li><a href="#">Dolor</a></li>
  <li><a href="#">Sit</a></li>
</ul>

CSS:
==============================
/* Start by getting rid of excess margins, padding and list bullets: */
ul#navigation, ul#navigation ul, ul#navigation li, ul#navigation a
{padding:0; margin:0;}
ul#navigation, ul {list-style-type:none; width:200px;}

ul#navigation li {
  line-height:1.4em; /* Change to suit... */
}

/* This comment hides the following declaration from IE Mac. The
declaration itself should fix the big whitespace gaps between list
items in IE Win. For more information, google 'Holly Hack': \*/
* html #navigation li {height:1%;}
/* End hiding from IE Mac */

ul#navigation a { /* Styles for ALL first level navigation links: */
  display:block;
  
  font-family:helvetica,arial,tahoma,sans-serif;
  font-size:12px;
  line-height:1.4em;
  color:#003;
  text-decoration:none;

	padding-top:3px;
	padding-bottom:3px;
  padding-left:20px; /* Put a big space at the left of each item for
your background image to appear in... */
}

ul#navigation ul a {/* Styles for ALL second level navigation links: */
	padding-left:40px; /* Put a bigger space at the left of each item in
a nested list... */
}


/* Styles for top level links in normal and visited states */
ul#navigation a:link,
ul#navigation a:visited {
  background:#f90 url(path/to/bullet_image.gif) no-repeat center
center; /* This the image you're using for a bullet... */
}

/* Styles for top level links in hover and active states */
ul#navigation a:hover,
ul#navigation a:active {
	background:#900 url(path/to/bullet_image_ro.gif) no-repeat center
center; /* This is your rollover image */
  color:#fff;
}

/* Styles for second level links in normal and visited states */
ul#navigation ul a:link,
ul#navigation ul a:visited {
  background:#fc0 url(path/to/bullet_image.gif) no-repeat center
center; /* This the image you're using for a bullet... */
}

/* Styles for second level links in hover and active states */
ul#navigation ul a:hover,
ul#navigation ul a:active {
	background:#C00 url(path/to/bullet_image_ro.gif) no-repeat center
center; /* This is your rollover image */
	color:#fff;
}