[TYPO3-english] drop down menu

[Martin Mädler]

Hi Girmangus,

this is how I realized a dropdown menu (with 1 sublevel):

*template:*
...
<div id="navigationFirstLevel">
<div id="navigationFirstLevelMenu">
         ###MENU###
</div>
</div>
...

*main template typoscript:*
temp.navigation=HMENU
temp.navigation{
1=TMENU
1{
wrap=<ul>|</ul>
# Always unfold all sub-levels of the menu
expAll=1
noBlur=1
NO=1
NO{
# Use the page title field the title property on the A-tag, but only if 
the navigation title is set
ATagTitle{
field=title
fieldRequired=nav_title
}
wrapItemAndSub=<li>|</li>|*|<li>|</li>|*|<liclass="last">|</li>
stdWrap.htmlSpecialChars=1
}
ACT<.NO
ACT{
ATagParams=class="active"
}
CUR<.NO
CUR{
ATagParams=class="selected"
}
}
2<.1
2{
wrap=<ulclass="dropdown">|</ul>
ACT<.NO
CUR<.NO
}
}

temp.documentBody=TEMPLATE
temp.documentBody{
template=FILE
template.file=fileadmin/template/main.html
workOnSubpart=DOCUMENT_BODY
marks.MENU<temp.navigation
}

*CSS*

div#navigationFirstLevelMenu ul.dropdown{
	display: none;
}


*JavaScript included into html:*
jQuery and the following code at document ready

     $dropdownSet = $('.dropdown');

     $dropdownSet.prev().hover(
         function() {
             $(this).next().data('dropdown', true);
             $(this).addClass('hover'); // optional for styling
             $(this).next().slideDown();
         },
         function() {
             $this = $(this).next();
             $this.data('dropdown', false);
             if($this.data('hover') !== true) { // if the mouse is not 
currently on top of the expanded submenu
                 $this.fadeOut('fast');
                 $this.prev().removeClass('hover'); // optional for styling
             }
         }
     );
     $dropdownSet.hover(
         function() {
             $(this).data('hover', true);
         },
         function() {
             $this = $(this);
             $this.data('hover', false);
             if($this.data('dropdown') !== true) {
                 $this.fadeOut('fast');
                 $this.prev().removeClass('hover'); // optional for styling
             }
         }
     );


You need to tweak the css a bit. I can also post all css I used for the 
menu, but I wanted to keep it simple for now.

Best Regards
Martin

Am 20.08.2011 15:46, schrieb Girmangus Hailu:
> hello there,
>
> I'm looking on the extension repository for a jquery or JavaScript a drop
> down menu like on the beta site. plus also looking for a login drop
> down. sorry for asking too elementary extension names(I try to search but i
> could find one)
>
>
> thank you.
>
> Girmangus H
> _______________________________________________
> TYPO3-english mailing list
> TYPO3-english at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english