I would like to know how you create responsive menus, what is the best structure in your opinion both pro html and pro css , and whether or not they use javascript .
can be either a user's own menu when logged in, or a menu for sites without a login
: Grateful D
* I think a lot of people when they start in this part have the same doubt.
I believe this, as might be expected, will depend a lot on your site. His proposal, the design in general, the code, which frameworks you use, among others.
You can make a very simple, clean, responsive menu with just html and css. Of course, in this case you would definitely use a Media Wanted and set breakpoints for mobile support. The most famous breakpoints are those present in this image:
Inthiswayyouadaptthemenu,andtherestofthesite,withouttheneedtocreatenewlayouts,nortousejavascriptforthispurpose.
Here'sasimpleexampleofthisuse:
* {
margin: 0;
padding: 0;
border: 0;
font-family: sans-serif;
box-sizing: border-box;
}
body {
font-size: 0;
background-size: 300px 300px;
height: auto;
}
.topBar {
width: 100%;
height: 100px;
background: #fff;
-webkit-box-shadow: 5px -2px 5px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px -2px 5px 2px rgba(0, 0, 0, 0.5);
box-shadow: 5px -2px 5px 2px rgba(0, 0, 0, 0.5);
z-index: 100;
}
.topBar .content {
width: 80%;
max-width: 1200px;
height: calc(100% - 8px);
background: #fff;
background-size: auto 8px;
margin: auto;
vertical-align: middle;
display: -moz-flex;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
}
.topBar .content .logo {
width: 60px;
height: 60px;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png') no-repeat;
background-size: 60px 60px;
}
.topBar .content .menu ul {
display: block;
}
.topBar .content .menu ul li {
display: inline-block;
list-style: none;
font-size: 12pt;
margin: 0 10px;
padding: 0 10px;
cursor: pointer;
height: 50px;
width: auto;
line-height: 50px;
-webkit-transition: border 0.1s ease;
-moz-transition: border 0.1s ease;
transition: border 0.1s ease;
vertical-align: middle;
}
.topBar .content .menu .menu-icon {
display: none;
cursor: pointer;
height: 100%;
padding-top: 9px;
}
.topBar .content .menu .menu-icon span {
display: block;
width: 30px;
height: 3px;
background: #506967;
margin: 2px 0;
}
.topBar .content .menu input {
visibility: hidden;
}
.topBar .content .menu ul {
top: 0;
margin-top: -10px;
padding-top: 0;
}
.topBar .content .menu label {
display: block;
width: auto;
height: auto;
}
.topBar .content .menu ul li:hover {
border-bottom: solid 3px #008c83;
}
@media screen and (max-width: 768px) {
.topBar .content {
position: relative;
}
.topBar .content .menu ul {
width: 100%;
background: #fff;
position: absolute;
top: 100%;
height: 0;
right: 0;
z-index: 100;
overflow: hidden;
padding-bottom: 10px;
-webkit-transition: height 0.2s ease;
-moz-transition: height 0.2s ease;
-o-transition: height 0.2s ease;
transition: height 0.2s ease;
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
-moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
.topBar .content .menu ul li {
display: block;
padding: 0 15px 15px 15px;
margin-top: 15px;
text-align: right;
}
.topBar .content .menu .menu-icon {
display: block;
}
.topBar .content .menu input:checked + ul {
display: block;
height: 270px;
-webkit-box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.3);
}
}<div class="topBar">
<div class="content">
<a href="/">
<div class="logo"></div>
</a>
<nav class="menu">
<label for="menu-check">
<div class="menu-icon">
<span class="menu-icon-line"></span>
<br>
<span class="menu-icon-line"></span>
<br>
<span class="menu-icon-line"></span>
</div>
</label>
<input type="checkbox" id="menu-check">
<ul>
<li>Assuntos</li>
<li>Tutoriais</li>
<li>Contato</li>
<li>Sobre</li>
</ul>
</nav>
</div>
</div>Click the entire page and change the size of your window.
In the example, I use breakpoint:
@media screen and (max-width: 768px) { ...
From there the menu becomes retractable. A very common but functional technique.
By analyzing the code above, you can see the use of display: flex . Just curious, this link , you you can see a complete guide to using it.
The other possibilities are very subjective, especially regarding the implementation of javascript. You can use it for effects and transitions with JQuery, or to add functions in the click of the menu icon, or for a simple clickout function for the menu to disappear, as you can see this question .
I'll leave this link , with several examples of responsive menus , there you have access to the link of each one of them. It's good to "get inspired."
I hope I have helped.