Alternate between menu item and list depending on responsive state

Question

I have a website that uses responsive CSS. Depending on the responsive state, I want to change the menu:

The site is displayed on a wide screen, thus I have a two column design. In this mode I can make use of the complete height of the screen, so I can have a list of categories and tags under a headline, which takes quite some space.
The site is displayed on a less wide screen, which stacks everything into one column. In this mode I want to add a link to category and tag overview to the menu rather than keeping the longish list of tags and categories.

My recent approach is to use two CSS classes, horizontal and vertical:

@media (min-width: 801px) {
  .vertical { display: none; }
}
@media (max-width: 800px) {
  .horizontal { display: none; }
}

These classes are used to decorate the two menu items for category and tag overview as well as the category and tag lists below the menu.

[EDIT]: To simplify the code, I only put the category, tags are equivalent. I fear I have missent some readers (sorry!), so I added more code to clearly show the difference between the two options.

<head>
  ...
  <meta name="viewport" content="width=device-width, initial-scale=1">
  ...
</head>
...
<aside>
  <nav class="nav">
    <ul class="list-bare">
      {% for title, link in MENUITEMS %}
        <li><a class="nav__link" href="{{ link }}">{{ title }}</a></li>
      {% endfor %}
      <li class="vertical"><a class="nav__link" href="/categories.html">Categories</a></li>
    </ul>
  </nav>
  <h2 class="horizontal">Categories</h2>
  <ul class="navbar horizontal">
    {% for cat, null in categories %}
      <li{% if cat == category %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
    {% endfor %}
  </ul>
</aside>

This actually works. But I'm wondering if this is state of the CSS art. Or is there another mechanism to do those alternating things?

I think this solution is great, except I would put both of those @media files in a single file and would call it responsive.css. All the responsive styles go inside this css. If it was me, I would not use 800px as media size, instead I would use sizes which comply with bootstrap grid system: https://getbootstrap.com/docs/4.0/layout/grid/ you can see: https://stackoverflow.com/questions/49419074/how-can-i-change-the-height-of-an-iframe-for-different-screen-sizes/49419333#49419333 — Hooman Bahreini, Mar 31 '18 at 22:06

David Taiaroa · Accepted Answer · 2018-04-04T19:23:01.433

1

If I understand your post correctly, you were considering duplicating your menu and hiding one version or the other depending on the viewport or screen width.

While this could work, there's a cleaner solution that would be easier to maintain.

Please check out this suggestion: https://codepen.io/panchroma/pen/eMKGKw

As you'll see there's just the one menu and I'm manipulating the width of the menu list items with a simple media query.

HTML

<ul>  
  <li><a class="nav__link" href="/categories.html">Categories</a></li>
  <li><a class="nav__link" href="/tags.html">Tags</a></li>
</ul>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
    width:100%;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}

@media (min-width: 801px) {

  li {
    width:50%;
  }
}

plus a viewport meta tag in the head of the doc

<head>  
...  
<meta name="viewport" content="width=device-width, initial-scale=1">  
...  
</head>

Update

Here's a variation which I think accomplishes what you need to do: https://codepen.io/panchroma/pen/VXGPEM

Code is very similar, with nested lists for your tag cloud and category list and some media queries to manage their display:

Good luck!

edited Apr 04 '18 at 19:23

answered Apr 02 '18 at 23:56

David Taiaroa

25,157
7
62
50

Thanks for this suggestion. But If I get it correctly, you are manipulating "only" the menu. My "problem" is that I need to hide the tag cloud and the category list when switching from wide to small mode. This can't be done with your suggestion, right. However, thanks for your answer. – PVitt Apr 03 '18 at 06:38
Thanks @PVitt . I'm not clear on the details of your tag cloud and category list, could you please add some of these to the code you've posted so I can get a clearer picture of your HTML? – David Taiaroa Apr 03 '18 at 10:49
I changed to code above. Sorry again for not putting in all details needed to get a clear picture of the problem at hand. – PVitt Apr 03 '18 at 12:12
Thank you David for the update. But is very similar to my suggestion, right? The difference is that overview link and lists are sibblings. Or did I miss something? – PVitt Apr 04 '18 at 20:09
... maybe I misread your code! I was thinking you had two menus and I was trying to clean that up by combining everything into the one menu. – David Taiaroa Apr 04 '18 at 21:20
Ah, ok. Right now I do have a tag cloud below the menu and want to reduce the tag cloud into a menu item on small screens. However, your solution is pretty similar to mine, so I guess that this is not the worst solution :) – PVitt Apr 05 '18 at 08:07

Alternate between menu item and list depending on responsive state

1 Answers1