fritzthecat-blog: Pure CSS Slide Menu

A slide-menu does not move content when it gets visible, like a push-menu does. It appears above the page content, and disappears when the mouse clicks anywhere else. A push-menu pushes aside content when it appears. See here for a demo. Both were invented by "the web". There are no such terms in classical desktop-UI programming, but you could call a slide-menu a popup-menu in desktop-terms.

For smooth scroll behaviour, the demo has been shifted to bottom of this page (click here to see it).

Restrictions

This menu has no sub-menus that can be opened separately by mouse-click. See my past Blog about CSS menus for this problem. But nevertheless it is a simple div that can contain anything.

The normal user experience is that one click opens a menu, and another click closes it again. The pure CSS slide-menu does not behave like that. It stays open until the user clicks anywhere else on the page, and the mouse does not hover it any more. There is no CSS event to catch when the user clicks a second time to the button. Thus the menu covers the button completely when visible, to avoid bad user experience.

On ESCAPE key the menu does NOT disappear.

The menu does not open in a visible area in case the button is on bottom of the page. You would have to scroll upwards then to see the menu-content. A desktop menu would do location-calculations to determine a currently visible area.

Concepts

The basic idea of a slide-menu is to have an on-demand navigation that takes nearly no space on the page. A useful feature would be that it always stays visible, not scrolling with the page content.

A "sandwich" button represents the slide-menu trigger. Its :focus pseudo-class serves for setting the menu-content visible when the user clicks it. Basically this button could be everywhere on the page, but top-right seems to be the best place. Being there, it most likely does not obscure any left-aligned text, and thus it does not need its own layout row, which saves space.

The visibility of the menu-content is not controlled through CSS display, but through setting max-height and max-width, to either zero (invisible), or a very big value the menu (visible) won't ever achieve. There are two reasons for that:

we don't want to size any menu individually depending on its content; using max-width is like saying "take your preferred dimension"
we like animated UI controls, and display currently can not be animated via CSS

Mind that the max-width way works only for absolutely (or fixed) positioned block elements, because these do not take the whole page width like static block elements do.

CSS

Here is the CSS of the slide-menu, with lots of comments (which I regard to be absolutely necessary for CSS code).

      /* common styles for menu and menu-button */
      .slidemenu {
        position: fixed;
        top: 0;
        right: 1.3em; /* leave place for scrollbar */
        background-color: lightGray;
      }
      /* the open-menu button */
      .menu-button {
        padding: 0.4em;
        border: none; /* else border shadow */
      }
      /* initially invisible menu */
      .slidemenu-content {
        max-height: 0; /* using max-height instead of height avoids a fixed height */
        max-width: 0; /* same for width */
        overflow: hidden;
        transition: 0.5s;
        white-space: nowrap; /* avoids text formatting work during animation */
      }
      /* make menu visible when menu-button is clicked, or mouse is over the menu */
      .menu-button:focus + .slidemenu-content, .slidemenu-content:hover {
        max-height: 60em; /* using max-height instead of height avoids a fixed height */
        max-width: 60em; /* same for width */
        padding: 1em; /* define padding only when being visible! */
        z-index: 1; /* else menu might be covered by some content */
      }

Initially the menu is set to invisible by assigning it max-width: 0 and max-height: 0.

The CSS rule

.menu-button:focus + .slidemenu-content, .slidemenu-content:hover

makes the menu visible. It applies when the user clicks the button, and stays active as long as the mouse does not click elsewhere on the page. The :hover rule avoids the menu closing in case the mouse clicks on it, because then the button loses focus. Precondition for this to work is that the menu-button HTML-element is directly followed by the menu-content HTML-element, as sibling (described by the CSS '+' operator).

The menu-content needs a z-index when visible, else it might be covered by page contents.

The transition: 0.5s says that all changes should be done animated within half a second. This is all you have to do for a menu animation, elegantly via CSS.

Mind that you need to define some background-color for the menu-content, else it will be transparent. But the .menu-button styles and the .slidemenu-content padding are not relevant for the functionality.

HTML

Here is the necessary HTML structure.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <style type="text/css">
      /* CSS goes here */
    </style>
  </head>
  
  <body>

    <input class="slidemenu menu-button" type="button" value="&#9776;" title="Click to open menu">
    
    <div class="slidemenu slidemenu-content">
      <p><a href="#one">1 Slide Menu</a></p>
      <p><a href="#two">2 Slide Menu</a></p>
      ....
    </div>
      
    <h4 id="one">1 Slide Menu</h4>
    <p>
      Lore ipsum ...
    </p>

    <h4 id="two">2 Slide Menu</h4>
    <p>
      Lore ipsum ...
    </p>
    ....

  </body>
</html>

Important is that the menu-button must be the direct predecessor sibling of the menu-content. It is not important how the link target elements are organized.

Demo

The following demo shows a slide-menu button that won't scroll with the content.

This example is nested into a web-page. The concept of a CSS slide-menu is easier to explain with a top-level menu using CSS position: fixed. Thus the CSS working here differs slightly from the source discussed in this article, in that it has a relative parent and is positioned absolutely. The migration between these models can be done with changing just a few CSS lines:

      .slidemenu {
        position: absolute;
        ....
      }

But mind that for this to work you need a scroll-pane and a scroll-pane-container above the button. I will explain this soon in another Blog.

A problem occurs when the wrapping page is longer than this example, meaning there is more page content below. Then the browser moves the chosen chapter to the top of its view-port, which is not user-friendly, but currently I do not know a workaround for that (by the way, this is not related to a slide-menu).

Use this to navigate ->

1 Slide Menu

Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim. Eam an porro accusamus dissentiunt, te sit impedit tacimates, movet laboramus mea ad. Putent concludaturque per ei, cu utamur eleifend recteque vel, ancillae suscipit sit no. No qui erat dicunt lucilius. Ullum epicurei ea nec. Elitr laudem eam et, no dicit dissentias sea. Nec an stet decore honestatis, omittam maiestatis ei quo, eripuit facilis recusabo ius cu. Eu oblique detraxit honestatis vim, hinc sonet definitiones has ea. Debet propriae ut his, ne lorem aeque oportere ius, duo autem equidem gloriatur ad. Ei vel illud adolescens. Meis ocurreret ex sit. Ea ferri facer per. Odio gubergren democritum cum ad, ei quaeque philosophia contentiones sit. At atqui choro theophrastus sit, ne erroribus vulputate vis, eam et antiopam scripserit. Et sea altera salutandi iudicabit. Vidisse probatus moderatius cum te, et vis feugiat luptatum consulatu.

2 Slide Menu

3 Slide Menu

4 Slide Menu

For more experience with pure CSS slide-menus you can visit my homepage demo.

fritzthecat-blog

Blog-Archiv

Sonntag, 27. Dezember 2015

Pure CSS Slide Menu