I am trying myself on a progress bar kind of menu in TYPO3 and have come up with the following menu. So far so good:
1 = TMENU
1 {
noBlur = 1
wrap = <ul class="crumbs-bar">|</ul>
expAll = 1
NO.wrapItemAndSub = <li class="visited first">|</li> |*| <li>|</li> |*| <li>|</li>
ACT=1
ACT.wrapItemAndSub = <li class="visited first">|</li> |*| <li class="active">|</li> |*| <li>|</li>
}
}
No what I need to add is a wrap for the previous and the next menu item (<li class="previous"> and <li class="next">) to make it work. I have found several examples of prev/next menus for TYPO3 but seem unable to integrate it into my code.
It is supposed to look something like this (assuming Item 4 is active):
Item 1 | class="first visited"
Item 2
Item 3 | class="previous visited"
Item 4 | class="active"
Item 5 | class="next"
Item 6
Item 7
And so forth...
I guess you have to write a little bit of code yourself. Take a look on the itemArrayProcFunc or IProcFunc property of the tmenu. You can find some example code in this blog post or in the statictemplates extension of TYPO3 of how to use this feature, it is in German though.
Related
Yesterday and today I had quite some fun figuring out how to create an accordion menu with bootstrap css and TypoScript in TYPO3 7.6.*
Since I nearly lost my mind and questioned my brain on the way to it, I am searching for a good solution.
Edit: moved solution to own answer and changed topic start to question
Perhaps you could use fluid for Menu rendering. Here are some examples:
https://github.com/TYPO3/TYPO3.CMS/tree/master/typo3/sysext/fluid_styled_content/Resources/Private/Partials/Menu
Yesterday and today I had quite some fun figuring out how to create an accordion menu with bootstrap css and TypoScript in TYPO3 7.6.*
Since I nearly lost my mind and questioned my brain on the way to it, I want to share you my outcome and would like to get some improvement ideas.
I have a 2 level menu where the first level is only for grouping - not linked - and the second level contains the sub pages
This is the HTML container inside my template:
# HTML part, put into your template
<div class="panel-group" id="accordion">
<f:cObject typoscriptObjectPath="lib.menu2" />
</div>
And this is my TypoScript:
# TypoScript part
lib.menu2 = HMENU
lib.menu2 {
wrap = |
1 = TMENU
1.expAll = 1
1.NO = 1
1.NO.wrapItemAndSub = <div class="panel panel-default">| </table></div></div></div>
1.NO.doNotLinkIt = 1
1.NO.allStdWrap.dataWrap = <div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse{field:uid}"> | </a></h4></div><div id="collapse{field:uid}" class="panel-collapse collapse"><div class="panel-body"><table class="table">
1.IFSUB < .1.NO
1.IFSUB.allStdWrap.dataWrap = <div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse{field:uid}"> | </a></h4></div><div id="collapse{field:uid}" class="panel-collapse collapse"><div class="panel-body"><table class="table">
1.CURIFSUB < .1.NO
1.CURIFSUB.allStdWrap.dataWrap = <div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse{field:uid}"> | </a></h4></div><div id="collapse{field:uid}" class="panel-collapse collapse in"><div class="panel-body"><table class="table">
1.ACTIFSUB< .1.CURIFSUB
2 = TMENU
2.NO = 1
2.NO.linkWrap = <tr><td> | </td></tr>
}
I still a small clean up on my todolist, to remove the submenu stuff for NO where there is no submenu.
What do you think?
#firegate666, your solution was inspirational! I've modified to account for:
- subparts (note: also works with fluid, just change ###SUBPART### )
- user-generated full CSS styling (no panels)
- a (minimum) 3 level menu
HTML Template:
<!-- ###MENU### START -->
<!-- ###MENU### END -->
TYPOscript:
# declare the menu,
# wrap it in a list <ul>
# and then wrap all that in a container div (for post-processing menus like slicknav),
subparts.MENU = HMENU
subparts.MENU.wrap = <div id="menu"><ul> | </ul></div>
subparts.MENU {
# 1st level
1 = TMENU
1 {
expAll = 1
# enable the NOrmal state, wrap it in a <li>
NO = 1
NO.wrapItemAndSub = <li> | </li>
# IF item has a SUBmenu, then it's still like a NOrmal item, but more
# wrap it in Bootstrap accordion/collapse functionality
# then close it
IFSUB < .NO
IFSUB = 1
IFSUB.allStdWrap.dataWrap (
<a class="accordion-toggle collapsed" data-toggle="collapse" href="#collapse{field:uid}"> | </a>
<div id="collapse{field:uid}" class="collapse">
<ul>
)
IFSUB.wrapItemAndSub (
<li> | </li>
</ul>
</div>
)
IFSUB.doNotLinkIt = 1
}
# 2nd level sub-menu and 3rd level sub-sub-menu inherit all the properties of 1st level
2 < .1
3 < .1
# end subparts.MENU
}
...and (suggested) CSS:
.accordion-toggle:before {
content: "- ";
}
.accordion-toggle.collapsed:before {
content: "+ ";
}
I hope this addition to your code is helpful :-)
So I've stupidly designed a list of recent articles, all is good with the world BUT the first 2 entries html are markedly different then the remainder of entries.
I am yet to turn a line of code so any advice anyone an offer is greatly appreciated.
Simplistically the ul would look like:
<li class="1of2"> /* It's number 1 – give it a class to identify it as special */
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
<li class="1of2"> /* It's number 2 – give it a class to identify it as special */
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
<li> /* It's not number 1 or 2 – ie. every other item, NO class per se */
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
If you imagine a 3 column grid for all entries but the first 2 entries are 1.5 columns each. Bit of a noodle scratch going on here, any thoughts gratefully voted upon.
PS. I will be using Stash if that helps !
Just output the class name based on the value of {count}. I've output the whole opening <li> tag here to keep it simple but you could just output the class attribute or class name itself.
{if count<=2}
<li class="special">
{if:else}
<li>
{/if}
<h1>{title}</h1>
... etc.
</li>
Incidentally, I don't think you can have class names that begin with a number.
Here's how I would do it if you want each of the first 2 to have a unique class name:
<li{if count<=2}class="top{count}"{/if}>
that will output
<li class="top1">...
<li class="top2">...
<li>...
If you want the first 2 items to have the same class:
<li{if count<=2}class="whateveryouwant"{/if}>
which will output
<li class="whateveryouwant">...
<li class="whateveryouwant">...
<li>...
Couldn't you do {if count == "1|2"}class="whatever"{/if} ?
Seems you are asking for two unique classes, one for the first entry and one for the second entry. In that case, this will work:
{if count == 1}
<li class="first">
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
{if:else if count == "2"}
<li class="second">
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
{if:else}
<li>
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
{/if}
Also, class names that start with a number will not validate.
You could do it with simple conditionals as well if there is no "other" class that would then require the if:else part of the conditional:
<li{if count == "1"} class="first"{/if}{if count == "2"} class="second"{/if}">
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
This assumes you don't have any other differences, such as different custom fields in one option versus the other, which MediaGirl's suggestion would handle more elegantly. If the only difference between them is class assignment, this is another alternative.
I'd like to have a horizontal menu at the top of the website and a vertical menu with the menu levels 2 and 3 at the left side of the website.
Unfortunately my typoscript shows the same menu for both areas.
Any ideas what's wrong?
# Hauptmenu
lib.mainMenu = HMENU
lib.mainMenu.special = directory
lib.mainMenu.special.value = 1
lib.mainMenu.entryLevel = 0
lib.mainMenu.1 = TMENU
lib.mainMenu.1.NO {
wrapItemAndSub = <div class="grid_1_menu"> | </div > |*| <div class="grid_1_menu"> | </div > |*| <div class="grid_1_menu grid_1_menu_end"> | </div >
}
# Seitennavigation
lib.subMenu= HMENU
lib.subMenu.special = directory
lib.subMenu.special.value = 1
lib.subMenu.entryLevel = 1
lib.subMenu.wrap = <ul class="sub-menu" id="menu-level-1">|</ul>
lib.subMenu.1 = TMENU
lib.subMenu.1.NO {
wrapItemAndSub = <li class="first"> | </li> |*| <li class="middle"> | </li> |*| <li class="last""> | </li>
}
lib.subMenu.2 < lib.subMenu.1
lib.subMenu.2.wrap = <ul class="sub-menu" id="menu-level-2">|</ul>
That's easy:
special = directory
special.value = 123
creates a menu from ALL items inserted in page or sysfolder with uid = 123 , by writing the value (1 in your case) you instruct the TS to build menu from pages under (probably) main page.
As you can see in this sample, special directive takes precedens over the entryLevel.
Allthough I don't understand exactly why, I had to remove
lib.subMenu.special.value = 1
Say I have this:
...
<li class='tab'>7</li>
<li class="tab">8</li>
...
...and I'd like to use Sparkup in my editor to add another say 6 tabs...so I run the sparkup command:
li.tab > a[href=#tab2-$]{$}*6
but it comes out all wrong,
<li class="tab">8</li>
<li class="tab">
1
2
3
...
</li>
My first thought was that my syntax should have been:
(li.tab > a[href=#tab2-$]{$})*6
But that did pretty much the same thing...except this time it didn't insert the second number:
<li class="tab">8</li>
<li class="tab">
$
$
$
...
</li>
Now the range problem (starting at 9 instead of 1) is just a minor annoyance, but what if I want it to repeat the li as well as the a tag?
And yes, before you go off about it, I am indeed aware that I could create all of this stuff just using a simple for loop; but that wasn't part of the question now was it?
You are almost there:
li.tab*6 > a[href=#tab2-$]{$}
You want to create 6 <li> so that's where you should put your multiplier.
No need to be defensive.
Is there a way to offset the 'each' iteration when using the Jade template engine?
for example, when passing in the object named list:
ul
each item in list
li #{item}
Will output
<ul>
<li> Item 1 </li>
<li> item 2 </li>
<li> item 3.....
...
</ul>
But I want the first item to be displayed differently than the rest of the items, like so:
<ul>
<li> Item 1: First Item in list! </li>
<li> item 2 </li>
<li> item 3.....
...
</ul>
So does anyone know a way to offset the 'each' statement in Jade so that I can render the first item separately and then render each following item starting at the 2nd index?
each item, i in list
li= item
if i === 1
| : First item in list!
If #Johnathan's answer does not work for you:
In Jade 1.7 the following works:
for item, i in list
li= item
if i === 0
| : First item in list!
http://www.learnjade.com/tour/iteration/
Also note the 0 index vs 1 index.