[TYPO3] HMENU and TMENU help please

[Christopher]

On 8/20/06, Bryan <support at chillifactory.co.za> wrote:
>
<snip>
>
> Apologies,
> This is the template I'm using
> http://dedi13b.your-server.co.za/smiths/fileadmin/template/smiths_main/products.htm
>
> And this is the original file, What it's suppose to look like
> http://dedi13b.your-server.co.za/smiths/fileadmin/template/smiths_main/products_desc.htm


You should probably take Joey's advice: an unordered list is by far
the _simplest_ way to make a menu like this (which, by the way, is
broken in Opera, Safarai and Mozilla browsers including Firefox). Your
HTML will look something like this:

HTML:

<div id="navigation">
  <h2>&lt;Product&gt;</h2>
  <img src="images/smiths-product-photo.jpg" alt="smiths product
photo" height="125" width="217">
  <h3>More Products</h3>
  <ul>
    <li><a href="product-a/">Product a</a></li>
    <li><a href="product-b/" class="current">Product b</a></li>
    <li><a href="product-c/">Product c</a></li>
  </ul>
</div>

...and the TS to make that markup will look something like this
(though you'll probably want to make lib.navigation.5 and
lib.navigation.10 dynamic):

TS:

lib.navigation = COA
lib.navigation {
  wrap = <div id="navigation">|</div>

  ### You might want to do these bits differently and make them dynamic...
  ###

  5 = HTML
  5 {
    value = &lt;Product&gt;
    value.wrap = <h2>|</h2>
  }

  10 = IMAGE
  10 {
    file = images/smiths-product-photo.jpg
  }

  15 = HTML
  15 {
    value = More Products
    value.wrap = <h3>|</h3>
  }

  20 = HMENU
  20 {
    1 = TMENU
    1 {
      noBlur = 1

      NO {
        wrapItemAndSub = <li>|</li>
      }

      ACT = 1
      ACT < .NO
      ACT.wrapItemAndSub = <li class="current">|</li>
    }
  }
}

I'm not going to write out all of the CSS, but here's a list of the
basic things you'll need to do:

-- red background image for h2
-- gradient background image for h3
-- gradient background image and l/r padding for list items
-- grey background image, display:block for links
-- bottom padding and rounded bottom background image for ul element

For more information, about how to do this kind of thing with lists,
have a look at http://css.maxdesign.com.au/listamatic/

-Christopher