Consegui fazer com o Jquery
exibir e esconder o menu conforme clico no botão, mas gostaria que o menu já ficasse escondido caso a tela fosse menor ou igual a 768 pixels.
Alguém poderia me dar uma dica de como fazer isso?
Obrigado.
head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
$('nav').slideToggle();
})
})
</script>
<style type="text/css">
button{
position: absolute;
right: 10px;
top: 10px;
padding: 10px;
}
nav ul{
list-style: none;
}
nav ul a{
text-transform: none;
text-decoration: none;
}
nav ul a li{
display: inline-block;
}
</style>
body:
<button></button>
<nav>
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
<a href="#"><li>Contact</li></a>
</ul>
</nav>