I know there are many tuts for creating a menu with typo3.. But it doesn't work for me, so I hope you can help me..
I do not know why my generated code will not show my sublevel-pages "Subpage 1" and "Subpage 2"..
My menu-structure is the following:
Home
Imprint
Subpage 1
Test 1
Subpage 2
My Code in my template-file
page = PAGE
page.10 = TEMPLATE
page.10.workOnSubpart = DOCUMENT
page.10.template = FILE
page.10.template.file = fileadmin/Template/index.html
temp.tmenu= HMENU
temp.tmenu{
1 = TMENU
1.wrap = <ul class="menu-level1">|</ul>
1{
NO{
wrapItemAndSub = <li>|</li>
}
ACT=1
ACT{
wrapItemAndSub = <li class="menu-level1-active">|</li>
}
CUR=1
CUR{
wrapItemAndSub = <li class="menu-level1-current-active">|</li>
}
IFSUB=1
IFSUB{
wrapItemAndSub = <li class="menu-level1-with-subpage">|</li>
}
}
2 = TMENU
2.wrap = <ul class="menu-level2">|</ul>
2{
NO{
wrapItemAndSub = <li>|</li>
}
ACT=1
ACT{
wrapItemAndSub = <li class="menu-level2-active">|</li>
}
CUR=1
CUR{
wrapItemAndSub = <li class="menu-level2-current-active">|</li>
}
IFSUB=1
IFSUB{
wrapItemAndSub = <li class="menu-level2-with-subpage">|</li>
}
}
3 = TMENU
3.wrap = <ul class="menu-level3">|</ul>
3{
NO{
wrapItemAndSub = <li>|</li>
}
ACT=1
ACT{
wrapItemAndSub = <li class="menu-level3-active">|</li>
}
CUR=1
CUR{
wrapItemAndSub = <li class="menu-level3-current-active">|</li>
}
IFSUB=1
IFSUB{
wrapItemAndSub = <li class="menu-level3-with-subpage">|</li>
}
}
}
page.10.subparts {
METANAV < temp.tmenu
}
And this is the generated output:
<ul class="menu-level1">
<li class="menu-level1-current-active">Home</li>
<li class="menu-level1-with-subpage">Imprint</li>
<li class="menu-level1-with-subpage">Test 1</li>
</ul>
http://typo3buddy.com/typoscript/menus/tmenu-left-menu/
expAll = 1
is your golden ticket
Related
I have this menu in TYPO3:
HEADER = HMENU
HEADER {
1 = TMENU
1 {
expAll = 1
NO = 1
NO {
wrapItemAndSub = <ul class="select one"><li>|</li></ul> || <ul class="select two"><li>|</li></ul>
}
ACT < .NO
ACT = 1
ACT {
wrapItemAndSub = <ul class="current one"><li>|</li></ul> || <ul class="current two"><li>|</li></ul>
}
}
2 < .1
2.wrap = <ul class="sub">|</ul>
2.NO.wrapItemAndSub = <li>|</li>
2.ACT.wrapItemAndSub = <li class="current_sub">|</li>
}
Here is the resulting HTML code:
<ul class="current one">
<li>
Homepage
<ul class="sub">
<li>Subpage</li>
</ul>
</li>
</ul>
<ul class="current two">
<li>
Second page
</li>
</ul>
As you can see, there are no subpages below the second page. That is the reason <ul class="sub">...</ul> is not rendered for second page.
However, I need the <ul class="sub"></ul> - even if there is nothing in it.
How can I get it into my code?
Premise: the whole menu seems a bit...odd... at least for my tastes (each first level item is wrapped with an <ul>, and you also require an additional empty <ul> even without subitems...)
Said that, this trick should work: Basically I appended at the NO state a "fake" empty <ul class="sub"></ul> and I removed it when the actual subpages kick in.
HEADER = HMENU
HEADER{
1 = TMENU
1 {
expAll = 1
NO = 1
NO {
wrapItemAndSub = <ul class="select one"><li>|</li></ul> || <ul class="select two"><li>|</li></ul>
}
NO.after = <ul class="sub"></ul>
ACT < .NO
ACT = 1
ACT {
wrapItemAndSub = <ul class="current one"><li>|</li></ul> || <ul class="current two"><li>|</li></ul>
}
IFSUB < .NO
IFSUB = 1
IFSUB.after =
ACTIFSUB < .ACT
ACTIFSUB = 1
ACTIFSUB.after =
}
2 < .1
2.wrap = <ul class="sub">|</ul>
2.NO.wrapItemAndSub = <li>|</li>
2.ACT.wrapItemAndSub = <li class="current_sub">|</li>
}
This is the solution I ended up using. I still took care to remove the additional code again for the second level and I made sure the right classes still are applied on level 2:
HEADER = HMENU
HEADER {
1 = TMENU
1 {
expAll = 1
NO = 1
NO {
wrapItemAndSub = <ul class="select one"><li>|</li></ul> || <ul class="select two"><li>|</li></ul>
}
NO.after = <ul class="sub"><li class="empty"> </li></ul>
ACT < .NO
ACT = 1
ACT {
wrapItemAndSub = <ul class="current one"><li>|</li></ul> || <ul class="current two"><li>|</li></ul>
}
IFSUB < .NO
IFSUB = 1
IFSUB.after =
ACTIFSUB < .ACT
ACTIFSUB = 1
ACTIFSUB.after =
}
2 < .1
2.wrap = <ul class="sub">|</ul>
2.NO.wrapItemAndSub = <li>|</li>
2.NO.after =
2.ACT.wrapItemAndSub = <li class="current_sub">|</li>
2.ACT.after =
2.IFSUB.wrapItemAndSub = <li>|</li>
2.ACTIFSUB.wrapItemAndSub = <li class="current_sub">|</li>
}
I want to get image urls by scraping data by cheerio from a slider but can able to do this tried a lot but can found a solution here is my code below
const retURL = a.find('.gallery-carousel').find('img').attr('src')
.map(function(){
let image= $(this).attr('src');
console.log(image, 'nnnnknknkn')
})
const retURL = $('div.carousel').attr('img')
const retURL = $('gallery-carousel__image-touchable').text()
var listItems = $(".gallery-carousel ul li");
listItems.each(function(idx, li) {
let image= $(li).find('img').attr('src');
console.log(image);
// and the rest of your code
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="gallery-carousel">
<ul>
<li class="slide selected">
<button><img src="https://i.stack.imgur.com/rC97H.png" alt="hello" /> </button>
</li>
<li class="slide">
<button><img src="https://i.stack.imgur.com/1.png" alt="hello" /> </button>
</li>
<li class="slide">
<button><img src="https://i.stack.imgur.com/2.png" alt="hello" /> </button>
</li>
</ul>
</div>
Each <header> tag contains a Title of Conference.
Each <ul> tag contains the links of this conference.
When I'll to try to crawl the website, I'm try to associating the <header> tag with yours links in <ul> tags. But I don't know how I can only select the <ul> tags of are sibling two certain <headers>.
HTML:
<header>... 0 ... </header>
<ul class="publ-list">... 0 ...</ul>
<header>... 1 ... </header>
<ul class="publ-list">... 0 ...</ul>
<header>... 2 ... </header>
<ul class="publ-list">... 0 ...</ul>
<p>...</p>
<ul class="publ-list">... 1 ...</ul>
<header>... 3 ...</header>
<ul class="publ-list">... 0 ...</ul>
<ul class="publ-list">... 1 ...</ul>
<ul class="publ-list">... 2 ....</ul>
<ul class="publ-list">... 3 ....</ul>
<ul class="publ-list">... 4 ....</ul>
<header>... 4 ...</header>
Example:
<ul> tags are sibling of header[0] and header[1]
<ul class="publ-list">... 0 ...</ul>
<ul> tags are sibling of header[2] and header[3]
<ul class="publ-list">... 0 ...</ul>
<ul class="publ-list">... 1 ...</ul>
Some cases:
It's possible more than one ul tag between header tag
Sometimes has a p tag between ul tags
All tags are siblings!
All ul has class "publ-list"
My code:
TITLE_OF_EDITIONS_SELECTIOR = 'header h2'
GROUP_OF_TYPES_OF_EDITION_SELECTOR = ".publ-list"
size_editions = len(response.css(GROUP_OF_TYPES_OF_EDITION_SELECTOR))
i = 0
while i < size_editions:
# Get the title of conference
title_edition_conference = response.css(TITLE_OF_EDITIONS_SELECTIOR)[i]
# Get datas and links of <ul> tags "(.publ-list)"
TYPES_OF_CONFERENCE = response.css(GROUP_OF_TYPES_OF_EDITION_SELECTOR)[i]
TYPE = TYPES_OF_CONFERENCE.css('.entry')
types_of_edition = {}
size_type_editions = 0
for type_of_conference in TYPE:
title_type = type_of_conference.css('.data .title ::text').extract()
link_type = type_of_conference.css('.publ ul .drop-down .body ul li a ::attr(href)').extract_first()
types_of_edition[size_type_editions] = {
"title": title_type,
"link": link_type,
}
size_type_editions = size_type_editions + 1
editions[i] = {
"title_edition_conference": title_edition_conference,
"types_of_edition": types_of_edition
}
i = i + 1
Problem of My Code
Sometimes there are many ul tags
Sometimes has a <p> tag and it's break my xPath, and get only the previous <ul> tags.
I got it testing with JQuery on Console of Google Chrome, example:
"$($('header')[0]).nextUntil($('header')[1])"
But How I can select this using xPath or CSS Selector? Thank you!
Following combination of css selectors and python for loop can solve this task.
from parsel import Selector
html = """
<ul class="publ-list">p1</ul>
<header>h1</header>
<ul class="publ-list">p2</ul>
<header>h2</header>
<ul class="publ-list">p3</ul>
<header>h3</header>
<ul class="publ-list">p4</ul>
<p>p_tag_1</p>
<ul class="publ-list">p5</ul>
<header>h4</header>
<ul class="publ-list">p6</ul>
<ul class="publ-list">p7</ul>
<header>h5</header>
<ul class="publ-list">p8</ul>
"""
response = Selector(text=html)
tags = response.css("header, ul")
output = {}
key = False
for t in tags:
if key and "<ul" in t.css("*").extract_first():
output[key].append(t.css("::text").extract_first())
elif "<header>" in t.css("*").extract_first():
key = t.css("::text").extract_first()
if key not in output.keys():
output[key]=[]
else:
pass
print(output)
Output is:
{'h1': ['p2'], 'h2': ['p3'], 'h3': ['p4', 'p5'], 'h4': ['p6', 'p7'], 'h5': ['p8']}
This css selector: tags = response.css("header, ul") returns list of <header> and <ul> tags in the same order as in the html code.
After that we can iterate through received tags using for loop and select required data.
Try to use following-sibling like here:
>>> txt = """<header>..</header>
... <ul class="publ-list">...</ul>
... <header>..</header>
... <ul class="publ-list">...</ul>
... <header>..</header>
... <ul class="publ-list">...</ul>
... <p>...</p>
... <ul class="publ-list">...</ul>
... <header>..</header>
... <ul class="publ-list">...</ul>
... <ul class="publ-list">...</ul>
... <header>..</header>"""
>>> from scrapy import Selector
>>> sel = Selector(text=txt)
>>> sel.xpath('//header/following-sibling::*[not(self::header)]').extract()
[u'<ul class="publ-list">...</ul>', u'<ul class="publ-list">...</ul>', u'<ul class="publ-list">...</ul>', u'<p>...</p>', u'<ul class="publ-list">...</ul>', u'<ul class="publ-list">...</ul>', u'<ul class="publ-list">...</ul>']
So with //header/following-sibling::*[not(self::header)] we choose all header siblings, but not header.
This may be what you're looking for.
html = """
<ul class="publ-list">...</ul>
<header>..</header>
<ul class="publ-list">...</ul>
<header>..</header>
<ul class="publ-list">...</ul>
<header>..</header>
<ul class="publ-list">...</ul>
<p>...</p>
<ul class="publ-list">...</ul>
<header>..</header>
<ul class="publ-list">...</ul>
<ul class="publ-list">...</ul>
<header>..</header>
<ul class="publ-list">...</ul>
"""
Note I added a <ul>before the first and after the last <header>..</header> sets.
This expression
//ul[
preceding-sibling::header
and
following-sibling::header
]
should select all the <ul> tags, except those I added before and after, and none of the <p> tags which may be in the way.
<div class="nav nav_main">
<ul class="level-1">
<li class="level-1 norm uid_2"><a class="level-1 norm" href="company/at-a-glance/"><span>Company</span></a>
<div class="level-2-wrapper-outer">
<div class="level-2-wrapper">
<div class="level-2-wrapper-inner">
<ul class="level-2">
<li class="level-2 norm"><a class="level-2 norm" href="company/at-a-glance/"><span>At a glance</span></a>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="company/culture-and-values/"><span>Culture and values</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="company/culture-and-values/#c24">History</a>
</li>
<li class="level-3 norm"><a class="level-3 norm" href="company/culture-and-values/#c25">Corporate culture</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="company/uhlmann-worldwide/"><span>Uhlmann worldwide</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="company/uhlmann-worldwide/#c231">Germany</a>
</li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="company/uhlmann-group/"><span>Uhlmann Group</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="company/uhlmann-group/#c29">visiotec</a>
</li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" target="_blank" href="company/lieferanten-portal/"><span>Lieferanten-Portal</span></a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="level-1 norm uid_3"><a class="level-1 norm" href="solutions/capsules-tablets/"><span>Solutions</span></a>
<div class="level-2-wrapper-outer">
<div class="level-2-wrapper">
<div class="level-2-wrapper-inner">
<ul class="level-2">
<li class="level-2 norm"><a class="level-2 norm" href="solutions/capsules-tablets/"><span>Capsules, tablets</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="solutions/capsules-tablets/#c40">Blister machines</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="solutions/vials-ampoules-syringes/"><span>Vials, ampoules, syringes</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="solutions/vials-ampoules-syringes/#c64">Blister machines</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="solutions/blister-bottles/"><span>Blister, bottles</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="solutions/blister-bottles/#c75">Cartoners</a>
</li>
<li class="level-3 norm"><a class="level-3 norm" href="solutions/blister-bottles/#c76">Stretch-banding machines</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="solutions/cartons-cases/"><span>Cartons, cases</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="solutions/cartons-cases/#c83">Stretch-banding machines</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="solutions/automation-and-software/"><span>Automation and software</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="solutions/automation-and-software/#c94">PDA & SCADA</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="solutions/inspection-systems/"><span>Inspection systems</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="solutions/inspection-systems/#c98">BottleChrom</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="level-1 norm uid_4"><a class="level-1 norm" href="products/blister-machines/"><span>Products</span></a>
<div class="level-2-wrapper-outer">
<div class="level-2-wrapper">
<div class="level-2-wrapper-inner">
<ul class="level-2">
<li class="level-2 norm"><a class="level-2 norm" href="products/blister-machines/"><span>Blister machines</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="products/blister-machines/#c109">Blister machine B 1240</a></li>
</li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="products/cartoners/"><span>Cartoners</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="products/cartoners/#c123">Cartoner C 130</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="products/blister-lines/"><span>Blister lines</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="products/blister-lines/#c130">Blister line BEC 300</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="products/end-of-line-packaging-machines/"><span>End-of-line packaging machines</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="products/end-of-line-packaging-machines/#c133">Stretch-banding machines</a></li>
</li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="products/bottle-lines/"><span>Bottle lines</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="products/bottle-lines/#c144">Bottle line IBC 120</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="products/feeders/"><span>Feeders</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="products/feeders/#c148">For solid dose products</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="products/competences/"><span>Competences</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="products/competences/#c158">Containment</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="level-1 norm uid_5"><a class="level-1 norm" href="services/advice/"><span>Services</span></a>
<div class="level-2-wrapper-outer">
<div class="level-2-wrapper">
<div class="level-2-wrapper-inner">
<ul class="level-2">
<li class="level-2 norm"><a class="level-2 norm" href="services/advice/"><span>Advice</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/advice/#c170">Quote and order management</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="services/support/"><span>Support</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/support/#c174">Telephone support</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="services/on-site-services/"><span>On-Site Services</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/on-site-services/#c177">Response time</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="services/spare-parts/"><span>Spare parts</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/spare-parts/#c180">Spare parts availability</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="services/format-parts/"><span>Format parts</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/format-parts/#c184">Format and tool sets</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="services/upgrades-and-rebuilds/"><span>Upgrades and rebuilds</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/upgrades-and-rebuilds/#c186">Electrical upgrades</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="services/automation-and-software/"><span>Automation and software</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/automation-and-software/#c191">PDA & SCADA</a></li>
</ul>
</li>
</ul>
<ul class="level-2">
<li class="level-2 norm"><a class="level-2 norm" href="services/training/"><span>Training</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/training/#c194">Operator training</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="services/validation-and-calibration/"><span>Validation and calibration</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/validation-and-calibration/#c198">Validation of new machines</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
Based on question Menu: wrap every X item, how can I wrap every x element if I don´t know the exact count of menu elements?
If I use the answer of chrisBerlin the problem is that it only works with e.g. 3 elements.
But with a dynamic count of child's per parent it outputs a not valid code.
How can I solve this? My code shows 3 levels of a HMENU. I need the x-wrap in level 2. I use 7 elements per row.
On my page the first element has e.g. 5 child´s. So the <ul class="level-2"> didn´t get closed.
tmp.nav_main = COA
tmp.nav_main{
10 = COA
10{
10 = HMENU
10{
wrap = <ul class="level-1">|</ul>
entryLevel = {$t3d_navigation.nav_main_entryLevel}
excludeUidList = {$t3d_navigation.nav_main_excludeUidList}
1 = TMENU
1 {
IProcFunc = user_tmenulinebreak->main
expAll = 1
NO{
wrapItemAndSub = <li class="level-1 norm uid_{field:uid}">|</li>
wrapItemAndSub.insertData = 1
ATagParams = class="level-1 norm"
stdWrap.wrap = <span>|</span>
}
CUR < .NO
CUR.wrapItemAndSub = <li class="level-1 click uid_{field:uid}">|</li>
CUR.wrapItemAndSub.insertData = 1
CUR.ATagParams = class="level-1 click"
CUR = 1
ACT < .CUR
ACT = 1
}
2 < .1
2 {
wrap = <div class="level-2-wrapper-outer"><div class="level-2-wrapper"><div class="level-2-wrapper-inner">|</div></div></div>
expAll = 1
NO{
wrapItemAndSub = |*|<ul class="level-2"><li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li></ul>|*|
ATagParams = class="level-2 norm"
}
CUR.wrapItemAndSub = |*|<ul class="level-2"><li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li></ul>|*|
CUR.ATagParams = class="level-2 click"
ACT < .CUR
ACT = 1
}
3 < .1
3 {
wrap = <ul class="level-3">|</ul>
expAll = 1
NO{
wrapItemAndSub = <li class="level-3 norm">|</li>
doNotShowLink = 1
after{
cObject = TEXT
cObject{
typolink{
parameter = {field:pid}#{field:uid}
parameter.insertData = 1
ATagParams = class="level-3 norm"
}
data = field:title
}
}
}
CUR{
wrapItemAndSub = <li class="level-3 click">|</li>
doNotShowLink = 1
after{
cObject = TEXT
cObject {
typolink{
parameter = {field:pid}#{field:uid}
parameter.insertData = 1
ATagParams = class="level-3 click"
}
data = field:title
}
}
}
ACT < .CUR
ACT = 1
}
}
}
}
In my special case I need 1-7 items in a <ul class="level-2"></ul> an if there are more than 7 a new row must start with the next 8-14 elements. If there are more than 14 a new row.
Read the docs it gives a lot of clues, the valid syntax for optionSplit is:
first-element(s) |*| middle-element(s) |*| last-element(s)
The priority is last, first, middle, which means that only last segment will be used if you have one item,
if there will be two items it will be order first, last
and if you'll have 3 or more items there will be first, middle(s), last
each segment can have numbered subsegments divided by ||.
You are using numbered subsegments only in the middle part, you need to fix it.
Other thing is that the optionSplit MUST be valid in all situations, when there's only 1, 2 or 3+ items available, the way you used it causes that there are situations when ul is unclosed in other words you need the correct statement on each part or subpart of the optionSplit...
Anyway, optionSplit is nice but tricky technique, it was invented many years ago to add possibility for style manipulation by some factor when there was no any reliable JS library, currently I would use jQuery and/or new CSS features for doing this, just generate plain menu and then add required classes to every-x element. ie.:
Like this using jQuery
Like this using CSS
Does anyone know of a prettier way to output a class name to a list element (in this case) using EJS?
<% var active = "active"; %>
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="<% if(req.path == '/user') { %><%= active %><% } %>">Users</li>
<li class="<% if(req.path == '/about') { %><%= active %><% } %>">About</li>
<li class="<% if(req.path == '/contact') { %><%= active %><% } %>">Contact</li>
</ul>
<h3 class="text-muted">Sails Tutorial App</h3>
</div></li>
You can do it like this :)
<li class="<%= (req.path == '/user') ? 'active' : '' %>">Users</li>
It's a little bit prettier I guess...