I was able to make the Jquery
show and hide the menu as I click the button, but I would like the menu to be hidden if the screen was less than or equal to 768 pixels.
Could anyone give me a hint how to do this?
Thank you.
head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><scripttype="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>