I'm new to the front end and would like to know how I can write the menu once and reuse on the other pages? I have read some posts but could not implement it in my code.
Example; I have a menu of the main page and I want to reuse on all the other pages of that same site.
Use the concept of oocss , which is nothing more than to create modularized css snippets, for example: link
.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 is a very simple example, but it demonstrates a component that you can include 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 this button, but without harming others, obviously when using this approach, you never override the main classes if you do not commit all your work .
I have read some excellent books on this subject, and about css class nomenclatures that facilitate this modularized css approach: