0

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>

1 Resposta 1

1

seu cod jquery seria algo assim

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

poe isso dentro de um on document ready e ja era ^^

1
  • esse código realmente funciona se a página for carregada inicialmente com a resolução que eu quero que não mostre o nav, mas descobri que apenas adicionando o css abaixo já resolveu! Mesmo assim, muito obrigado! @media (max-width: 768px){ nav{ display: none; } } Commented 10/11/2016 às 15:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .