HTML・CSS Writing 2022

Create a menu with a fixed length on one side

Learn how to create a fixed-length menu on one side. In HTML5 and CSS3, it is now possible to calculate the window width, so we will use this. Menus are represented using the ul tag in a fixed-length sidebar.

Creating a menu with a fixed length on one side

Let's create a menu with a fixed length on one side. The width of the menu is fixed at 200px and is placed on the right side. The content on the left will grow automatically. In consideration of the case of considering SEO measures, write the content first and write the menu after that.

The point is to calculate the window width using calc. Using "display: flex" is easy because you don't have to use techniques such as clear fix. It is drawn correctly in IE11.

This is a sample that makes one side a fixed length menu.

<style>
  .sidefix_menu {
    display: flex;
  }
  .sidefix_menu ul {
    width: 200px;
    background: #afa
  }
  .sidefix_menu_main {
    width: calc (100%--200px);
    background: #faf;
  }
</style>

<div class = "sidefix_menu">
  <div class = "sidefix_menu_main">
    content
  </div>
  <ul>
    <li> Curry </li>
    <li> apples </li>
    <li> Yakiniku </li>
  </ul>
</div>

How can I swap the left and right sides of the menu?

To switch the left and right of the menu, just specify "flex-flow: row-reverse;" under the part where "display: flex" is specified.

Considering the case where SEO measures are also considered, even if the menu comes to the left side, write the content first and write the menu after that. The content of the page is far more important for SEO than the menu.

This is a sample that swaps the left and right of the menu.

<style>
  .sidefix_menu_reverse {
    display: flex;
    flex-flow: row-reverse;
  }
  .sidefix_menu_reverse ul {
    width: 200px;
    background: #afa
  }
  .sidefix_menu__reverse_main {
    width: calc (100%--200px);
    background: #faf;
  }
</style>

<div class = "sidefix_menu_reverse">
  <div class = "sidefix_menu__reverse_main">
    content
  </div>
  <ul>
    <li> Curry </li>
    <li> apples </li>
    <li> Yakiniku </li>
  </ul>
</div>