Web Connection
Slide Out Menu's on Site when accessed by a Phone
Gravatar is a globally recognized avatar based on your email address. Slide Out Menu's on Site when accessed by a Phone
  Jim Day
  All
  Apr 1, 2025 @ 12:57pm

I just started using the slide out menu on the layoutpage.wcs

They work when I access my site with a computer but do not show when I access with a phone.

How can I tell that they will not work so I can put up another menu?

Thanks,

Jim

Gravatar is a globally recognized avatar based on your email address. re: Slide Out Menu's on Site when accessed by a Phone
  Rick Strahl
  Jim Day
  Apr 2, 2025 @ 09:02am

You have to make it visible with a button or something that triggers the change of the CSS style (I think it is .slide-menu):

If you look at the default.htm page generated in a new project or in the demo you see:

<!-- toggle button -->
<div class="banner">
        <a class="slide-menu-toggle-open"
           title="More Samples">
            <i class="fas fa-bars"></i>
        </a>
</banner>

<!-- content is in here -->

<!-- Sidebar panel -->
<nav class="slide-menu">
...
</nav>


<!-- button handler for hamburger menu -->
<script>
$(".slide-menu-toggle-open,.slide-menu-toggle-close,")
   .click(function () {
        $(".slide-menu").toggleClass("active");
   });
</script>

This code toggles the visibility with a transition basically. You need a button (or a hamburger menu icon in the example) to trigger the change.

There's also automatic @media() styling in the CSS that automatically hides the side bar if it's below a certain size - that's why it's not visible on the phone unless you explicitly open it.

+++ Rick ---

© 1996-2025