Best way to create left menu?

Hello. I am working on the product catalog for my online store.

On the left side of the screen, I would like to have a menu listing different product categories. It would be maybe 1/3 of the screen width. Then to its right would be where I display the products and product descriptions.

Something like this…

https://www.barnesandnoble.com/s/UX/_/N-8q8?_requestid=205779

It would be nice if it was also responsive, although I’m thinking that would require some advanced skills.

What would be the best way to design this so it is somewhat flexible and enough to last me until I can make my website responsive in v2.0?

If I was doing this from scratch, I guess I would create a DIV and give it some set width and maybe float it to the left. Then for then main pane where the products are at, I would create another DIV and make it an adjustable width so it would expand/shrink with different width screens.

While new categories might be added to the menu, I don’t see the width of it needing to change. The pane to the right would need to be more flexible.

Oh, also, I think the left menu needs to be a column that goes from top to bottom, and not just some box that is floated to the upper left-hand corner of the screen. In other words, nothing should be able to wrap underneath it.

Some tips on where to begin with this would be appreciated. Thanks!

Why not show us the code you have for the rest of the page? It might help people understand the context.

1 Like

Try this:

https://duckduckgo.com/?q=html+two+column+responsive&t=fpas&ia=web

I don’t have any code yet because I’m not sure where to start.

All I have is a sketch on a piece of paper of what I want things to look like - that part I know.

But if I knew how to code this I wouldn’t be here asking for help… :wink:

@Coothead showed me how to use Flexbox, but I think with that if the screen gets narrow then the right side would pop under the left side, right?

Hi there UpstateLeafPeeper,

have a play-a-round with this example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS responsive menu</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

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

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

h2 {
    font-size: 1em;
    text-align: left;
    letter-spacing: 1px;
 }
   
#hideShowMenu {
    position: absolute;
    left: -999em;
 }

#menuButton {
    display:none;
    padding: 0.5em 0;
    background-color: #555;
    color: #fff;
 }

#menuButton::before {
    content: 'Show ';
 }

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

ul {
    width: 100%;
    max-width: 15em;
    padding:0;
    margin: 0;
    list-style: none;
}

a {
    color: #000;
 }

#content {
    width: calc( 100% - 15em );
 }

hr {
    display: none;
 }

@media ( max-width: 30em ) {
#menuButton {
    display:block;
    text-align:center;
 }

#hideShowMenu:checked + #menuButton:before {
		content: 'Hide ';
	}

#hideShowMenu:checked ~  ul {
    display:flex;
    padding: 1em 0;
 }

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

#container {
    flex-direction: column;
  }

#content {
   width:100%;
  }

ul {
    display: none;
    flex-wrap: wrap;
    max-width: 100%;
  }
li {
    width:50%;
  }
 }

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

</head>
<body> 

<div id="container">

<h1>page description</h1>

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

 <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>

<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>
<!-- #content --></div>

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

</body>
</html>

coothead

1 Like

@coothead,

You are a god among HTML/CSS coders!! :+1:

That is a lot of code - I am sifting through it now, and am sure to have lots of questions.

In the mean time, I do have these questions…

1.) It looks like the more modern approach is to use Flexbox for most things, right?

2.) Is Float dead, or is it still acceptable to use? In the search link that @John_Betong posted, I saw some solutions to use using Floats.

3.) Is it semantically okay to use unordered lists for layout as you often do? (Or is that considered bad like using HTML tables for layout?)

More questions to follow… :wink:

  1. It appears to be going that way. :winky:
  2. No, it’s use depends on the circumstances. :winky:
  3. The list element ordered or unordered is semantically
    correct for a collection of a elements . I don’t see them
    as a collection though, I see them as a list. :winky:

coothead

Some more questions…

4.) This moves the menu off of the screen on a regularly sized window?

#hideShowMenu {
    position: absolute;
    left: -999em;
 }

5.) Why are you using a checkbox form control here? (Btw, I think this needed the “name” attribute?)

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

6.) Why is this set to display: none? Is it to hide the control for a regular screen?

#menuButton {
    display:none;
    padding: 0.5em 0;
    background-color: #555;
    color: #fff;
 }

If so, you really don’t need that other formatting in there, right?


7.) What does this do? (No clue…)

#menuButton::before {
    content: 'Show ';
 }

8.) The first two attributes seem to contradict one another?! What is this doing?

ul {
    width: 100%;
    max-width: 15em;
    padding:0;
    margin: 0;
    list-style: none;
}

9.) Is there any downside to using calc( )? Is it well supported?

#content {
    width: calc( 100% - 15em );
 }

It seems to me that in the past this was handled a different way, but I don’t recall the code. :wonky:


10.) What is the purpose of using an < hr > especially if it is hidden?

hr {
    display: none;
 }

That is a start for my questions! :biggrin:

  1. No, it moves <input id="hideShowMenu" type="checkbox"> off
    the screen - ( reduced or full ) - permanently.
  2. It does the magic of showing - ( checked ) - and hiding - ( unchecked ) -
    the unordered list element
  3. Yes to the first part and no, wrong the second part.
  4. The label text needs to be “Show menu” when the input element is
    unchecked - ( the initial state ) - and “Hide menu” when checked.
    The label already has “menu” set in the HTML. Checking and
    unchecking the the input element swaps the word that appears
    before it.
  5. The ul 's max-width value is there for screen widths between 30em
    and full width. Below 30em the ul’s width becomes 100%.
  6. You must be the judge of that ~ https://caniuse.com/#search=calc()
    I tested the code successfully in IE11, Firefox 70.0 and Chrome 78.0.
  7. It indicates the beginning of the h2 section of the document. It has
    it’s value changed to block in the @media code. I did that purely for
    aesthetic reasons.

coothead

@coothead,

Have been playing around with your code and think I have most of it figured out.

Wow! I’ve never seen dynamic CSS like this before?! It almost feels like JavaScript! :biggrin:

Otherwise you’d see the checkbox, right?

These UL’s are the trickiest to understand, but I think I get them now.

What is the tilde (~) called in CSS and what does it do? (I see how it works, but can’t find it in the MDN Reference Manual.

Right.

MDN - General sibling combinator

coothead

1 Like

Technically, you could hide the checkbox beneath the label and it would work the same, right?

(@DaveMaxwell showed me how to turn option buttns into clickable boxes and that’s what he did.)

By the way, as long as you have a label and an input control matched up, you can click on the label and it will behave like the control, right? And that is why we could hide the checkbox off screen and it still worked, right?

Thanks!

What reason, if any, did @DaveMaxwell give you
for positioning it under the label element rather than
simply moving the little bugger off stage?

coothead

@coothead,

I suppose because it was 3 radio buttons maybe it made less sense.

Here is what he did… (Very cool code!!) :+1:

https://codepen.io/davemaxwell/pen/wvvdgGJ

Hi there UpstateLeafPeeper,

personally, I still believe that left: -999em is the way to go. :winky:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>book prices</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

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

#books {
     display: flex;
     flex-wrap: wrap;
     padding: 0;
     margin: 1.5em 0 0;
     list-style: none;
 }

#books li {
     width: 8em;
     margin:0.5em;
 }

#books input {
    position: absolute;
    left: -999em;
 }

#books label {
    display: block;
    padding: 0.5em 0;
    border: 1px solid #ccc; 
    background: #fff;
    cursor: pointer;
    text-align: center;
 }

#books label:active,
#books label:focus,
#books label:hover {
     background: #ddd;
 }

#books input:checked + label {
    border: 1px solid red; 
    font-weight: bold;
}
</style>

</head>
<body> 

 <ul id="books">
  <li>
  <input type="radio" id="Print" name="bookType">
  <label for="Print">Print<br>12</label>
 </li>
 <li>
  <input type="radio" id="eBook" name="bookType">
  <label for="eBook">eBook<br>$10</label>
 </li>
 <li>
  <input type="radio" id="both" name="bookType" checked="checked">
  <label for="both">Print/eBook<br>$20</label>
 </li>
</ul>

</body>
</html>

coothead

1 Like

Well, now I know two ways to accomplish the same thing! :smiley:

Hi there UpstateLeafPeeper,

I’d still like to know why Dave positioned
the radio buttons over the labels with…

    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity:0.011;
    z-index:100;

It all seems rather odd to me. :shifty:

coothead

@DaveMaxwell,

So why did you do it that way, Dave? :biggrin:

I told you in that other thread that I had bookmarked the markup and modified it to meet your needs, but I would guess that it is set that way to “fit” the entire li element and make it more usable.

Yup, taking that out caused the “buttons” to shrink (Again, taking out the top/bottom/left/right would have shown what it does… :stuck_out_tongue_winking_eye:)

Either way works, so choose what you like.