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
Related
I want to click and open multiple plus buttons and print out their texts. Here is the code that I have:
from selenium import webdriver
chrome_path=r"G:\My Drive\chrome_driver\chromedriver_win32\chromedriver.exe"
driver=webdriver.Chrome(chrome_path)
driver.get('https://meshb.nlm.nih.gov/treeView')
for links in driver.find_elements_by_css_selector('a.ng-scope'):
links.find_element_by_xpath("following-sibling::span").click();
for sublinks in links.find_elements_by_xpath("//*[#class='ng-scope']/span"):
print(sublinks.text)
here is what I see! the nodes' text is duplicated! and the code cannot open all the plus buttons. Only the first level plus buttons are opened, how can I change my code to be able to open all plus buttons, and once every plus button is open, I see the node'stext along with the whole content that is associated with it?
A part of html looks like this:
<a class="ng-scope">
<span class="ng-binding ng-scope">Anatomy [A]</span>
</a>
<ul class="treeItem ng-scope">
<li class ="ng-scope" >
< a class ="ng-scope" href="/record/ui?ui=D001829" >
< span class ="ng-binding ng-scope" > Body Regions[A01] < / span >
</a>
</li>
< li class ="ng-scope" >
<a class ="ng-scope" href="/record/ui?ui=D001829" >
< span class ="ng-binding ng-scope" > Cardio Vascular< / span >
</a>
<ul class="treeItem ng-scope">
<li class="ng-scope">
<a class="ng-scope" href="/record/ui?ui=D015824">
<span class="ng-binding ng-scope">Blood-Air Barrier [A07.025]</span>
</a>
<ul class="treeItem ng-scope">
<li class="ng-scope">
<a class="ng-scope" href="/record/ui?ui=D018916">
<span class="ng-binding ng-scope">Blood-Aqueous Barrier [A07.030]</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
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 :-)
I use typoscript (new to it) to handle the menu bar for my site and I want to use fontawesome icons next to the menu entries.
This is what the model look like:
This is how my menu look like:
Now, my typoscript subpart for menu looks this way:
SUBNAV = HMENU
SUBNAV {
entryLevel = 0
1 = TMENU
1 {
expAll = 1
collapse = active
noBlur = 1
# Definition per page
# NO: default formatting
NO = 1
NO {
wrapItemAndSub = <li >|</li>
stdWrap.wrap = <i class="fa fa-plus"></i><span>|</span>
}
# ACT: User is on this or below this page
# Activate this state for this menu
ACT < .NO
ACT {
wrapItemAndSub = <li class="active">|</li>
}
CUR < .ACT
# try to check if submenu to add a arrow icon
IFSUB = 1
IFSUB{
wrapItemAndSub = <li class="first">|</li>|*|<li>|</li>|*|<li class="last">|</li>
linkWrap = |<span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
ATagBeforeWrap = 1
stdWrap.wrap = <i class="fa fa-plus"></i><span>|</span>
}
ACTIFSUB = 1
ACTIFSUB < .ACT
ACTIFSUB.linkWrap = |<span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
ACTIFSUB.ATagBeforeWrap = 1
CURIFSUB = 1
CURIFSUB < .ACTIFSUB
}
2= TMENU
2 {
expAll = 1
collapse = active
noBlur = 1
wrap = <ul class="treeview-menu">|</ul>
# Definition per page
# NO: default formatting
NO = 1
NO {
wrapItemAndSub = <li >|</li>
}
# ACT: User is on this or below this page
# Activate this state for this menu
ACT < .NO
ACT {
wrapItemAndSub = <li class="active">|</li>
}
CUR < .ACT
# try to check if submenu to add a arrow icon
IFSUB = 1
IFSUB{
wrapItemAndSub = <li class="first">|</li>|*|<li >|</li>|*|<li class="last">|</li>
linkWrap = |<span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
ATagBeforeWrap = 1
}
ACTIFSUB = 1
ACTIFSUB < .ACT
ACTIFSUB.linkWrap = |<span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
ACTIFSUB.ATagBeforeWrap = 1
CURIFSUB = 1
CURIFSUB < .ACTIFSUB
}
# Definition for pages on level 3 and lower
# Copy the definitions from level 2
3 < .2
# 3.wrap = <ul class="treeview-menu">|</ul>
# Copy the definitions from level 2
4 < .2
# 4.wrap = <ul class="treeview-menu">|</ul>
# Copy the definitions from level 2
5 < .2
# 5.wrap = <ul class="treeview-menu">|</ul>
# Copy the definitions from level 2
6 < .2
# 6.wrap = <ul class="treeview-menu">|</ul>
}
Now, my problem is I don't know how to associate different icons (which I chose) with different menus (the ones in level 1). As you see in typoscript, I used a fa icon but is same for every menu entry (fa fa-plus).
Any suggestions?
If you have a finite number of menu items you can replace your code:
wrapItemAndSub = <li class="first">|</li>|*|<li>|</li>|*|<li class="last">|</li>
With:
wrapItemAndSub = <li class="first icon1">|</li>|*|<li class="icon2">|</li>|*|<li class="icon3">|</li>|*|<li class="icon4">|</li>|*|<li class="last iconN">|</li>
To control the display of each list item.
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.
Hy everyone. I am an neebie in Typo3 and i want to ask how is this possible to make a navigation with different colors. It must look like that
<ul>
<li>NavItem 1
<ul>
<li>SubItem1
<ul>
<li>SubsubItem1</li> <--- when active to red
</ul>
</li>
<li>SubItem2
<ul>
<li>SubsubItem2.1</li><--- when active to red
<li>SubsubItem2.2</li><--- when active to red
<li>SubsubItem2.3</li><--- when active to red
</ul>
</li>
</ul>
</li>
<li>NavItem 2</li><--- third level item to blue on active
<li>NavItem 3</li><--- third level Item to green on active
<li>NavItem 4</li>
<li>NavItem 5</li>
<li>NavItem 6</li>
</ul>
All other third level Items must be in the specified color when they active.
Is this possible in Typo3?
Thanks for your answers :)
what you are looking for is optionSplit.
f.e.
1.NO.ATagParams = class="red" || class="blue" || class="green" ...
The || indicates optionSplit - it will split each menu item.
I am not sure, if optionSplit works on ATagParams, at least you can use it on wrapItemAndSub or allWrap.
1.NO.allWrap = <li class="red">|</li> || <li class="blue">|</li> || ...