(Opgelost) Simplex-responsive: geen submenu's op apple-touch

[mev]

Hallo cms-ms-ers,
Op deze site is het Simplex responsive menu gebruikt:
http://www.mirjamstax.nl

De 2 Hoofdmenu-items Activiteiten en Mirjam Stax hebben submenu's, die werken/klappen netjes uit op desktops!

Maar op de meeste Apple Touch screens (I-Pad en I-Phone) worden die submenu-items geheel niet getoond, op 'n enkele andere weer wel. Zou dan dus ook aan de instellingen op die apple-apparaten zelf kunnen liggen. Maar beiden hebben bijv. javascript wel aanstaan.. moet dus iets anders zijn?

Op Android mobiels en tablets worden de submenu-items wel getoond, maar ze blijven te kort staan, verdwijnen net iets te snel.

Er is elders op het forum wel melding van vergelijkbaar euvel met het Simplex-menu gemaakt, maar ik kan nergens 'n oplossing vinden.

Heeft iemand enig idee in welke richting te zoeken?
Bij voorbaat heel hartelijke dank.

willemijn

[velden]

Maak van de items in het hoofdmenu 'Section headers' in plaats van internal links.

[mev]

Dankjewel voor je reactie Velden.
Met als default section header waren we uiteraard ook begonnen. Maar er zit een hick-up in cms-ms menu's in het algemeen wat betreft resonsive, waardoor op mobiele apparaten de submenu's ook niet uitklappen, en dan zelfs op androide apparaten ook niet.
Daar is wel een work-around voor, maar dan moet het Inhoudstype van de hoofdmenu-items veranderd worden van section header naar interne link, met als doelpagina bvk de eerste subpagina.
Daarom dus zo gedaan.

Alleen de Apple touch screens blijven dus zo toch nog een probleem..
willemijn

[velden]

Wat er gebeurt is dat met een echte link, de nieuwe pagina geladen wordt en dus het menu weer ingeklapt 'begint'.

Dat is eigenlijk gedrag dat je mag verwachten. Alleen met wat javascript zou je het wellicht zo kunnen maken dat het menu op touch devices eerst uitklapt, en pas bij een tweede 'touch' de link volgt.

[pasmaskas]

Ik heb dat probleem ook gehad met mijn menu. Zeker als het geen section header is gebeurt dat al snel. Ik heb het doen opgelost door de div waar het menu in zit de volgende javascritp te geven onclick="void(0)"

Zo iets woord het dan:
<div is="menu" onclick="void(0)">

menu

</div>

Ook heb ik in het menu sjabloon bij de section header er een normale menu item van gemaakt alleen de link veranderd naar {root_url}/# als je dan er op klikt gebeurt er niets anders dan dat het menu openklapt.

Mischien werkt het voor jou.

Gr Pascal

[mev]

Dankjewel Pasmaskas! Dat is hartstikke mooi concreet, en lijkt me een eind in de richting, echt super.
Nog kl vraagjes, want geen script-expert zijnde:
-moeten deze 2 oplossingen allebei worden doorgevoerd?

-bij de eerst zet je <div is="menu" onclick="void(0)">, moet dat "is" wellicht id zijn?

- Er staat nu in mijn pagina-sjablonen dit:
<div id="navigation">
<nav class='main-navigation grid_8 noprint' id='nav' role='navigation'>
{menu template='Simplex_Navigation.tpl'}
</nav>

</div> <!-- einde div navigation -->

Kan/mag die toevoeging met onclick="void(0)" aan de <nav> tag worden toegevoegd?
Of moet ie in de omringende <div id="navigation"> ?

-Als die 2e oplossing ook moet, schrijf je dat dit in het menu-sjabloon moet. Of kan ik bij de pagina-kenmerken vh hoofd-item met als inhoudstype section header, de link ook veranderen / invullen als: {root_url}/# ?

Bij voorbaat erg veel dank voor je extra moeite!
willemijn

[pasmaskas]

Die "is" moet inderdaad een "id" zijn (type foutje). je zou onclick="void(0)" kunnen testen op bijde maar ik denk dat hij in de <nav> moet.

Ik heb nog even gekeken voor je en het is geen {root_url}/# maar {$smarty.server.REQUEST_URI}#

Dit is het menu sjabloon van mij:

Code: Select all

{if $count > 0}

<ul id="menu">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul>' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li><a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<li><a href="{$smarty.server.REQUEST_URI}#">{$node->menutext}</a>

{elseif $node->type == 'separator'}
<li>

{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>

{/if}

Je ziet de regel staan bij {elseif $node->type == 'sectionheader'}. Volgens mij kan je bij een sectionheader geen url invullen dus het moet in het menu sjabloon.

Gr Pascal

[mev]

ha Pascal, Heel erg bedankt voor het opzoeken, wat constructief en aardig!
Hartstikke fijn, ben er erg blij mee!

Dat kan inderdaad niet, bij section header een url in vullen, je hebt gelijk.

Neem aan dat ik dan, naast die code-wijziging in het menusjabloon, wel hier/bij de pagina-eigenschappen het type in sectie hoofd moet veranderen (ipv interne link, zoals nu) ?

'k Ga je tips toepassen, lijkt me de goeie kant uit. Je hoort nog
(moet nu paar dagen weg)!

Hartelijke groet,
willemijn

[pasmaskas]

Als je jou menusjabloon code even hier neer zet dan zal ik de regel wel even plaatsen op de plaats waar hij hoort. Je moet de menu knoppen waar een submenu onder zit en section header van maken en dan geen interne link meer. Zo verkom je als iemand er opd ruk hij naar de doorgelinkte pagina gaat. Door de regel met het # en het stukje javascript zal hij (bij mij in iedergeval) alleen het sub menu open klappen zowel op ios als android en op een pc is het gewoon zo als het nu is maar dan zonder door link.

Gr Pascal

[mev]

Hier komt ie Pascal:

Code: Select all

{strip}

{if $count > 0}
    <ul class='cf'>
    {foreach from=$nodelist item=node}
        {if $node->depth > $node->prevdepth}
            {repeat string='<ul>' times=$node->depth-$node->prevdepth}
        {elseif $node->depth < $node->prevdepth}
            {repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
            </li>
        {elseif $node->index > 0}
            </li>
        {/if}
        {if $node->current == true}
            <li{if $node->parent == true || $node->haschildren == true} class='parent current'{/if}>
                <a href='{$node->url}' class='current'{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}</a>
        {elseif $node->parent == true && ($node->type != 'sectionheader' && $node->type != 'separator')}
            <li class='parent current'>
                <a href='{$node->url}' class='current'{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}</a>
        {elseif $node->type == 'sectionheader'}
            <li class='sectionheader'>
                <span class='sectionheader {if $node->parent == true} parent{/if}{if $node->current == true} current{/if}'>{$node->menutext}</span>
        {elseif $node->type == 'separator'}
            <li class='separator'>
                <hr class='separator' />
        {else}
            <li{if $node->parent == true || $node->haschildren == true} class='parent'{/if}>
                <a href='{$node->url}'{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}</a>
        {/if}
    {/foreach}

{repeat string='</li></ul>' times=$node->depth-1}</li>
    </ul>
{/if}

{/strip}

Er zijn 2 hoofditems (waar submenu-items aan hangen), zal die veranderen in section header.

Wat super, DANKJEWEL-WEL!
Willemijn

[Rolf]

Off-topic, maar...

In module templates kun je {strip}{/strip} weglaten door het *in* de Smarty tag te plaatsen.
Bijv. {menu|strip template='foo'}, voordeel is je dan alle "stripjes" bij elkaar hebt in het HTML sjabloon bij bughunting, zie ook https://www.cmscanbesimple.org/blog/usi ... tylesheets

Grt. Rolf

[mev]

Dank voor je tip Rolf, heul handig zoiets!
Zal misschien de snelheid ook beinvloeden, offe?

Groetjs, willemijn

[Rolf]

Ja, dat is wel het idee erachter. Of het verschil nu direct verneembaar is durf ik niet altijd te zeggen. Maar op grote en drukke websites zal het zeker positief uitpakken. Alle kleine beetjes helpen...

[pasmaskas]

Als het goed is moet dit hem zo zijn:

Code: Select all

{if $count > 0}
    <ul class='cf'>
    {foreach from=$nodelist item=node}
        {if $node->depth > $node->prevdepth}
            {repeat string='<ul>' times=$node->depth-$node->prevdepth}
        {elseif $node->depth < $node->prevdepth}
            {repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
            </li>
        {elseif $node->index > 0}
            </li>
        {/if}
        {if $node->current == true}
            <li{if $node->parent == true || $node->haschildren == true} class='parent current'{/if}>
                <a href='{$node->url}' class='current'{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}</a>
        {elseif $node->parent == true && ($node->type != 'sectionheader' && $node->type != 'separator')}
            <li class='parent current'>
                <a href='{$node->url}' class='current'{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}</a>
        {elseif $node->type == 'sectionheader'}
            <li{if $node->parent == true || $node->haschildren == true} class='parent'{/if}>
                <a href='{$smarty.server.REQUEST_URI}#'>{$node->menutext}</a>
        {elseif $node->type == 'separator'}
            <li class='separator'>
                <hr class='separator' />
        {else}
            <li{if $node->parent == true || $node->haschildren == true} class='parent'{/if}>
                <a href='{$node->url}'{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}</a>
        {/if}
    {/foreach}

{repeat string='</li></ul>' times=$node->depth-1}</li>
    </ul>
{/if}

IK hoor graag of het werkt.

[mev]

Tuuuuurlijk hoor je dat nog Pascal !
Na 't weekend!

Alvast super bedankt
willemijn