I'm setting up a responsive menu. It uses jquery only to insert and remove a class from the div with id="social-menu-items" which causes the menu to disappear and appear.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu horizontal com links sociais</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.2.1.js"integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style media="screen">
.menu-social {
background-color: #eee;
}
.menu-social ul{
padding: 0;
}
.menu-social .menu-itens{
display: none;
}
.menu-social .menu-itens-open{
display: block;
}
.menu-social .social-itens li{
display: inline-block;
}
.menu-social .menu-itens ul{
width: 100%;
}
.menu-social .menu-itens li{
display: inline-block;
align-items: center;
width: 100%;
text-align: center;
}
.menu-social .menu-itens li a{
display: inline-block;
width: 100%;
}
.menu-social .menu-itens li a:hover{
background-color: #ddd;
}
.menu-social ul{
display: inline-block;
}
.menu-social button{
float: right;
}
@media screen and (min-width: 992px) {
/* ... */
}
</style>
</head>
<body>
<header>
<div class="menu-social container">
<div class="social-itens">
<ul>
<li><a href="#">Social 1</a></li>
<li><a href="#">Social 2</a></li>
<li><a href="#">Social 3</a></li>
</ul>
<button id="button-social-menu" type="button" name="button">Botão</button>
</div>
<div id="social-menu-itens" class="menu-itens">
<nav>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</nav>
</div>
</div>
</header>
<script type="text/javascript">
var open = false;
$('#button-social-menu').click(function(){
if (!open) {
open = true;
$('#social-menu-itens').addClass('menu-itens-open');
} else {
open = false;
$('#social-menu-itens').removeClass('menu-itens-open');
}
});
</script>
</body>
</html>
But it is very "dry". I wish he had an animation like the link when it is on small screens and you click on the 'button'.
Does anyone have any tips? Thank you in advance!