0
Good evening guys, I’m new to programming and I’m trying to put on my web page an open and close menu button. I apologize if it’s repeated, because I couldn’t find one that looked like mine, so I posed that question. The arch used for the button is an image.
The following is happening on my website:
This screen above is the button when I am in the responsive mode of my page
When I click on the button it appears the menu, but does not change the close button.
This is the screen that appears when I click the button, it had to change the button to:
After clicking the close button, it would have to go back to the first screen.
The open and close button is a single file that is changed to position through the background-position
follow the file image.
Below is my html, css and Javascript code made so far:
HTML structure of the button:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/estilo.css">
</head>
<body>
<div class="interface">
<header class="cabecalho">
<nav class="menu-principal">
<button class="menu-principal__btn menu-principal--fechado" onclick="clicar()">Abrir menu</button>
<ul class="menu-principal__lista">
<li><a class="menu-principal__item" href="index.html">Quem sou eu</a></li>
<li><a class="menu-principal__item" href="empresas.html">Experiência Profissional</a></li>
<li><a class="menu-principal__item" href="historico-formacao.html">Histórico & Formação</a></li>
<li><a class="menu-principal__item" href="especializacoes.html">Especializações</a></li>
<li><a class="menu-principal__item" href="idiomas-certificacoes.html">Idiomas & Certificações</a></li>
</ul>
</nav>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Follow the CSS button
.menu-principal{
margin: 0;
}
.menu-principal__lista{
transition: margin 200ms ease-out;
}
.menu-principal__item{
transition: all 200ms ease-out;
height: 20px;
}
.menu-principal__btn{
display: block;
width: 50px;
height: 50px;
text-indent: -9999px;
background-image: url('../img/menuprincipal-btn-bg.png');
background-repeat: no-repeat;
background-position: -48px 7px;
background-color: whitesmoke;
border-color: rgb(35, 65, 145);
border-style: solid;
border-radius: 5px;
cursor: pointer;
position: absolute;
top: 15px;
right: 15px;
}
li{
text-decoration: none;
list-style: none;
font-weight: bold;
padding: 5px;
padding-bottom: 5px;
font-size: 18px;
}
@media (max-width: 767px){
.menu-principal__btn{
background-position: 5px 5px;
}
.menu-principal--fechado{
background-position: -48px 7px;
}
.menu-principal__lista{
margin: 0;
}
.menu-principal__item{
margin: 0;
height: 0;
display: none;
}
}
Follow the Javascript code - I used jQuery - I don’t know much about jQuery, how I couldn’t make it work, so I wrapped the content inside a function and called this function in the HTML button.
function clicar(){
$( ".menu-principal__item").toggle(function() {
$(".menu-principal--fechado").show();
$(".menu-principal--btn").show();
}, function() {
$(".menu-principal__btn").show();
});
}
If anyone can help me in what I’m missing.
ola Fabricio, if it is to study css is good, but if it is not that pq not use something ready that already does it and is well used in the market? can not use
bootstrapwho already does that?– Ricardo Pontual
Good Ricardo. Good morning. I had not thought and nor knowledge that in bootstrap it was possible to do this. Have some tutorial how to do?
– Fabricio Rezende
in the bootstrap website has it all, see examples of navbar and try to increase/reduce the size of the browser
– Ricardo Pontual
Good evening Ricardo, I managed to solve using the bootstrap. Thank you so much for your help.
– Fabricio Rezende
Have you ever experienced anything like bootstrap? If you see on the page, in responsive mode, this is solved for you.
– Ivan Ferrer