I'm trying to get the navigation bar of my first website to work but I can't find my mistake.. I'm working with Typo3, Fluid and Bootstrap. When I create a navigation bar manually in my template file it works perfectly fine but whatever I try in this typoscript file, the navigation bar items are only normal links instead of nav-items.
lib.navbar = HMENU
lib.navbar {
entryLevel = 1
1 = TMENU
1 {
wrap = <ul class="navbar-nav">|</ul>
NO = 1
NO {
wrapItemAndSub = <li class="nav-item">|</li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = title
}
ACT <.NO
ACT {
wrapItemAndSub = <li class="nav-item active">|</li>
}
}
}
I call the file in my template like this
<f:cObject typoscriptObjectPath="lib.navbar" />
This simple copy pasta in my template works
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
It seems like the
wrap = <ul class="navbar-nav">|</ul>
gets ignored but when I try
wrap = <h1><ul class="navbar-nav">|</ul></h1>
the h1 works.
Edit: Fixed it with this line:
ATagParams = class="nav-link"
You can try below menu typoscript.
lib.navbar = HMENU
lib.navbar{
1 = TMENU
1{
expAll = 1
wrap = <ul class="navbar-nav mr-auto">|</ul>
NO {
allWrap = <li class="nav-item"> | </li>
ATagParams = class="nav-link"
}
ACT = 1
ACT {
wrapItemAndSub = <li class="nav-item active"> | <span class="sr-only">(current)</span></li>
ATagParams = class="nav-link"
}
}
}
Thanks, but it has the same problem. I found the reason though. The pages names are still inside an
<a href="index.php?id=1">
When I manually change it to
<a class="nav-link" href="index.php?id=1">
it works. But I don't know where this comes from in my code or how I can change it.
Related
I have several pages with subpages in my pagetree as shown below.
My pagetree with subpages
However, the links to the subpages do not seem to be clickable.
I have implemented my navigation in Fluid, as per the code below (which is in the default.html file in the Layouts folder):
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{rl}">Company Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<f:for each="{mainnavigation}" as="mainnavigationItem">
<f:if condition="{mainnavigationItem.children}">
<f:then>
<li class="nav-item {f:if(condition: mainnavigationItem.active, then:'active')} dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{mainnavigationItem.title}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<f:for each="{mainnavigationItem.children}" as="child">
<a class="dropdown-item" href="{child.link}" target="{child.target}" title="{child.title}">{child.title}</a>
</f:for>
</div>
</li>
</f:then>
<f:else>
<li class="nav-item {f:if(condition: mainnavigationItem.active, then:'active')}">
<a class="nav-link" href="{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}">{mainnavigationItem.title} <span class="sr-only">(current)</span></a>
</li>
</f:else>
</f:if>
</f:for>
</ul>
</div>
</nav>
And the mainnavigation variable is defined in the configuration of my extension in setup.typoscript as shown below. Note that levels is set to 2, in order to render the subpages.
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
references.fieldName = media
}
20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
20 {
levels = 2
includeSpacer = 1
as = mainnavigation
}
}
As you can see in the picture below, an arrow is added for the subpages. When I click this arrow or the page title, nothing happens however.
The menu with dropdowns
Additionally I am getting this error in the webconsole:
Uncaught TypeError: Cannot read property 'fn' of undefined
at util.js:55
at bootstrap.min.js:6
at bootstrap.min.js:6
Which refers to:
$.fn.emulateTransitionEnd = transitionEndEmulator
You should have a look at your Setup – there you are able to define the navigation, see also here
You have a syntax error in your html code.
Your code:
<a class="dropdown-item" href="{child.link}" target="{child.target}" title="{child.title}>{child.title}</a>
Should be:
<a class="dropdown-item" href="{child.link}" target="{child.target}" title="{child.title}">{child.title}</a>
Missing " after {child.title}, so the is not closed correctly.
Turns out I was not importing JQuery correctly in setup.typoscript. Once I added the following code to page, the subpages popped up correctly:
includeJSFooter {
jquery = https://code.jquery.com/jquery-3.3.1.slim.min.js
jquery.external = 1
popper = https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
popper.external = 1
bootstrap = https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
bootstrap.external = 1
}
My navbar on the phone opens, but it does not close.
<div class="carousel-inner">
<nav class="navbar navbar-expand-lg navbar-light bg-primary nawigacja">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar10">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar10">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">First tab</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#button1">2nd Tab</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#button2">3rd Tab</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#button3">4th tab</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#button4">5th Tab</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">6th Tab</a>
</li>
</ul>
</div>
</div>
in the elements I see that before clicking the code looks like this:
<div class="navbar-collapse collapse" id="navbar10">
and literally for a few seconds the code changes into:
navbar-collapse collapsing
next in 1 sec:
navbar-collapse collapse show
after another click it changes to
navbar-collapse collapsing
and after 1 sec again:
navbar-collapse collapse show
Navbar does not close at all after opening.
//edit:
I will add that on codeply it works.
I managed to fix it.
For others who are struggling with the same problem, I will tell you that I had to remove the following from the section:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
I have the following structure HTML code
<ul id="list_abcxyz">
<li class="label even-row">
<a class="label-link lia-link-navigation" rel="tag" id="link_c19bf51ba9103c" href="test.html">Label One<wbr></a>
<span class="label-count">(1)</span>
</li>
<li class="label odd-row">
<a class="label-link lia-link-navigation" rel="tag" id="link_c19bf51ba9103c_0" href="test2.html">Label Two<wbr></a>
<span class="label-count">(1)</span>
</li>
<li class="label even-row">
<a class="label-link lia-link-navigation" rel="tag" id="link_c19bf51ba9103c_1" href="test3.html">Label Three<wbr></a>
<span class="label-count">(1)</span>
</li>
How to convert it to a select drop down? I have tried following the guides in community. But those didn't work. I guess because of extra span tag. But I need that span tag as well.
How can we convert it to select option drop down using JS ?
Thank you.
Something like this should get you started. If you were running into trouble with the <span> then you can use the textContent property to get all text without the html tags included, then remove all multiple spaces with a replace() and trim().
var myform = document.getElementById('myform'),
items = document.getElementById('list_abcxyz').getElementsByTagName('li'),
select = document.createElement('select'),
len = items.length,
option;
for(var i = 0; i < len; i++) {
option = document.createElement('option');
var label = items[i].textContent.replace(/\s\s+/g," ").trim(),
link = items[i].getElementsByTagName('a')[0].href;
option.textContent = label;
option.value = link;
select.appendChild(option);
}
myform.appendChild(select);
select.addEventListener('change',function(evt){
var selectedLink = this.options[this.selectedIndex].value;
console.log(selectedLink);
location.href = selectedLink;
});
<ul id="list_abcxyz">
<li class="label even-row">
<a class="label-link lia-link-navigation" rel="tag" id="link_c19bf51ba9103c" href="test.html">Label One<wbr></a>
<span class="label-count">(1)</span>
</li>
<li class="label odd-row">
<a class="label-link lia-link-navigation" rel="tag" id="link_c19bf51ba9103c_0" href="test2.html">Label Two<wbr></a>
<span class="label-count">(1)</span>
</li>
<li class="label even-row">
<a class="label-link lia-link-navigation" rel="tag" id="link_c19bf51ba9103c_1" href="test3.html">Label Three<wbr></a>
<span class="label-count">(1)</span>
</li>
</ul>
<form id="myform">
</form>
I am lost at trying to achieve a menu like this in typoscript.These pages should not be in the menu : excludeUidList = 2,3,5,6,7,48,49,50,51,52
<ul>
<li>
<span>First page</span><i class="fa fa-plus"></i>
<ul class="submenu">
<li>
</i>
<ul class="submenu">
<li>sub sub page</li>
<li>sub sub page</li>
</ul>
</li>
<li>
<span>Title</span>
</li>
<li>
<a href="link to third sub-page" class="submenu-toggle" ><span>Title</span></a>
</li>
</ul>
</li>
<li>
</i>
<ul class="submenu">
<li>
</i>
</li>
<li>
</i>
</li>
</ul>
</li>
</ul>
Could anyone point me in the right direction?Help would be appreciated
ok just in case someone has the same problem here is what i did and it works fine for me
lib.theMenuMobile = HMENU
lib.theMenuMobile {
entryLevel = 0
excludeUidList = 2,3,5,6,7,48,49,53,54,55
1 = TMENU
1 {
wrap = <ul>|</ul>
expAll = 1
NO = 1
NO {
wrapItemAndSub = <li class="uppermobilelink">|</li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = title
ATagBeforeWrap = 1
ATagParams = href="#" class="submenu-toggle mldisabled"
linkWrap = |<i class="fa fa-plus"></i>
}
}
2 < .1
2.wrap = <ul class="submenu">|</ul>
2.NO {
ATagTitle.field = subtitle
ATagParams = href="#" class="submenu-toggle"
linkWrap = |<i class="fa fa-plus"></i>
wrapItemAndSub = <li>|</li>
}
3 < .2
}
I am going to implement twitter bootstrap's carousel in order to display five items at once. My system uses the template engine smarty.
I am already familiar with smarty basics. The following code would display all my items:
<ul class="thumbnails">
{foreach $items as $item}
<li class="span2">
<div class="caption">
<h5>{$item.title}</h5>
</div>
<div class="thumbnail">
<img src="{$item.image}" alt="">
</div>
</li>
{/foreach}
</ul>
Unfortunately twitter bootstrap's carousel needs all the items separated into blocks, like that:
<ul class="thumbnails">
<div class="item active">
<ul class="thumbnails">
<li class="span2 offset1">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span2 offset1">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
</ul>
</div>
...
</ul>
How do I achieve this by using smarty's foreach loop:
Putting 5 items into one div.item the next 5 items into the next div.item and so on
The first div.item should get the class 'active'
The first item in every div.item should get the class '.offset1'
Smarty defines some magic variables which allow you to see how many times the loop has gone through (see the documentation for {foreach} for all the details).
In your case you want to check:
{$item#first} to open the first, active div.item
{$item#iteration is div by 5} to close and open the next div.item, and give its first li the offset1 class
{$item#last} to close off the last div.item whether or not it's divisible by 5