Skip to content
Grav 2.0 is officially stable. Read the announcement →
Archive

Make langswitcher plugin clickable on a modular menu

Started by Muut Archive 11 years ago · 12 replies · 737 views
11 years ago

☆ Here is the following navigation bar of a modular page
---html
{% block header_navigation %}
{% if show_onpage_menu %}
<ul class="navigation">
{% for module in page.collection() %}
{% set current_module = (module.active or module.activeChild) ? 'active' : '' %}
<li class="{{ current_module }}"><a href="#{{ _self.pageLinkName(module.menu) }}">{{ module.menu }}</a></li>
{% endfor %}
{% for mitem in site.menu %}
<li>
<a href="{{ mitem.url }}">
{% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
{{ mitem.text }}
</a>
</li>
{% endfor %}
{% if config.plugins.langswitcher.enabled %},{% include 'partials/navbar_langswitcher.html.twig' %},{% endif %}
</ul>
{% else %}
{{ parent() }}
{% endif %}
{% endblock %}

HTML


with langswitcher inserted just before </ul>.

Everything displays very well BUT  while link is correct (it's working if open in another tab) onclick is _not_ possible.

Is it a matter of CSS? And if so can I avoid it by custom.scss?

Thank in advance for your help ♪
11 years ago

Sounds like a CSS issue, but it depends on how your navbar_langswitcher.html.twig looks like. The first thing is to check, whether your custom template generates valid markup meaning only list <li> elements. Otherwise you may get invalid markup and this can be the reason for your issue.

11 years ago

♪ This how nav_langswitcher.html.twig looks like...
---html
{% set langobj = grav['language'] %}
<li id="langswitcher" class="active"><a>[{{ langswitcher.current }}] <i class="fa fa-caret-down fa-lg"></i></a>
<ul>
{% for key, language in langswitcher.languages %}
{% if key == langswitcher.current %}
{% set lang_url = page.url %}
{% set active_class = 'active' %}
{% else %}
{% set lang_url = base_url_simple ~ langobj.getLanguageURLPrefix(key)~langswitcher.page_route ?: '/' %}
{% set active_class = '' %}
<li><a href="{{ lang_url }}" class="{{ active_class }}">[{{ key }}] {{ language.nativeName }}</a></li>
{% endif %}
{% endfor %}
</ul>
</li>

TXT

Thank you very in advance for your help ☆
11 years ago

♪ There is not only <li>elements but also <ul> elements.
Is it not a CSS issue but a JS thing as for modular there is an additional script JSingleNav?
The navigation bar under modular works with JSingleNav as an anchor and langswitcher code do not point an anchor but a link?
Please help ☆

11 years ago

♪ Thanks in advance for your help solving this issue ☆

11 years ago

♪ Thank you in advance for your help solving this issue ☆

11 years ago

♪ Thank you in advance for your help solving this issue ☆

11 years ago

@hexplor
Hello Karol
I have a problem for a long time now and I have seen your answer in http://getgrav.org/forum#!/general:modular-page-navigation
I am currently facing another issue with modular menu
It is slightly different because it's involving the langswitcher plugin.
Technically speaking, I am doing my best, but yet I am not able to reach the solving point.
Thank you in advance if you can help

11 years ago

Ok I got that it's the additional script JSingleNav that is transforming regular menu bar into modular menu bar and is also tranforming links into ancor.
I would like to make an exception just for template langswitcher...

11 years ago

Ok this issue is solved ♪
It was a CSS issue
(I apologize to @Sommerregen)

I don't really know how I did, but I just add a navigationclass to nav_langswitcher.html.twig and that was it !
Here is the code (modification is second line from top):
---html
{% set langobj = grav['language'] %}
<li id="langswitcher" class="active navigation"><a>[{{ langswitcher.current }}] <i class="fa fa-caret-down fa-lg"></i></a>
<ul>
{% for key, language in langswitcher.languages %}
{% if key == langswitcher.current %}
{% set lang_url = page.url %}
{% set active_class = 'active' %}
{% else %}
{% set lang_url = base_url_simple ~ langobj.getLanguageURLPrefix(key)~langswitcher.page_route ?: '/' %}
{% set active_class = '' %}
<li><a href="{{ lang_url }}" class="{{ active_class }}">[{{ key }}] {{ language.nativeName }}</a></li>
{% endif %}
{% endfor %}
</ul>
</li>

TXT


☆ Hurrahhh, hurrahh !!!! ♪

Long life to Grav ...
11 years ago

This issue is NOT solved.
It appeared to be solved ONLY because I had erased the JSingleNav script in modular.html.twig.
With SCRIPT, then IMPOSSIBLE TO CLICK On the /JA link on nav_langswitcher
All my apologies for not been able to solve that issue yet...

11 years ago

OK

I finally found THE solution looking at the documentation of JSingleNav
https://github.com/ChrisWojcik/single-page-nav
and the Demo
http://chriswojcik.net/demos/single-page-nav/

It appear that there is a class called 'external' in this script and that it makes possible to escape from the script.

I feel stupid and would like to apologize...

Hope that the solution will help others

Hurrah though as I reached that point I have been willing to reach for about a week now ♪

Grav is a fantastic tool: thank you ☆

Suggested topics

Topic Participants Replies Views Activity
Archive · by Deleted User, 9 years ago
0 1350 9 years ago
Archive · by Muut Archive, 9 years ago
2 934 9 years ago
Archive · by Muut Archive, 9 years ago
2 4060 9 years ago
Archive · by Muut Archive, 9 years ago
1 2947 9 years ago
Archive · by Muut Archive, 9 years ago
3 1118 9 years ago