How to reuse HTML menus on other pages

Question

I am new to the front-end and I would like to know how I can write once the menu and reuse in other pages? I’ve read some posts but could not implement in my code.

Example; I have a menu of the main page and I want to reuse in all other pages of the same site.

Answer 1

Use the concept of oocss, that is nothing more than creating snippets of modularized css, for example: https://jsfiddle.net/Lav1xpha/

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ccc;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 5px;
}

    .button:focus, 
    .button:active,
    .button:hover {
      outline: 0;
      color: #fff;

}

.button-danger {
  background-color: #e74c3c;
  color: #fff;
}

.button-danger:hover {
  background-color: #c0392b;
}

Here was created a very simple example, but it demonstrates a component that you can include it in several pages as many times as you want. and if you need to create a custom button, just create a new class that overrides the appearance of that button, but without harming others, obviously, when using this approach, you never override the main classes, if it doesn’t compromise all your work.

I should read some excellent books on this subject, and regarding css class nomenclatures that facilitate this modularized css approach:

WELL - Article, other article.
SMACSS - Article.
ITCSS - Slide.