Dropdown menu hiding list depending on screen size

Question

I managed to do with the Jquery show and hide the menu as I click the button, but I would like the menu to be hidden already if the screen was less than or equal to 768 pixels.

Could someone give me a tip on 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>
<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>

Answer 1

your jquery Cod would be something like this

if($( window ).height()<=768){
   $('nav').hide();
}

put that inside an on Ready Ocument and it was already ^^