[Typo3] how can i deal with the menu format controlled by a Javascript

[Erik Svendsen]

Hello zsl,

> Hi,
> Question1: As you can see here below,that is for one menu item,at the
> same time there is a text (menu item 1)and a gif (button_arrow.gif)
> for
> one menu item.of course i will substitute the text(menu item 1)to my
> page header when i write the typoscript,but what can i do with the
> .gif(button_arrow.gif)

See inn TS by examples chapter 7.0.2 (or follow my advise further down).

> -----------------------------------------------------------------
> <tr>
> <td width="10">&nbsp;</td>
> <td width="5">&nbsp;</td>
> <td width="109" class="unseltoc" height="20"
> onClick="javascript:show('Layer1');"><a href="#" class="unseltoc">menu
> item 1</a></td>
> <td width="14" align="right"
> onClick="javascript:show('Layer1');"><a href="#"><img
> src="images/button_arrow.gif" width="14" height="14" border="0"
> alt="arrow button" title="arrow button"></a></td>
> <td width="5">&nbsp;</td>
> </tr>
> ---------------------------------------------------------------------
> Question2: the format of the subpages of Menu item 1 are controlled by
> the Javascript that you can find in the html above.what can i deal
> with
> that in the typo3?
> -------------------------------------------------------------------
> <div id="Layer1" style="position:.......
> //the content inside is in charge of the format of the subpages
> ...
> </div>
> -------------------------------------------------------------------
> 

I'm not sure I can give you all the answers, but I can try. At first, why 
are you using javascript. Is it because of you want the submenu to show in 
a new layer when people are clicking on the menu. Javascript has here an 
disadvantage, some people are turning javascript off. It's also very difficult 
for people with different dissabilities.

And I think your coding of the menu are far to complicated. Remember - typoscript 
are putting the link in where the | is, the rest isn't really linkable. So 
with your example (se earlier post), i don't think you can click on the arrow. 
Take a god look on the chapter 7 in TS by examples. It's her I have learned 
everything about menus in TYPO3. One way to make an menu with layers are 
using GMENU_LAYER (http://typo3.org/documentation/document-library/doc_core_tsbyex/GMENU_LAYER/). 


A much better aproach (in my opinion) is using unordred list/tables with 
css. An example here http://www.cssplay.co.uk/menus/dropdownfun.html. Not 
the best. Another one http://www.alistapart.com/articles/hybrid/, a third 
http://www.alistapart.com/articles/horizdropdowns/ (horisontal), and a fourth 
one http://www.htmldog.com/articles/suckerfish/example/.

Some of them has also neccessary javascript to get it working in IE, and 
where to put it.

I would have made a dropdown-menu somhow like this.
<ul class="mainnav">
   <li class="mainav-no"><a href="#">First item</a>
   <ul class="subnav-layer">
       <li class="subnav-layer-no"><a href="#">First subitem</a>
       <li class="subnav-layer-act"><a href="#">Second subitem</a>
   <li class="mainav-act"><a href="#">Second item</a>
   <li class="mainav-no"><a href="#">Third item</a>
</ul>

Haven't time to make som css.

Typoscript like this

lib.mainMenu = HMENU
lib.mainMenu.entryLevel = 0
lib.mainMenu.wrap = <ul class="mainnav">|</ul>			
lib.mainMenu.1 = TMENU
lib.mainMenu.1.noBlur = 1
lib.mainMenu.1.NO {
        allWrap = <li class="mainnav-no">|</li>
        linkWrap = |
}
	
lib.mainMenu.1.ACT = 1
lib.mainMenu.1.ACT {
       allWrap = <li class="mainnav-act">|</li>
}

lib.subMenu = HMENU
lib.subMenu.entryLevel = 1
lib.subMenu.wrap = <ul class="subnav-layer">|</ul>									
lib.subMenu.1 = TMENU
lib.subMenu.1.noBlur = 1
lib.subMenu.1.NO {
        allWrap = <li class="subnav-layer-no">|</li>
        linkWrap = |
}
	
lib.subMenu.1.ACT = 1
lib.subMenu.1.ACT {
       allWrap = <li class="subnav-layer-act">|</li>
}

I haven't tested it, but with the correct css you can do nearly whatever 
you want. The arrow can you have as a background image in css, using padding 
and margin to get correct position of text reagrding to the arrow.

Maybe not the answer you wanted, but I think your way of coding menus isn't 
anything to recommend. And always try to start with simple solutions, and 
expand them along the way. Starting with complex configuration make it difficult 
to track errors.


WBR
Erik Svendsen
www.linnearad.no