I have the below typoscript
lib.nav = HMENU
lib.nav {
wrap = <ul> | </ul>
1 = TMENU
1 {
expAll=1
NO {
|*| <ul><li> | </li></ul> |*| <ul><li> | </li></ul> || <ul><li class="last"> | </li></ul> |*|
wrapItemAndSub = |*| <li> | </li> |*| <li> | </li> || <li class="last"> | </li> |*|
stdWrap.cObject = CASE
stdWrap.cObject {
key.field = doktype
default = TEXT
default.field = title
default.typolink.parameter.data = field:uid
default.typolink.ATagBeforeWrap=0
3 < .default
3 {
stdWrap.htmlSpecialChars = 1
typolink {
parameter {
data >
dataWrap = http://{field:url}
}
}
}
}
doNotLinkIt = 1 # to avoid "<a>" repeated twice
subst_elementUid = 1
}
}
2 = TMENU
2 {
expAll=1
wrap = <ul> | </ul>
NO {
wrapItemAndSub = |*| <li> | </li> |*| <li> | </li> || <li> | </li> |*|
stdWrap.cObject = CASE
stdWrap.cObject {
key.field = doktype
default = TEXT
default.field = title
default.typolink.parameter.data = field:uid
default.typolink.ATagBeforeWrap=0
3 < .default
3 {
stdWrap.htmlSpecialChars = 1
typolink {
parameter {
data >
dataWrap = http://{field:url}
}
}
}
}
doNotLinkIt = 1 # to avoid "<a>" repeated twice
subst_elementUid = 1
}
}
}
Which seems to work well, however I have notice a slight glitch when I have an external url page in the nav. It generates the below code for an external url.
<ul>
<li>External Links
<ul>
<li><a target="_top" href="http://example.com/1">Example 1</a></li>
<li><a target="_top" href="http://example.com/2">Example 2</a></li>
<li><a target="_top" href="http://example.com/3">Example 3</a></li>
</ul>
</li>
</ul>
How do I remove this default setting? I want it to be configurable per page in the behaviour tab (link target field in LTS 4.5).
I also have the below set in my constants.
PAGE_TARGET =
content.pageFrameObj =
Set in setup the extTarget via config. It is default "_top".
# just set it to an empty string instead of _top
config.extTarget =
Related
I would like to create a dropdown login box in the menu. When users hover over "login" in the menu, it shows the login or register form. I found an example here: https://www.planet-sports.com/en/
I am quite new to TYPO3 so I don't know where I should start. Is there a way to do this with Typoscript only or should I modify the navbar with html and javascript? What is the best way to do this ?
EDIT: I am using a custom theme (not done by myself)
The Menu is called in a "header.html" file like this:
<nav class="collapse navbar-collapse navbar-main-collapse" role="navigation">
<f:cObject typoscriptObjectPath="menu.navbar" />
</nav>
Typoscript for the navbar:
menu.navbar = HMENU
menu.navbar {
entryLevel = 0
excludeUidList = 112
1 = TMENU
1 {
expAll = 1
stdWrap.dataWrap = <ul class="nav navbar-nav colum-{register:count_menuItems}">|</ul>
NO {
htmlSpecialChars = 1
wrapItemAndSub = <li id="navbar{field:uid}" class="first" >|</li> |*| <li id="navbar{field:uid}">|</li> |*| <li id="navbar{field:uid}" class="last navbar-right">|</li>
wrapItemAndSub.insertData = 1
ATagTitle.field = description // subtitle
}
ACT = 1
ACT {
htmlSpecialChars = 1
wrapItemAndSub = <li id="navbar{field:uid}" class="first active">|</li> |*| <li id="navbar{field:uid}" class="active">|</li> |*| <li id="navbar{field:uid}" class="last active navbar-right">|</li>
wrapItemAndSub.insertData = 1
ATagTitle.field = description // subtitle
}
IFSUB = 1
IFSUB {
ATagTitle.field = description // subtitle
wrapItemAndSub = <li id="navbar{field:uid}" class="dropdown first">|</li> |*| <li id="navbar{field:uid}" class="dropdown">|</li> |*| <li id="navbar{field:uid}" class="dropdown last">|</li>
wrapItemAndSub.insertData = 1
stdWrap.htmlSpecialChars = 1
ATagParams = class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
linkWrap = |<span class="caret"></span>
ATagBeforeWrap = 1
}
ACTIFSUB < .IFSUB
ACTIFSUB = 1
ACTIFSUB.wrapItemAndSub = <li id="navbar{field:uid}" class="dropdown first active">|</li> |*| <li id="navbar{field:uid}" class="dropdown active">|</li> |*| <li id="navbar{field:uid}" class="dropdown last active">|</li>
}
2 = TMENU
2 {
expAll = 1
wrap = <ul class="dropdown-menu">|</ul>
NO.htmlSpecialChars = 1
NO.wrapItemAndSub = |*| <li class="odd">|</li> || <li class="even">|</li> |*|
ACT = 1
ACT.htmlSpecialChars = 1
ACT.wrapItemAndSub = |*| <li class="odd active">|</li> || <li class="even active">|</li> |*|
}
3 = TMENU
3 {
expAll = 1
wrap = <ul class="dropdown-submenu">|</ul>
NO.htmlSpecialChars = 1
NO.wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
ACT = 1
ACT.htmlSpecialChars = 1
ACT.wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="active last">|</li>
}
4 = TMENU
4 {
wrap = <ul class="dropdown-submenu-1">|</ul>
NO.htmlSpecialChars = 1
NO.wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
ACT = 1
ACT.htmlSpecialChars = 1
ACT.wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="active last">|</li>
}
}
first of all: the visibility of a layer can be handled with CSS (even fade in/fade out or explode/implode). just put all content in a div which is included in the trigger div.
How you get your content into this div depends of the kind you build your page. fluid-template, marker-template, pure typoscript.
there are multiple ways to get the login form (and other content) into the div: create it by typoscript, get the content from a fix page, get the content from a special column which is inherited to all subpages (slide).
just be a little be more specific what your current configuration is, what you are familiar with and what you want to achieve.
I am building a navigation menu with TYPOscript which is extended with content from the tt_content table.
Now I am trying to change the CSS-class of the parent element (.drop-wrapp), if there is content from tt_content and put the page title from parent page in second level (here: "PAGE TITLE FIRST LEVEL").
This is my TYPOscript so far:
lib.navMain = COA
lib.navMain {
10 = TEXT
10.wrap = |
10.value = {$const.lang.navi.skip}
10.typolink {
parameter.data = page:uid
parameter.dataWrap = |#skipMainNavi
ATagParams = class="sr-only sr-only-focusable"
}
20 = HMENU
20 {
special = directory
special.value = {$const.pid.home}
entryLevel = 0
1 = TMENU
1 {
wrap = <ul class="nav navbar-nav" role="menubar">|</ul>
expAll = 1
target = _top
noBlur = 1
wrap= <ul class="nav navbar-nav" role="menubar">|</ul>
NO {
wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
linkWrap = |
ATagParams = role="menuitem"
title = field:title
ATagTitle.field = subtitle // title
}
ACT < .NO
ACT = 1
ACT {
wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="last active">|</li>
ATagParams = class="mainmenuActive"
# linkWrap = <strong>|</strong>
}
}
2 < .1
2 {
wrap = <div class="drop-wrapp CLASS_IF_CONTENT_FROM_TT_CONTEN"><div class="drop-wrapp-inner">|</div></div>
20 = HMENU
20 {
special = directory
special.value.data = field:pid
1 = TMENU
1 {
expAll = 1
NO {
wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
linkWrap = |
ATagParams = role="menuitem"
title = field:title
ATagTitle.field = subtitle // title
}
ACT < .NO
ACT = 1
ACT {
wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="last active">|</li>
ATagParams = class="mainmenuActive"
# linkWrap = <strong>|</strong>
}
}
}
stdWrap.append = CONTENT
stdWrap.append {
table = tt_content
select {
pidInList.field = pid
where = colPos=1 AND deleted=0 AND hidden=0
orderBy = sorting
languageField = sys_language_uid
max = 2
}
stdWrap {
wrap = <div class="teaser-block"><div class="teaser-block-inner"><strong class="title">PAGE TITLE FIRST LEVEL</strong><div class="teaser-text">|</div></div></div>
// wrap only if there is content!
required = 1
}
}
stdWrap.innerWrap = <div class="drop-block"><ul class="list-unstyled nav-list" role="menubar">|</ul></div>
}
}
30 = TEXT
30.wrap = <a id="skipMainNavi" class="sr-only">|</a>
30.value =
30.htmlSpecialChars = 0
}
UPDATE:
This is very breafly what I want to achieve:
<nav>
<ul>
<li>Level 0.0</li>
<li>
Level 0.1
<div class="drop-wrapp wide"><!-- only add class ".wide" if there is content from tt_content in "div.teaser-block" -->
<div class="drop-wrapp-inner">
<div class="drop-block">
<ul>
<li>Level 1.0</li>
<li>Level 1.1</li>
<li>Level 1.2</li>
</ul>
</div>
<div class="teaser-block">
Here is content from tt_content
</div>
</div>
</div>
</li>
<li>Level 0.2</li>
</ul>
</nav>
I am sure, there are better solutions, but the following example works now for me. My trick are the two elements after the "30 = CONTENT" element. If there is content from tt_content I open a "div"-element and close if afterwards. Maybe there is a better way to do this with a special wrap?
lib.navMain = COA
lib.navMain {
10 = TEXT
10.wrap = |
10.value = {$const.lang.navi.skip}
10.typolink {
parameter.data = page:uid
parameter.dataWrap = |#skipMainNavi
ATagParams = class="sr-only sr-only-focusable"
}
20 = HMENU
20 {
special = directory
special.value = {$const.pid.home}
entryLevel = 0
1 = TMENU
1 {
expAll = 1
target = _top
noBlur = 1
wrap = <ul class="nav navbar-nav" role="menubar">|</ul>
NO {
wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
linkWrap = |
ATagParams = role="menuitem"
title = field:title
ATagTitle.field = subtitle // title
}
ACT < .NO
ACT = 1
ACT {
wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="last active">|</li>
ATagParams = class="mainmenuActive"
# linkWrap = <strong>|</strong>
}
}
2 < .1
2 {
wrap = <div class="drop-wrapp"><div class="drop-wrapp-inner">|</div></div>
stdWrap.cObject = COA
stdWrap.cObject {
20 = HMENU
20 {
special = directory
special.value.data = field:pid
1 = TMENU
1 {
expAll = 1
wrap = <div class="drop-block"><ul class="list-unstyled nav-list" role="menubar">|</ul></div>
NO {
wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
linkWrap = |
ATagParams = role="menuitem"
title = field:title
ATagTitle.field = subtitle // title
}
ACT < .NO
ACT = 1
ACT {
wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="last active">|</li>
ATagParams = class="mainmenuActive"
# linkWrap = <strong>|</strong>
}
}
}
30 = CONTENT
30 {
table = tt_content
select {
pidInList.field = pid
where = colPos=99 AND deleted=0 AND hidden=0
orderBy = sorting
languageField = sys_language_uid
max = 2
}
stdWrap {
wrap = |
// wrap only if there is content!
required = 1
}
}
1 = COA
1 {
if.isTrue.numRows < lib.navMain.20.2.stdWrap.cObject.30
10 = TEXT
10.value = <div class="wide">
}
100 = COA
100 {
if.isTrue.numRows < lib.navMain.20.2.stdWrap.cObject.30
10 = TEXT
10.value = </div><!-- /.wide -->
}
}
}
}
30 = TEXT
30.wrap = <a id="skipMainNavi" class="sr-only">|</a>
30.value =
30.htmlSpecialChars = 0
}
i am wondering if there is a way in TYPOSCRIPT to count the childrens in a menu.
The output should be something like:
<ul class="ebene1" data-elements="4">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 2</li>
<li>Element 2</li>
</ul>
My Code looks like this:
script.NAV = HMENU
script.NAV {
special = directory
special.value = 6
1 = TMENU
1 {
expAll = 1
noBlur = 1
wrap = <ul class="menu main" id="nav-main">|</ul>
NO = 1
NO.wrapItemAndSub = <li class="first element1">|</li> |*| <li class="element1">|</li> |*| <li class="last element1">|</li>
CUR = 1
CUR.wrapItemAndSub = <li class="first element1 current">|</li> |*| <li class="element1 current">|</li> |*| <li class="last element1 current">|</li>
...
Thanks, any help is really appreciated.
Use the register {register:count_MENUOBJ} like this should solve your problem.
1 = TMENU
1 {
NO = 1
NO {
wrapItemAndSub.insertData = 1
wrapItemAndSub = <li class="element-{register:count_MENUOBJ}">|</li>
}
}
Actually although that may be done as #Marcus showed (I believe that snippet works, didn't check) it is probably faster approach to us JavaScript for this; as easy as:
<ul class="ebene1">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element X</li>
</ul>
<script>$('.ebene1').attr('data-elements', $('.menu > li').length);</script>
And CSS like:
.ebene1[data-elements="4"] {
background-color: yellow;
}
On the other hand...
If you have dynamic menu with unknown number of items, instead adding many CSS declarations like,
.ebene1[data-elements="3"] li {width: 33.333%;}
.ebene1[data-elements="4"] li {width: 25%;}
.ebene1[data-elements="5"] li {width: 20%;}
Avoid adding the data- attribute via JS and just change the width by calculating the correct value:
$('.ebene1 > li').css({width: 100 / $('.ebene1 > li').length + '%'});
You need the stdWrap function numrows. There you can add any table together with a select statement. Here is an example:
lib.countmenu = COA
lib.countmenu {
10 = HMENU
10.1 = TMENU
10.1 {
wrap = <ul>|</ul>
NO {
stdWrap.cObject = COA
stdWrap.cObject {
30 = TEXT
30.numRows.table = pages
30.numRows.select.pidInList.field = uid
30.numRows.select.where = nav_hide!=1 AND doktype!=5 AND doktype!=6
30.dataWrap = {field:title} [|]
}
wrapItemAndSub = <li>|</li>
}
}
}
I am trying to implement my navigation with typoscript and I am having problems to understand how to wrap right.
I already have a base navigation with 1 level that is working fine.
Now I have pages that has subpages and other that don't have.
For the ones without subpages I want the behavior that I have now.
For the pages with subpages I want to add this as an dropdown menu.
The HTML code should look like this.
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Test0
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="">DropwDownItem1</li>
</ul>
</li>
<li class="active">Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
TypoScript:
lib.menu = HMENU
lib.menu {
special = list
special.value = 3,2
1 = TMENU
1 {
wrap = <ul class="nav">|</ul>
expAll = 1
NO.wrapItemAndSub = <li class="">|</li>
RO < .NO
RO = 1
CUR < .NO
CUR = 1
CUR.wrapItemAndSub = <li class="active">|</li>
ACT < .CUR
IFSUB = 1
IFSUB.wrapItemAndSub= <li class="dropdown">|</li>
IFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
IFSUB.stdWrap.innerWrap= |<b class="caret"></b>
ACTIFSUB = 1
ACTIFSUB.wrapItemAndSub= <li class="dropdown">|</li>
ACTIFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
ACTIFSUB.stdWrap.innerWrap= |<b class="caret"></b>
CURIFSUB = 1
CURIFSUB.wrapItemAndSub= <li class="dropdown">|</li>
CURIFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
CURIFSUB.stdWrap.innerWrap= |<b class="caret"></b>
}
2 = TMENU
2 {
wrap = <ul class="dropdown-menu">|</ul>
expAll = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
}
}
//EDIT: I have changed the code but now when I click on an item in the dropdown menu the ul class="dropdown-menu" is wrapped two times and the dropdown isn't shown properly.
The option noBlur is removed since TYPO3 v6.0 and I read somewhere, that the RO state does something with javascript to show/hide the submenu - so I try not to use it. I rather do the showing/hiding via css.
I would've done it like this:
lib.menu = HMENU
lib.menu {
special = list
special.value = 3,2
1 = TMENU
1 {
expAll = 1
wrap = <ul class="nav">|</ul>
NO.wrapItemAndSub = <li>|</li>
CUR = 1
CUR.wrapItemAndSub = <li class="active">|</li>
ACT < .CUR
}
2 = TMENU
2 {
wrap = <ul>|</ul>
NO = 1
NO.wrapItemAndSub = <li>|</li>
}
}
Add the hover-effect via CSS:
.nav ul {
display: none;
}
.nav li:hover ul {
display: block;
}
The <ul> wrap of your subnavi should be around the TMENU. I don't think you need the ATagBeforeWrap as it only makes linkWrap within the <a> tag. So it should look like this (not tested):
lib.menu = HMENU
lib.menu {
special = list
special.value = 3,2
1 = TMENU
1 {
wrap = <ul class="nav">|</ul>
expAll = 1
NO.wrapItemAndSub = <li class="">|</li>
RO < .NO
RO = 1
CUR < .NO
CUR = 1
CUR.wrapItemAndSub = <li class="active">|</li>
ACT < .CUR
noBlur = 1
IFSUB = 1
IFSUB.wrapItemAndSub= <li class="dropdown">|</li>
}
2 = TMENU
2 {
wrap = <ul class="dropdown-menu">|</ul>
expAll = 1
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
}
}
Here you can find good info about wraps, unfortunately it's in german: http://jweiland.net/typo3/typoscript/wrap-moeglichkeiten-und-hierarchie-in-menues.html
By the way: if you are using TYPO3 6+ the noBlur setting has been removed.
---> EDIT:
I shortened your code a little, but I really coudn't reproduce the problem. For me it's working fine. The li around the dropdown gets the dropdown class. But I don't see a duplicate of the <ul class="dropdown-menu">
special = list
special.value = 3,2
1 = TMENU
1 {
wrap = <ul class="nav">|</ul>
expAll = 1
NO = 1
NO.wrapItemAndSub = <li class="">|</li>
RO < .NO
CUR < .NO
CUR.wrapItemAndSub = <li class="active">|</li>
ACT < .CUR
IFSUB = 1
IFSUB.wrapItemAndSub= <li class="dropdown">|</li>
IFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
IFSUB.stdWrap.innerWrap= |<b class="caret"></b>
ACTIFSUB < .IFSUB
CURIFSUB < .IFSUB
}
2 = TMENU
2 {
wrap = <ul class="dropdown-menu">|</ul>
expAll = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
}
This snippet I have used for internal page links:
I have used subtitle field for internal navigation.
for example:
<a href="#about>about</a>
Ourservice
menu.main_menu = HMENU
menu.main_menu {
#special = directory
#special.value = 2
1 = TMENU
1 {
wrap = <ul class="nav navbar-nav navbar-right">|</ul>
expAll = 1
noBlur = 1
NO = 1
NO {
doNotLinkIt = 1
allWrap.insertData = 1
allWrap = <li class="first menu-{field:uid}">|</li>
}
ACT < .NO
ACT {
ATagParams = class="active dropdown"
allWrap = <li class="active first menu-{field:uid}">|</li> |*| <li class="active menu-{field:uid}">|</li>
}
CUR < .NO
CUR {
ATagParams = class="parent_menu active"
allWrap = <li class="first active menu-{field:uid}">|</li> |*| <li class="active menu-{field:uid}">|</li>
}
}
}
I am working on a menu, showing the first level as normal links. The second menu level should be build as anchor menu from the content elements. Inspired by this post I build the following ts:
lib.footerMenu = HMENU
lib.footerMenu {
1 = TMENU
1 {
wrap = <ul class="nav">|</ul>
noBlur = 1
NO = 1
NO {
wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
ATagParams = class="first" |*| |*| class="last"
after.cObject = CONTENT
after.cObject {
table = tt_content
select {
pidInList = this
orderBy = sorting
where = colPos=1
languageField = sys_language_uid
}
wrap = <ul>|</ul>
renderObj = TEXT
renderObj {
field = header
dataWrap = <li>|</li>
}
}
}
}
}
producing something like that ('Arnold ipsum.' and 'Who the hell are you.' being CEs of the Homepage):
<ul class="nav">
<li class="first">Homepage
<ul>
<li>Arnold ipsum.</li>
<li>Who the hell are you.</li>
</ul>
</li>
<li>Team
<ul>
<li>Arnold ipsum.</li>
<li>Who the hell are you.</li>
</ul>
</li>
...
</ul>
The problem now is, that this (pidInList = this) always holds the actual page id and so the anchor menu of the actual page is appended to all main menu items.
How to show the right anchor menu below every main menu?
lib.footerMenu = HMENU
lib.footerMenu {
1 = TMENU
1 {
wrap = <ul class="nav">|</ul>
noBlur = 1
NO = 1
NO {
wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
ATagParams = class="first" |*| |*| class="last"
after.cObject = CONTENT
after.cObject {
table = tt_content
select {
pidInList.stdWrap.cObject = CASE
pidInList.stdWrap.cObject {
key.field = doktype
default = TEXT
default.field = uid
4 = TEXT
4.field = shortcut
}
orderBy = sorting
where = colPos=1
languageField = sys_language_uid
selectFields = uid,pid,header
}
wrap = <ul>|</ul>
renderObj = TEXT
renderObj {
field = header
typolink {
parameter.field = pid
section.field = uid
}
wrap = <li>|</li>
}
}
}
}
}
Though, it might not work on old TYPO3 installations because if I remember correctly pidInList didn't used to have stdWrap. It should work on TYPO3 4.5+.