6

I have a menu where the submenu area is shown when you hover over the top menu option. The top option is a link field and the submenu is a rich text area. When I hover over the top option the submenu area is shown, but as I move over it the submenu is hidden again. It looks like I cross a before I get to the menu and thus move off of the part of the page I need.

I have tried using a click event on the top level menu to add a class that I can use to show the submenu area. This does work, but removing the class is problematic. If I click anywhere outside of the menu the class should be removed, but not all areas seem to raise the click event. For example, if I click on an editable field somewhere else on the page the submenu stays visible and the edit frame chrome for the field I clicked on becomes visible.

Here are some snippets:

<nav id="main-nav">
<ul>
    <asp:Repeater runat="server" ID="repNavigation">
        <ItemTemplate>
            <li class="top-nav">
                <sc:Link runat="server" ID="topLink" Field="Link" 
                    CssClass="<%# GetTopMenuClass((Item)Container.DataItem) %>"
                    Item="<%# (Item) Container.DataItem %>">
                    <sc:Text ID="topLinkTitle" runat="server" Field="Menu Title" Item="<%# (Item) Container.DataItem %>"/>
                    <div class="triangle"></div>

                                </sc:Link>
                <div class="submenu">
                    <div class="submenu-content">
                        <sc:Text runat="server" ID="submenuContent" Field="Submenu Content" Item="<%# (Item) Container.DataItem %>"/>
                    </div>
                </div>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>
</nav>

Prior to this code that attaches a click function to the html tag I tried code that attached something similar to every tag. It was unsuccessful, functioning as described above. Same as the code below.

var isEditing = jQuery("body.page-editor");
if (isEditing) {
    var menuFields = jQuery(".top-nav");

    var menuFields = jQuery(".top-nav a span[contenteditable=true]");
    menuFields.click(function () {
        var p = jQuery(this).closest(".top-nav");

        if (p.hasClass("show-submenu")) {
            p.removeClass("show-submenu");
        } else {
            jQuery(".top-nav").removeClass("show-submenu");
            p.addClass("show-submenu");
        }
    });
}

jQuery('html').click(function () {
    jQuery(".show-submenu").removeClass("show-submenu");
});

jQuery('.top-nav').click(function (event) {
    event.stopPropagation();
});
  • You could expose these via editframes – ASura Oct 20 '16 at 19:20
  • 3
    As you're finding out, interactions driven by hover are problematic for page editor mode. They're also problematic for keyboard-only users as well as for anyone using a touch-screen device. Rather than try to fix this "problem" my recommendation is to avoid it entirely by not using hover interactions which will improve the experience for your users as well as your editors. Of course, this doesn't actually answer the question in any way, so I'm posting it as a comment. – zzzzBov Oct 21 '16 at 16:20
5

For non-rendered fields, or things that are handled via javascript, etc, I use a combination of Edit Frames and EE views. The EE Views let you present the content in a way that can expose content and fields that might not otherwise be easily accessible and Edit frames let you edit fields that aren't rendered or have complex types.

1

Your idea can be slightly modified.

After clicking on the menu and if the user is in the Experience Editor you can render a button which will allow user to remove the class.

Alternatively you could controll the submenu with a button (of course visible only in EE) ie. the button could add a class to the submenu and when the author is done remove it and restore normal behaviour.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.