cross-posted from: https://lemmy.world/post/2566953

Hi, I’m an old webdev who is rusty in CSS; I learn about calc() recently and never really learnt display: flex properly.

I made some webs with a responsive menu layout (relevant CSS code posted on bottom). I tried using flex but I still had to do one ugly hack: I have the menu heights for the different resolutions hardcoded and I have to update them manually every time a new chapter is added. It’s not a big deal, but I would like to know if there is a proper way to do this.

Some alternatives I’ve thought about:

  • The new round(), but it’s too new and not supported by most browsers.
  • JavaScript

… but I feel like there must be a clean CSS-only way to achieve this.

Thanks!

Relevant CSS code (link to full stylesheet in case I missed something).

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 624px; /* =27x23+3 | 23 = 91/4 */
  margin: 0;
  padding: 16px 16px 4px 16px;
  vertical-align: top;
}
@media screen and (max-width: 1000px) {
  ul {
    height: 840px; /* =27x31+3 | 31 = 91/3 */
  }
}
@media screen and (max-width: 582px) {
  ul {
    height: 1245px; /* =27x46+3 | 46 = 91/2 */
  }
}
@media screen and (max-width: 400px) {
  ul {
    height: auto;
  }
}
  ul li {
    list-style-type: none;
    margin: 2px 16px 2px 4px;
    font-size: 120%;
  }
  ul li a {
    display: inline-block;
    background-color: #3fa79e;
    color: #d2e7e2;
    text-decoration: none;
    padding: 2px 8px;
    border: solid 1px #d2e7e2;
  }
    ul li a:first-child {
      width: 106px;
      margin-right: -3px;
    }
    ul li a:hover {
      background-color: #144c48;
      color: #fff;
      border: solid 1px #fff;
    }
  • Crul@lemmy.worldOP
    link
    fedilink
    English
    arrow-up
    1
    ·
    edit-2
    1 year ago

    Can you describe how you want the menu to behave?

    I want it to behave exactly how it’s behaving now. Trying to explain it with words is much harder :/.

    I do think it’s very doable in pure CSS without any magic numbers.

    I agree, I would be very surprised if that’s not the case.

    you should try using display:grid instead of flex. It gives you much more control over that kind of layout

    I didn’t even know display: grid exists… I’m really outdated. I will give it a try!

    why set the height to 10,000px?

    Yeah, that’s really weird. It’s been a long time since I started this and I don’t remember. As the comment says, it’s later reset on JS:

    $(‘html, body’).css(‘min-height’, 0);

    I think it was related to some weird case when you reload the page ant the content being slow to render (because the KaTeX formulas). But I removed the code and tried to replicate any unwanted behavior and I wasn’t able. So it’s probably dead code.

    if the menu links just take you to anchors lower down on the page, consider using the :target pseudo-class so that only the selected one is shown, the rest can be display:none.

    I didn’t know about :target either, thanks for the tip. I just took a quick look at the documentation and, from what I see on the demos, it seems that only one chapter could be open at once, but I want to allow to open multiple chapters. Is that possible with :target?

    Thank you very much for the suggestions!