Best way to handle Left Menu with Responsive

HTML & CSS
1

Hello. I am still testing the waters with responsive design.

Am currently wrapping up my e-commerce site, and would like to come up with something that will work on mobile - even though most of my website doesn’t yet support this.

A few weeks ago @coothead was very generous and shared a solution that I would like to adapt for my Product Catalog page.

In his example, there is a menu to the left and on the right is a flexible column that expands/contracts as the screen changes. And as an added bonus, @coothead did some really kick *ss CSS magic and made it some the left menu collapses when you get to mobile size!

While this is really neat, I would like to ask all of you if you think this design makes sense for my Product Catalog page?

It seems that fancier sites like Amazon.com use Javascript to add a Top Menu for mobile devices and they also dynamically add/remove page content for different devices.

While this looks nice, I don’t know Javascript and plus I am trying to keep things plain vanilla for now as I learn.

Amazon%20-%20iPhone%206-7Plus
Amazon%20-%20iPhone%206-7Plus982×1566 256 KB



In addition, being a purist, I would like to semantically create HTML that works on all devices and not get into creating several web pages to make various devices as I think this goes against the spirit of Responsive Web Design!!


Thanks to everyone here, I almost have all of the components I need to build a responsive Product Catalog, but this topic is my last sticking point, and so I would appreciate some guru expertise here!!

Here is the code that @coothead shared before, and which might have potential for my needs, but I am unsure…

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <title>LIB_product-catalog-v2.html</title>

  <style media="screen">
    body{
      background-color: #f9f9f9;
      font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
    }

    div#container{
      display: flex;
      flex-wrap: wrap;
      padding: 1em;
      background-color: #fff;
    }

    h1, h2{
      width: 100%;
      font-size: 1.5em;
      color: #555;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 2px;
    }

    input#hideShowMenu{
      position: absolute;
      left: -999em;             /* Move checkbox off screen */
    }

    label#menuButton{
      display: none;            /* Do NOT display for normal screens */
      padding: 0.5em 0;
      color: #fff;
      background-color: #555;
    }

    label#menuButton::before{
      content: 'Show ';           /* Display "Show menu" by default */
    }

    ul{
/*      width: 15em;  /**/
      width: 100%;          /**/
      max-width: 15em;      /* Make UL up to 15em wide */
      margin: 0;
      padding: 0;
      list-style: none;
    }

    a{
      color: #000;
    }

    #content{
      /* Make content max width less UL width */
      width: calc(100% - 15em);
    }

    hr{
      display: none;
    }

    h2{
      margin: 0;
      font-size: 1em;
      text-align: left;
      letter-spacing: 1px;
    }

    @media (max-width: 30em){
      div#container{
        flex-direction: column;     /* Force elements into column */
      }

      label#menuButton{
/*        width: 100%;        /* NEW */
        display: block;
        text-align: center;
      }

      input#hideShowMenu:checked + label#menuButton::before{
        content: 'Hide ';           /* Display "Hide menu" by default */
      }

      /* Menu unchecked (default) */
      ul{
        display: none;
/*        flex-wrap: wrap;      /**/
/*        max-width: 100%;      /**/
      }

      /* Menu checked */
      input#hideShowMenu:checked ~ ul{
        display: flex;
        flex-wrap: wrap;      /* tricky! */
        max-width: 100%;      /* tricky! */
        padding: 1em 0;
      }

      li{
        width: 50%;
      }
      
      #content{
        width: 100%;          /* Now full screen width */
      }

      input#hideShowMenu:checked ~ #content hr{
        display: block;
      }

      #content h2{
        margin: 1em 0 0 0;
      }
    }

    @media (max-width: 23em){
      li{
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <div id="container">
    <h1>page description</h1>

    <input id="hideShowMenu" name="hideShowMenu" type="checkbox">
    <label id="menuButton" for="hideShowMenu">menu</label>

    <!-- Left Menu -->
    <ul>
      <li>
        <a href="#">Activity</a>
      </li>
      <li>
        <a href="#">Art & Photography </a>
      </li>
      <li>
        <a href="#">Biography</a>
      </li>
      <li>
        <a href="#">Business</a>
      </li>
      <li>
        <a href="#">Computers</a>
      </li>
      <li>
        <a href="#">Current Affairs</a>
      </li>
      <li>
        <a href="#">Fiction</a>
      </li>
      <li>
        <a href="#">Graphic Novels</a>
      </li>
      <li>
        <a href="#">History</a>
      </li>
      <li>
        <a href="#">Kids</a>
      </li>
      <li>
        <a href="#">Literature</a>
      </li>
      <li>
        <a href="#">Music</a>
      </li>
      <li>
        <a href="#">Reference</a>
      </li>
      <li>
        <a href="#">Science & Technology</a>
      </li>
      <li>
        <a href="#">Teens</a>
      </li>
    </ul>

    <!-- Main Content -->
    <div id="content">
      <hr>

      <h2>content description</h2>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
        Curabitur sit amet sem sed libero bibendum tempus faucibus       
        quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
        nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis 
        interdum justo ac justo vehicula consequat. Curabitur et 
        volutpat nibh. Phasellus rutrum lacus at dolor placerat 
        feugiat. Morbi porta, sapien nec molestie molestie, odio 
        magna vestibulum lorem, vitae feugiat est leo sit amet 
        nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac 
        magna sed, pretium commodo odio. Sed porttitor augue velit, 
        quis placerat diam sodales ac. Curabitur vitae porta ex. 
        Praesent rutrum ex fringilla tellus tincidunt interdum. 
        Proin molestie lectus consectetur purus aliquam porttitor. 
        Fusce ac nisi ac magna scelerisque finibus a vitae sem.
      </p>

      <p>
        Donec vehicula diam non leo efficitur, id euismod odio 
        tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed 
        et libero non diam tempor sagittis. Quisque vel egestas 
        ipsum. Integer sed elit eu orci blandit commodo in in erat. 
        Donec blandit, mi at gravida varius, nulla tellus vulputate 
        ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque 
        penatibus et magnis dis parturient montes, nascetur ridiculus 
        mus. Curabitur tristique varius ullamcorper.
      </p>

      <p>
        Nam venenatis diam ante, et cursus elit porttitor at. Morbi 
        mattis leo at ex vehicula, non vestibulum ligula aliquam. 
        Maecenas non nibh sollicitudin, porttitor odio in, elementum 
        arcu. Donec pulvinar orci enim. In pulvinar congue ante, ac 
        rutrum odio bibendum volutpat. Phasellus ac sem consequat 
        lorem congue malesuada vitae vitae diam. Donec eu imperdiet 
        augue. Curabitur ullamcorper sit amet libero in ullamcorper. 
        Donec sed laoreet quam. Phasellus malesuada libero felis, non 
        elementum ex tincidunt eget. Quisque cursus arcu vel diam 
        consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
      </p>

      <p>
        In sapien massa, feugiat ut magna eu, hendrerit porttitor 
        justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam 
        facilisis, et molestie dolor blandit. Pellentesque non lectus 
        odio. Curabitur pulvinar orci vitae lorem bibendum volutpat. 
        Duis congue dignissim ante ut consequat. Sed nec sagittis 
        neque, quis vehicula urna. Fusce laoreet interdum ligula vel 
        finibus. Nunc odio purus, dapibus sit amet orci eget, congue 
        eleifend erat. Quisque porttitor imperdiet ullamcorper. 
        Aenean non orci nec magna tempor porta at id ipsum.
      </p>

      <p>
        Cras euismod euismod nibh, nec hendrerit ante efficitur id. 
        Donec sit amet interdum mauris. Maecenas pellentesque, sem a 
        commodo tincidunt, quam ex viverra nibh, non consectetur odio 
        quam et velit. Nulla eu risus quis magna suscipit malesuada 
        vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id 
        elementum nisi interdum. Integer sem quam, tincidunt nec quam 
        ac, lobortis volutpat ipsum. Curabitur nec turpis viverra, 
        eleifend arcu non, egestas felis. Etiam a eros felis. Aliquam 
        nec ullamcorper enim. Donec sit amet commodo ante, vitae 
        consectetur sem. Proin ut luctus dolor. Integer lectus massa, 
        maximus nec urna non, ullamcorper hendrerit mi. 
      </p>
    </div><!-- #content -->

  </div><!-- #container -->

</body>

</html>


And here are screenshots of his solution…

image
image1325×516 45.7 KB



image
image471×614 16.4 KB



Thanks!
2

By the way, @coothead, I am in no way disparaging your code sample - I think it is one of the coolest things done with CSS.

I’m just feeling unsure of what it takes to make a “respectable” mobile solutions without having to introduce Javascript and a boatload of complexity.

What do our HTML and CSS gurus think?

3

Perhaps give Google Analytics A/B Testing a try. Their application tests actual user responses and eliminates doubt and personal preferences.

1 Like
4

Not at a point to share things to a wider audience, mainly because this is all in dev.

Would be very interested to see what the Sitepoint gurus have to say, though! :wink:

5

I HATE to say this but, any respectable site, gonna need js, and let me tell you why in a word, accessibility.

Looks like your going down a sort of e-commerce site route, cool, awesome. BUT(and especially) since your selling to customers, your gonna want that site accessible. Google Domino’s lawsuit for more details.

And while CSS can get you MOST of the way there, to make these things accessible your going to need some aria attributes and states and the only way to update those states are via javascript. That menu is close, but if it has no js, its not accessible.

6

@bwclovis,

Most respectable sites probably also run Java, Oracle, have large IT staffs, etc. And then there are startups like I am working on…

I never said I as opposed to Javascript, but I can only learn and manage so much at one time. So simply put, Javascript is not on the table for v1.0.

That being said, if I leverage what @coothead offered me earlier with the left menu transforming and hiding itself, does that look (and work) good enough for most people?

Not being a mobile user, I have no sense of what would be clunky and what would be acceptable.

And, fwiw, the fact that I am playing around with responsive design is pretty huge in and of itself. Again, I am eager to expand my skills and build a more robust website, but that will take time. And so for now, I am trying to find what is often called a “minimally viable product”…

8

If you are just interested in opinions then I think you would get more responses on a site similar to Twitter :slight_smile:

9

3 posts were split to a new topic: Off Topic Posts

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.