Dropdown menu hiding list depending on screen size

0

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>
    
asked by anonymous 17.10.2016 / 20:34

1 answer

1

your jquery cod would be something like

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

24.10.2016 / 22:10