[TYPO3-english] Positioning GMENU_LAYERS
Alessandro Tuveri
at at uniud.it
Thu Jul 12 17:23:43 CEST 2012
HI
wait a moment for the class, I should describe how to use it.
For the freedropdowncssmenu the work is less difficult as expected,
and recently I prefer to do the menus with this +ext.
To use freedropdowncssmenu do this:
1. load and install the +ext
2. in SETUP put this code (GMENU + freedropdowncss):
// unset the vertical mode and uses horizontal
plugin.freeCssDropDownMenu.vertical >
//$plugin.freeCssDropDownMenu(...) ---> set the constants before!
//this part of code inserts the stylesheet needed to construct the menus
//you should define your PATH below
{$plugin.freeCssDropDownMenu.page}.headerData.{$plugin.freeCssDropDownMenu.headerDataId}
>
{$plugin.freeCssDropDownMenu.page}.headerData.{$plugin.freeCssDropDownMenu.headerDataId} =
COA
{$plugin.freeCssDropDownMenu.page}.headerData.{$plugin.freeCssDropDownMenu.headerDataId}
{
10 = TEXT
10.value = <link rel="stylesheet" type="text/css" href="PUT
HERE YOUR PATH/dropdownmenu.css" />
// before:mtv.com/helper.css
//20 = TEXT
//20.value = <link rel="stylesheet" type="text/css" href="PUT
HERE YOUR PATH/dropdown.limited.css" />
// before: dropdown/dropdown.css
//21 = TEXT
//21.value = <link rel="stylesheet" type="text/css" href="PUT
HERE YOUR PATH/default.css" />
// before: themes/mtv.com/default.ultimate.css
}
// this 2nd part of code ensures back compatibility, check if
typo3cof/ext/freedropdownmenu PATH is right for your needings;
otherwise if the +ext is installed in GLOBAL SCOPE change the path for
javascripts listed below
[browser = msie] AND [version = <7.0]
{$plugin.freeCssDropDownMenu.page}.headerData.{$plugin.freeCssDropDownMenu.headerDataId}.90 =
TEXT
{$plugin.freeCssDropDownMenu.page}.headerData.{$plugin.freeCssDropDownMenu.headerDataId}.90.value
(
<script type="text/javascript"
src="typo3conf/ext/freecssdropdownmenu/res/js/jquery/jquery.js"></script>
<script type="text/javascript"
src="typo3conf/ext/freecssdropdownmenu/res/js/jquery/jquery.dropdown.js"></script>
)
[end]
//3rd part of the code: this makes the MENU as usually
//change the PATH TO YOUR FONT FOLDER and setup the rest (background,
colors, image dimension, etc.
plugin.freeCssDropDownMenu.horizontal = HMENU
plugin.freeCssDropDownMenu.horizontal {
special = directory
special.value = {$plugin.freeCssDropDownMenu.horizontal.start}
excludeUidList = {$plugin.freeCssDropDownMenu.horizontal.exclude}
if {
value = {$plugin.freeCssDropDownMenu.horizontal}
equals = 1
}
1 = GMENU
1 {
wrap = <ul id="nav" class="dropdown dropdown-horizontal"> | </ul>
lockPosition = 140,*
//xPosOffset = 30
expAll = 1
NO {
backColor = #52c1fe
//#1181e8
transparentBackground = #52c1fe
//#1181e8
transparentColor = #52c1fe
XY = [10.w],32
10 = TEXT
10.text.field = title
10.text.align = center
//10.text.case = upper
10.fontFile = PATH TO YOUR FONTS FOLDER/FRADMCN.TTF
10.fontColor = #ffffff
//#f6f6f6
10.fontSize = 20
10.iterations = 1
10.spacing = 0
10.offset = 0,24
10.niceText = 1
10.antiAlias = 1
//10.shadow.color = #000000
//10.shadow.blur = 12
//10.shadow.opacity = 40
//10.shadow.offset = 1,1
ATagTitle.field = title // navtitle
wrapItemAndSub = |*| <li class="first"> |
</li> |*| <li class="last"> | </li>
stdWrap.htmlSpecialChars = 1
}
RO < .NO
RO = 1
RO {
//backgroundColor = #51c2fe
//transparentColor =
//transparentBackground =
10.fontColor >
10.fontColor = #033b94
10.iterations = 2
}
ACT < .RO
ACT = 1
ACT {
10.shadow.color = #033b94
10.shadow.blur = 4
10.shadow.opacity = 40
10.shadow.offset = 2,2
10.fontColor = #ffffff
}
IFSUB < .NO
IFSUB {
wrapItemAndSub = |*| <li class="first"><span
class="dir"> | </span></li> |*| <li class="dir last"> | </li>
doNotLinkIt = 0
}
}
2 = TMENU
2 {
wrap = <ul> | </ul>
expAll = 1
noBlur = 1
NO = 1
NO {
ATagTitle.field = title // navtitle
wrapItemAndSub = |*| <li class="first"> |
</li> |*| <li class="last"> | </li>
stdWrap.htmlSpecialChars = 1
doNotLinkIt = 0
}
IFSUB < .NO
IFSUB {
wrapItemAndSub = |*| <li class="first"><span
class="dir"> | </span></li> |*| <li class="dir last"> | </li>
doNotLinkIt = 0
}
}
3 < .2
3.NO.doNotLinkIt = 0
4 < .3
5 < .3
}
----end of step 3. ----
Hope this can help you.
The best way to change the type of menu is to install the +ext; go to
res folder and open the source of each example. Then use the code
above to repeat the code needed, ie.: point to the right stylesheet,
change the properties of TS (fx: doNotLinkIt, etc.) to recreeat
dynamically the right code.
Hint: at this point should be almost "easy" to add some jQuery code to
obtain some effects to open the menus (animation, etc.).
Quoting Scotty C <superscotty19 at yahoo.com>:
> Correction: There is a manual in the ZIP file.
>
>
> ________________________________
> From: Scotty C <superscotty19 at yahoo.com>
> To: TYPO3 English <typo3-english at lists.typo3.org>
> Sent: Thursday, July 12, 2012 4:01:40 AM
> Subject: Re: [TYPO3-english] Positioning GMENU_LAYERS
>
> Hi Alessandro,
>
> Excellent information!
> I'm interested in the workaround class you created. Also, I found a
> T3X package for freedropdowncssmenus
> at http://typo3.org/extensions/repository/view/freecssdropdownmenu but it
> contains no manual so I'm not sure how to use. In either case, can
> you provide a code snippet?
>
> Thanks!
> -Scott.
>
>
> ________________________________
> From: Alessandro Tuveri <at at uniud.it>
> To: typo3-english at lists.typo3.org
> Sent: Thursday, July 12, 2012 3:49:01 AM
> Subject: Re: [TYPO3-english] Positioning GMENU_LAYERS
>
> Hi
> hope my issue will be useful.
> GMENU and TMENU are positioned creating some layers at the beginning
> of the page; to be more precise, after the BODY tag.
> This is very annoiyng because if the width of your site is fixed
> (ie. 960px) and centered on the browser window, there is several
> problems to keep the 2nd level menus below the top level menu.
> I solved using:
> * a class modified by myself with a workarond
> or
> * create the menus (GMENU / TMENU) only with the CSS styles, see
> freedropdowncessmenus
>
> bye
>
> Quoting Scotty C <superscotty19 at yahoo.com>:
>
>> Loek,
>>
>> Sorry, I assumed that the links would imply a "View Source" -> CSS.
>> Anyway, here's what I've got:
>>
>> <div id="menu_items" style="position: absolute;
>> width: 595px;
>> height: 100px;
>> top:0px;
>> left: 35%;
>> text-align:left;
>> z-index: 200;
>> border: 1px solid yellow;">
>> <table width="100%" height="100%" cellpadding="0" cellspacing="0">
>> <tr>
>> <td>
>> <!-- ###MENU### START -->
>> MENU GOES HERE ITEM 2 ITEM 3 ITEM 4 ITEM 5 ITEM 3 ITEM 4 ITEM 5
>> <!-- ###MENU### END -->
>> </td>
>> </tr>
>> </table>
>> </div>
>>
>>
>> Thanks for the help!
>> -S.
>>
>>
>>
>> ________________________________
>> From: Loek Hilgersom <loek at netcoop.nl>
>> To: typo3-english at lists.typo3.org
>> Sent: Thursday, July 12, 2012 3:27:04 AM
>> Subject: Re: [TYPO3-english] Positioning GMENU_LAYERS
>>
>> On 12-07-12 08:20, Scotty C wrote:
>>> I've been staring at this code for hours and I'm ready to snap.
>>> What am I missing?
>>
>> Maybe you've been staring at the wrong code, try staring at the CSS! ;-)
>>
>> Loek
>> _______________________________________________
>> TYPO3-english mailing list
>> TYPO3-english at lists.typo3.org
>> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english
>> _______________________________________________
>> TYPO3-english mailing list
>> TYPO3-english at lists.typo3.org
>> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english
>>
>
>
>
> ALESSANDRO TUVERI
>
> --------------------------------------
> AREA SERVIZI INFORMATICI E MULTIMEDIALI
> Servizi WEeb d'Ateneo
> Universit? degli Studi di Udine
> tel. ufficio 0432-558904
> --------------------------------------
> Homo sine pecunia est imago mortis
> --------------------------------------
>
> ----------------------------------------------------------------------
> SEMEL (SErvizio di Messaging ELettronico) - AINF, Universita' di Udine
>
>
> _______________________________________________
> TYPO3-english mailing list
> TYPO3-english at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english
> _______________________________________________
> TYPO3-english mailing list
> TYPO3-english at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english
> _______________________________________________
> TYPO3-english mailing list
> TYPO3-english at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english
>
ALESSANDRO TUVERI
--------------------------------------
AREA SERVIZI INFORMATICI E MULTIMEDIALI
Servizi WEeb d'Ateneo
Universit? degli Studi di Udine
tel. ufficio 0432-558904
--------------------------------------
Homo sine pecunia est imago mortis
--------------------------------------
----------------------------------------------------------------------
SEMEL (SErvizio di Messaging ELettronico) - AINF, Universita' di Udine
More information about the TYPO3-english
mailing list