Home Forums Weaver Xtreme Theme SmartMenus – need to close the whole menu when menu item clicked / tapped

Topic Resolution: Answered

This topic contains 8 replies, has 2 voices, and was last updated by  scrambler 3 weeks, 4 days ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #61113
    Answered

    timreeves
    Participant

    Hi all,

    I’m having a problem on a one-pager website using SmartMenus (may be the problem would be the same with standard menus).

    The menu of the one-pager contains only anchor links, which just scroll the page down to the selected content sections. The problem is, I have a sticky menu, to make sure it is always available. So the page scrolls to the section, the start of which is covered by the sticky menu with its high z-index. I can compensate for this in desktop view, by adding e.g. 30px padding at the start of each section – space is also a design element 🙂

    In mobile view, the hamburger then is in the top line (rather the the top level of the menu) – which I can make to be 30px high as well; but when I tap the hamburger, the actual menu drops down. When I select an item from the menu, any submenu will be closed, but the top-level menu items remain displayed. And they cover the start of the section scrolled to. Looks horrible. The user must manually tap the hamburger to close the top-level of menu.

    What I need to happen is to automatically completely close the menu, as if the hamburger had (also) been tapped. I checked out the possibilites of SmartMenu JavaScript Initialization in Weaver Xtreme Plus (in use), but I don’t see any such option.

    Even I reckon this could / should be the standard action. Because if the menu item leads to a new page, the hamburger menu will be closed on initial page display. To be consistent, it then should also be closed when we remain on the same page. Or have I missed something?

    Any help would be mightily appreciated!

    Tim Reeves

    #61114

    timreeves
    Participant

    Just to add a bit on the implementation:

    .is-menu-mobile .wvrx-menu-button (a span, with 2 events attached) gets a further class depending on whether the menu is shown or hidden:

    mobile-menu-open / collapsed mobile-menu-closed

    And the <ul id=”menu-hauptmenue”> gets the class “collapsed” appended to it when the menu is hidden.

    I could imagine that firing a particular JS event would need to happen…

    #61115

    scrambler
    Moderator

    Link to the site please.

    #61116

    timreeves
    Participant

    Hi Scrambler,

    obviously this is work in progress: https://translation-uebersetzung.de/

    Normally I would have a “coming soon” page on it – but not when you want to look at it 🙂

    Thanks in advance,

    Tim

    #61117

    scrambler
    Moderator

    This is a tricky one but the behavior is to be expected.

    The smart menu script appears to use the page load as a way to re initialize the mobile menu open close.
    When you click on one of your menu item, there is no page load, just a scroll to the anchor, and so the smart menu does not know to close.

    When using the smart menu, for the submenu to collapse once the page scrolls to the anchored area, the “collapsed” class would need to be added to the Menu ul tag.
    This can only be done by modifying the script.

    The problem would be the same I suppose without the smart menu, as the weaver menu uses the class .is-hidden to tell the menu to be open or closed, and here again that class is only added at page load.

    You may want to contact the smartmenu developers via their website or forum https://www.smartmenus.org/ as they may have a way to do that or they may want to update their script to support that option, given the single page sites have become more popular.

    I would explain my problem the following way to them.
    When using Smart Menus in mobile mode (hamburger slide open menu) clicking the hamburger opens the menu, clicking a menu (or submenu) item goes to the new page where the Mobile menu will automatically be closed/collapsed under the hamburger.
    If the Website is a single page design, where menu items are links to anchors in the single page, clicking a menu item only scrolls the page to a specific area, there is no page load when clicking on a specific menu or Sub menu.
    As a result, when clicking a menu item, the Mobile menu does not close. It stays open under the hamburger.
    Is there any way to change that behavior, so that once we click an anchor link menu item, the mobile menu closes up?

    This would require the “collapsed” class to be added back to the ul tag as soon as a menu item is clicked.

    Now we can ask @weaver if he could and would consider changing that behavior for the Xtreme menu, and basically add the “is-hidden” class to the mobile menu as soon as a menu (or submenu) item is clicked, instead of relying on the page load to do that.

    #61118
    Best Answer

    timreeves
    Participant

    This reply has been accepted as the best answer.

    Hi Scrambler,

    thanks so much for that super analysis of the situation.

    I looked at the SmartMenus Forum, as you suggested, but it looks pretty much dead – in the last year a number of topics were started, and almost all have not received any reply. There are even some spam entries in the forum! So it hardly seems worth registering an account there…

    Regarding the Xtreme menu, I had originally switched to Smart Menus (“recommended”) (a) for the better transition effects, and (b) in particular because a main item with sub-items was on the far right, so part of the dropdown of Xtreme menu was off screen. But now I have another main item at far right without sub-items (the language switcher) so indeed they are now an option.

    And I’ll be blowed – they already DO work as I need! So @weaver has in fact already done it right. Kudos to Bruce!

    What’s not so nice with them is the lack of transition effect, and especially that to open a sub-menu in mobile mode, one must tap or click exactly on the arrow at far right, rather than on any blank space of the whole item bar, as with SmartMenus. But I seem to remember that I pepped those things up a bit on a previous project with custom CSS, so I’ll see what I can do.

    Many thanks!

    Tim

    #61119

    scrambler
    Moderator

    Good to know the Xtreme menu work the way you need.

    If you need help with submenu going off page, we can easily fix that with CSS.

    #61221

    timreeves
    Participant

    I found that styling the Weaver Xtreme Menus as I needed involved quite a lot of Custom CSS, but with that I was able to get a really good result, especially for mobile menu. The default mobile menu is full browser width, and depending on the scroll position of the page, they either push the rest of the page down, or overlay it, which is not so great. The following CSS makes the mobile menu always overlaid over the page, and only as large as neccessary. It also makes it easier to open / close a submenu by making the sensitive area of the dropdown arrow much larger.

    /* Desktop menu (Xtreme Menus) */
    .is-menu-desktop .menu-alignright { padding-right: 3vw; }
    .menu-primary li a { font-weight: 600; } /* Demi */
    @media (min-width: 768px) { .menu-primary .menu-arrows .toggle-submenu:after { top: 1.4em; } }
    .menu-arrows.menu-hover .toggle-submenu:after { right: .7em; }
    
    /* Desktop menu (Xtreme Menus) transition effects (a) Hover-BG, (b) Submenu - both using mouse hover */
    .is-menu-desktop .menu-primary .wvrx-menu > li > a { transition: background-color .33s ease-in-out; }
    /* Weaver: .wvrx-menu li :: position: relative; || .wvrx-menu ul :: display: none; position: absolute; top: 100%; left: 0; */
    /* Weaver: .wvrx-menu * { transition: background-color .33s ease, color .33s ease, font-size .33s ease; } */
    .is-menu-desktop .wvrx-menu ul { display: block; top: -99999px; opacity: 0; transition: opacity .33s ease-in-out; }
    .is-menu-desktop .menu-primary .wvrx-menu.menu-hover li:hover > ul { top: 100%; opacity: 1; }
    
    /* Mobile menu (Xtreme Menus, otherwise stays open on anchor links) and img replacing Genericons Hamburger - */
    /* wrapped in div#nav-primary.menu-primary div.wvrx-menu-container span.wvrx-menu-button span.menu-toggle-menu img#hamburger-icon */
    /* Mobile Menu uses different colors to desktop menu */
    /* See: https://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element */
    .is-menu-mobile .wvrx-menu-container { color: #970D34; background-color: #F8EEF0; padding-bottom: 0; }
    .is-menu-mobile .menu-primary .wvrx-menu > li > a,
    .is-menu-mobile .menu-primary .wvrx-menu ul li a { color: #970D34; background-color: #F8EEF0; }
    .is-menu-mobile .menu-primary .wvrx-menu > li > a:hover,
    .is-menu-mobile .menu-primary .wvrx-menu ul li a:hover { background-color: #EAC6CD !important; }
    /* Decouple bg of arrow area from main link area */
    /* .is-menu-mobile .menu-primary .wvrx-menu > li > a:hover span.toggle-submenu { background-color: #E8B5BF; } */
    .is-mobile-menu.menu-arrows a { border-top-color: #970D34; }
    /* Desensitize the link on a placeholder menu item with submenu */
    .is-menu-mobile .menu-primary .wvrx-menu > li.has-submenu > a { pointer-events: none; }
    /* This is needed too as hover events from the child cascade up to the parent */
    .is-menu-mobile .menu-primary .wvrx-menu > li.has-submenu > a:hover { background-color: #F8EEF0 !important; }
    /* Position the hamburger icon img */
    .is-menu-mobile .menu-toggle-button { padding: 4px 0 4px 1.5vw; }
    .is-menu-mobile .menu-toggle-button img { display: block; }
    /* For better usability, more top/bottom padding for items, and larger arrow-area with own bg-color */
    .is-menu-mobile .wvrx-menu a { padding: 0.85em .75em; }
    .is-menu-mobile .menu-arrows .toggle-submenu { padding: 0 3em; background-color: #F8EEF0; border-left: 1px dotted #970D34; border-right: 1px dotted #970D34; pointer-events: auto; }
    .is-menu-mobile .menu-primary .menu-arrows .toggle-submenu:after { color: #970D34; }
    /* Personal preference in submenu padding */
    .is-mobile-menu.menu-arrows ul { padding: 0 0 0 1em; }
    .is-menu-mobile .wvrx-menu-container ul.weaverx-theme-menu li:first-child,
    .is-menu-mobile .wvrx-menu-container ul li.menu-item:first-child { margin-top: 0 !important; }
    /* Transition effect for show / hide mobile menu: Weaver leaves the ul position static */
    /* In a div.wvrx-menu-container.wvrx-fixonscroll { position: fixed!important; z-index: 9999!important; } */
    /* When fixed (due to scrolling), the menu appears overlaying the web page; when not fixed (page not scrolled) it pushes the page content down */
    /* div.wvrx-menu-container has 4 direct children: div#primary-toggle-button, span.wvrx-menu-html, div.wvrx-menu-clear, ul.is-mobile-menu */
    /* To make the mobile menu ALWAYS overlay the page content, div.wvrx-menu-container must be position:relative, and ul.is-mobile-menu absolute */
    .is-menu-mobile .wvrx-menu-container { position: relative; }
    ul.is-mobile-menu.menu-arrows { position: absolute; top: 48px; opacity: 1; transition: opacity .33s ease-in-out; margin-left: 0; padding: 0 1em 1em; background-color: #F8EEF0; }
    ul.is-mobile-menu.is-hidden { display: block; top: -99999px; opacity: 0; }
    ul.is-mobile-menu.menu-arrows > li.has-submenu > a { padding-right: 8em; }
    ul.is-mobile-menu.menu-arrows > li:last-child a { border-bottom: 1px solid #970D34; }
    .is-menu-mobile .menu-arrows .toggle-submenu { width: auto; transition: transform .33s; }
    .is-mobile-menu.menu-arrows .toggle-submenu:hover { background-color: #EAC6CD ; }
    .is-menu-mobile .menu-arrows .is-open-submenu .toggle-submenu { transform: rotate(180deg); }
    .is-menu-mobile .menu-arrows .toggle-submenu:after { font-size: 95%; padding-left: 0; margin-right: 0; }
    

    See it here: https://translation-uebersetzung.de/

    @weaver: The actual submenu arrow is a Genericon in an ::after rule. Sadly, this does not allow transformations. So for that I had to put a transformation on the span tag itself – with the result that the whole span transforms, not just the arrow. If the arrow could also be a “proper” html element this would make life easier. Anyway, you are most welcome to use anything here.

    Cheers and Thanks,
    Tim

    #61222

    scrambler
    Moderator

    Thank you for sharing

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.