MSN Drop down menu issues.

[Speed]

Hi Guys,

Today, for the first time I've been playing with Markup Simple Navigation. I am able to pick things up quickly, I had no issues with MSN except for dropdown, well not quite. Here's what happen...

I've created 4 pages and one of parent page contain 2 child page, which would be used as drop down.  Two of child menu will always be hidden inside parent ever time page loads up. Once the parent menu is clicked, this will slide down in time fashion and display two childs underneath parent. Once the child menu is clicked, it will be taken to child page and drop down will slide back up or hide the child.

It worked in HTML page and It almost worked in PW, I did troubleshoot and discovered the issues. The HTML page the parent menu contain hashtag '#' inside href....

<a href="#">Parent<span>▼</span></a>

This hashtag will not refresh page or reload page when clicked as I mentioned earlier, dropdown will stay hidden everytime uploads now with PW, The parent menu/page contain with link '/parent/' and if I click on this menu, the drop down will show but hides fast because page reloads. Is there a way I could get this parent page/menu with link '/parent/' turn into # with PW or MSN?

 

[Robin S]

A typical way to do this sort of menu doesn't involve a hash in the parent href, but rather you use CSS to show/hide the nested lists of child pages.

li > ul { display:none; }
li:hover > ul { display:block; }

 

[Speed]

Thank you for taking your time to reply, Your suggestion would work, maybe on another project in the future, But, I am targeting for on click functions, I'd want drop down menu to go in effect after clicking without page reload. The only thing I can think of is replacing parent link (/parent/) into (/#/). Unless there are other way around in MSN, module or etc. 

Oh this would be problem on a responsive (mobile) mode, when you tap on the parent, it'd reloads! None of child would display on dropdown.

[Robin S]

38 minutes ago, Speed said:

Oh this would be problem on a responsive (mobile) mode, when you tap on the parent, it'd reloads! None of child would display on dropdown.

iOS devices actually handle links with hover states quite well - first touch triggers hover behaviour. For Android/cross-platform check out @bernhard's solution:

 

44 minutes ago, Speed said:

The only thing I can think of is replacing parent link (/parent/) into (/#/).

Using a hash in a link href is not great because it usually triggers a page jump when clicked. Using href="javascript:void(0)" is a bit better, but if you don't actually have an href you should probably be using a button element instead of a link.

But my suggestion is if you're using Javascript to trigger your menu then just leave the parent href untouched and use preventDefault() in your Javascript.

$('#my_link').click(function(e){
    e.preventDefault(); // no page reload
    // show dropdown menu
});

 

[Speed]

12 hours ago, Robin S said:

Using a hash in a link href is not great because it usually triggers a page jump when clicked. Using href="javascript:void(0)" is a bit better, but if you don't actually have an href you should probably be using a button element instead of a link.

But my suggestion is if you're using Javascript to trigger your menu then just leave the parent href untouched and use preventDefault() in your Javascript.

Yes, I am aware using hash as link in href isn't great idea but it's lot better than javascript:void(0) since violates csp  Content Security Policy  . Its very bad practice to use JS syntaxes inside HTML. 

Yes, I could use button element instead, but how would I do it on unordered list along with  Markup Simple Navigation?

Your jQuery e.preventDefault() actually solved my problem, Thank you!  You know I did thought of that method earlier and said to myself it doesn't make any sense oh well, once again Thank you for taking your time to help me solve my issues. 

 

[bernhard]

this is another solution i used lately:

javascript for handling the clicks:

    // mobile menu click handler
        $('#tm-mobile-nav').on('click', 'a,i', function() {
            // if the link icon was clicked go to url
            if($(this).is('i')) {
                location.href = $(this).data('mobile-link');
                $(this).removeClass('uk-icon-arrow-right').addClass('uk-icon-spinner uk-icon-spin');
            }
        });

css for handling the visibility:

/* mobile menu */
#tm-mobile-nav li .uk-icon-arrow-right { display: none; }
#tm-mobile-nav li.uk-parent.uk-open .uk-icon-arrow-right, #tm-mobile-nav li.uk-parent .uk-icon-spinner { display: inline-block; margin-left: 10px; }

and php (using custom UIKIT markup):

$out .= "<li class=\"{$cls}\"><a href=\"" . ($item->numDropdownItems ? '#' : $item->url) . "\">{$item->title} <i data-mobile-link=\"{$item->url}\" class=\"uk-icon-arrow-right\"></i></a>";

uikit will handle all links with # as collapsible menu items: https://getuikit.com/docs/offcanvas.html

live example: https://www.mistelbach-mustangs.at/

[Robin S]

8 hours ago, Speed said:

Yes, I could use button element instead, but how would I do it on unordered list along with  Markup Simple Navigation?

The docs for MSN do cover this.

If your parent page has a particular template you can use the xtemplates and xitem_tpl options.

For more advanced targeting you can use a hook, for example:

$nav = $modules->get('MarkupSimpleNavigation');
$nav->addHookAfter('getItemString', function($event) {
    $page = $event->arguments('page');
    if($page->children->count()) {
        $event->return = "<button class='$page->name'>$page->title</button>";
    }
});

 

[Speed]

@Bernhard: It was quite interesting. However, I believe, I've found solution. Thank you for sharing anyway.

@Robin S: Truthfully...The Doc for MSN is insufficient, Not much of example that could help me get idea. Also. I don't have strong knowledge in php, I am still struggling... It takes one day a time.

[cstevensjr]

1 hour ago, Speed said:

@Bernhard: It was quite interesting. However, I believe, I've found solution. Thank you for sharing anyway.

It would be beneficial and helpful to everyone if you could provide whatever solution you came up with.  Thanks.

[Speed]

5 minutes ago, cstevensjr said:

It would be beneficial and helpful to everyone if you could provide whatever solution you came up with.  Thanks.

The solution is at the last part of forth post, (jQuery code)

[cstevensjr]

Just to be clear:

1 hour ago, Speed said:

@Bernhard: It was quite interesting. However, I believe, I've found solution. Thank you for sharing anyway.

Was solved by:

23 hours ago, Robin S said:

But my suggestion is if you're using Javascript to trigger your menu then just leave the parent href untouched and use preventDefault() in your Javascript.

$('#my_link').click(function(e){
    e.preventDefault(); // no page reload
    // show dropdown menu
});

 

Thanks for clearing things up.