Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: etc_tree: trees for geeky grandmas
Hi ibadullah,
sorry, I’ve somehow zapped your question. I don’t see how etc_tree
could create a non-recursive structure (ul/li
switched to div/a
) that you need here. Actually, mixing sections, categories and articles should be avoided, but if you really need it, I can imagine a way to transform etc_tree
output with etc_query
.
Offline
#62 2019-05-09 04:59:52
- ibadullah
- Member
- From: Kabul, Afghanistan
- Registered: 2017-09-16
- Posts: 49
Re: etc_tree: trees for geeky grandmas
Currently I can create menu from different section, categories and articles through etc_tree plugin already.
For example: Home, *About*(Article), *Services*(Section), *News*(Category), *Contact*(Article)
But the structure of bootstrap nav is different which has different extra tags <div> and elements and I couldn’t make them dynamic through etc_tree plugin.
Last edited by ibadullah (2019-05-09 05:08:05)
Offline
#63 2019-06-11 11:13:08
- ibadullah
- Member
- From: Kabul, Afghanistan
- Registered: 2017-09-16
- Posts: 49
Re: etc_tree: trees for geeky grandmas
Still, I’m looking a solution for: link
I tried the following structure but didn’t success with to work with the above structure I need.
<txp:etc_query
data='<txp:etc_tree id="6" />'
replace="//ul@@class=navbar-nav mr-auto w-100 justify-content-end;
//ul/li/ul/..@@class=class-name;
//ul/li/ul/li/..@@class=class-name;
//ul/preceding-sibling::a@@data-toggle=dropdown@class=dropdown-toggle"
/>
Offline
Re: etc_tree: trees for geeky grandmas
Hello, have you tried to set wraptag
and break
attributes before transforming the tree:
<txp:etc_tree id="6" wraptag="ul" break="li" />
To help with etc_query
, I would need to see the HTML output produced by <txp:etc_tree />
in your case. You can display it with debug="d"
attribute of etc_query
.
Offline
#65 2019-10-15 05:23:10
- ibadullah
- Member
- From: Kabul, Afghanistan
- Registered: 2017-09-16
- Posts: 49
Re: etc_tree: trees for geeky grandmas
Hello Every One!
i have dynamic the below menu but its drop-down is not working, any one can help me in this matter. Thank you
Here is the structure of menu:
<ul>
<li class="menu-item-has-children"><a href="#" title="">home</a><i class="ion-chevron-down"></i>
<ul class="submenu">
<li><a href="#" title="" data-ripple="">home 1</a></li>
<li><a href="#" title="" data-ripple="">home featured banner</a></li>
<li><a href="#" title="" data-ripple="">home featured carousel</a></li>
<li><a href="#" title="" data-ripple="">home with sidebar</a></li>
<li><a href="#" title="" data-ripple="">home featured text carousel</a></li>
<li><a href="#" title="" data-ripple="">home featured video </a></li>
<li><a href="#" title="" data-ripple="">home boxed <strong>new</strong></a></li>
</ul>
</li>
Offline
#66 2019-10-15 05:23:48
- ibadullah
- Member
- From: Kabul, Afghanistan
- Registered: 2017-09-16
- Posts: 49
Re: etc_tree: trees for geeky grandmas
Hello Every One!
i have dynamic the below menu but its drop-down is not working, any one can help me in this matter. Thank you
Here is the structure of menu:
<ul>
<li class="menu-item-has-children"><a href="#" title="">home</a><i class="ion-chevron-down"></i>
<ul class="submenu">
<li><a href="#" title="" data-ripple="">home 1</a></li>
<li><a href="#" title="" data-ripple="">home featured banner</a></li>
<li><a href="#" title="" data-ripple="">home featured carousel</a></li>
<li><a href="#" title="" data-ripple="">home with sidebar</a></li>
<li><a href="#" title="" data-ripple="">home featured text carousel</a></li>
<li><a href="#" title="" data-ripple="">home featured video </a></li>
<li><a href="#" title="" data-ripple="">home boxed <strong>new</strong></a></li>
</ul>
</li>
Offline
Re: etc_tree: trees for geeky grandmas
ibadullah wrote #319716:
its drop-down is not working
Sorry, I don’t understand what it means. To make a nested list act as drop-down on the public side, you need a bit of CSS/JS, etc_tree
does not provide it. Or do you mean something is broken on the admin-side?
Offline
#68 2019-10-15 10:22:08
- ibadullah
- Member
- From: Kabul, Afghanistan
- Registered: 2017-09-16
- Posts: 49
Re: etc_tree: trees for geeky grandmas
etc Developer!
i am sorry that i didn’t clear you the problem, my problem is nested list act as drop-down on the public side,
the menu working fine after dynamic but only the nested list act as drop-down not working.
Offline
Re: etc_tree: trees for geeky grandmas
@ibadullah you can try something like
<style>
li.menu-item-has-children>ul {display: none}
li.menu-item-has-children:hover>ul {display: block}
</style>
or, if you use jQuery
<script>
$(function () {
$("li.menu-item-has-children").click(function () {
$(this).children("ul").toggle();
}).click();
});
</script>
Hope that helps.
Offline
#70 2019-10-16 05:16:28
- ibadullah
- Member
- From: Kabul, Afghanistan
- Registered: 2017-09-16
- Posts: 49
Re: etc_tree: trees for geeky grandmas
@etc Developer!
i have problem in etc_query, i have assigned the classes for the menu and the menu is working fine but the problem is that the nested list act as drop-down on the public side is not working. only its drop-down is not working. please have look to etc_query you will understand.
<txp:etc_query
data='<txp:etc_tree id="6" />'
replace="//ul@@class=;
//ul/li/ul/..@@class=submenu;
//ul/li/ul/li/..@@class=menu-item-has-children;
//ul/preceding-sibling::a@@data-toggle=dropdown@class=dropdown-toggle"
/>
<ul>
<li class="menu-item-has-children"><a href="#" title="">home</a><i class="ion-chevron-down"></i>
<ul class="submenu">
<li><a href="#" title="" data-ripple="">home 1</a></li>
<li><a href="#" title="" data-ripple="">home featured banner</a></li>
<li><a href="#" title="" data-ripple="">home featured carousel</a></li>
<li><a href="#" title="" data-ripple="">home with sidebar</a></li>
<li><a href="#" title="" data-ripple="">home featured text carousel</a></li>
<li><a href="#" title="" data-ripple="">home featured video </a></li>
<li><a href="#" title="" data-ripple="">home boxed <strong>new</strong></a></li>
</ul>
</li>
Offline
Re: etc_tree: trees for geeky grandmas
ibadullah wrote #319729:
i have problem in etc_query, i have assigned the classes for the menu and the menu is working fine but the problem is that the nested list act as drop-down on the public side is not working. only its drop-down is not working. please have look to etc_query you will understand.
Ah, ok, sorry for confusion. Could you post here <txp:etc_tree id="6" />
output before passing it to etc_query
? Starting with
<txp:variable name="tree"><ul>
<li><a href="#" title="">home</a><i class="ion-chevron-down"></i>
<ul>
<li><a href="#" title="" data-ripple="">home 1</a></li>
<li><a href="#" title="" data-ripple="">home featured banner</a></li>
<li><a href="#" title="" data-ripple="">home featured carousel</a></li>
<li><a href="#" title="" data-ripple="">home with sidebar</a></li>
<li><a href="#" title="" data-ripple="">home featured text carousel</a></li>
<li><a href="#" title="" data-ripple="">home featured video </a></li>
<li><a href="#" title="" data-ripple="">home boxed <strong>new</strong></a></li>
</ul>
</li>
</ul></txp:variable>
and applying
<txp:etc_query debug="o"
data='<txp:variable name="tree" />'
replace="//ul@@class;
//ul/li/ul/..@@class=submenu;
//ul/li/ul/li/..@@class=menu-item-has-children;
//ul/preceding-sibling::a@@data-toggle=dropdown@class=dropdown-toggle"
/>
I get as expected
<ul>
<li class="submenu"><a href="#" title="" data-toggle="dropdown" class="dropdown-toggle">home</a><i class="ion-chevron-down"></i>
<ul class="menu-item-has-children">
<li><a href="#" title="" data-ripple="">home 1</a></li>
<li><a href="#" title="" data-ripple="">home featured banner</a></li>
<li><a href="#" title="" data-ripple="">home featured carousel</a></li>
<li><a href="#" title="" data-ripple="">home with sidebar</a></li>
<li><a href="#" title="" data-ripple="">home featured text carousel</a></li>
<li><a href="#" title="" data-ripple="">home featured video </a></li>
<li><a href="#" title="" data-ripple="">home boxed <strong>new</strong></a></li>
</ul>
</li>
</ul>
Offline