Menu retrátil com JS

[victor2dm 2]

Olá, estou precisando fazer um menu retrátil, que saia do lado direito para o esquerdo.

 

 

Eu não sei absolutamente nada de JS, mas quero botar esse site pra funcionar, pois estou treinando design responsivo.

Bom, a interface do menu depois de aberto, acredito que seja formatando com css, dai em diante eu me viro.

 

Alguem pode ajudar?

 

OBS: Este menu só funcionará até 769px de largura, depois volta o normal.

[André do Vale 76]

Ao invés de JS, use apenas CSS para isto. Que tal o ícone ali de navegação ser um input[type=checkbox]? Você o estiliza para ficar igual ao ícone desejado. Quando ele for clicado, o input será :checked, e então você poderá mostrar o menu na sequência.

 

Ex. rápido:

.menu ul { display: none }
.menu input:checked ~ .ul { display: block }

Há diversas outras formas de fazer isso apenas com CSS, e sem necessidade de JS. Dê uma pequisada.

[victor2dm 2]

Fiz o que disse, mas quando faço o checkbox, a lista não aparece. (Não formatei nada de interface ainda, mas era para aparecer pelo menos a lista, né)

[Natan S. 6]

Tenta assim:

 

http://codepen.io/alvesnatan/pen/LVeeBL

[victor2dm 2]

Tá dificil ..

nada feito.

[angelorubin 142]

Como esta tentando fazer? Mostre-nos.

[victor2dm 2]

<div class="container">
    <div class="header-banner-container">
    <header id="cabecalho">
        <span>
            <img src="imagens/logo2.png">
        </span>
        <nav class="menu>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="index.html">QUEM SOU</a></li>
                <li><a href="index.html">SERVIÇOS</a></li>
                <li><a href="index.html">CONTATO</a></li>
                <li><a href="index.html"><img src="imagens/glyphicons-443-earphone.png">XX-XX-XXXX-XXXX</a></li>
            </ul>
        </nav>
    </header>
    </div>
</div>

Essa é a estrutura do header e tals.

Mesmo tirando tudo isso e colocando o que o learne fez, não rodou.

 

 

CSS:

@media screen and (max-width: 320px) {
  .container {
    max-width: 320px;
    margin: 0 auto;
  }

  .bloco {
    height: 100%;
    width: 100%;
  }

  .header-banner-container {
    width: 100%;
    height: 100%;
    background-image: url(../imagens/desk-work-office.jpg);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
  }

  header#cabecalho {
    width: 100%;
    height: 45px;
    background: #ffffff;
    padding: 10px 3px 5px 3px;
  }

  header#cabecalho span img {
    @include column(3);
    float: left;
  }

  .wrap {
    width: 100%;
    margin: 0;
  }

  .menu {
    height: 100%;
    width: 220px;
    margin-right: -220px;
    background-color: #ffffff;
    position: fixed;
    top: 45px;
    right: 0;
  }

nav.menu li a{
  margin-left: 10px;
  display: block;
  font-size: 1.2em;
  padding: 10px 0 10px 0;
  text-decoration: none;
  color: #444444;
  font-family: 'openbold', sans-serif;
}


  nav.menu li a img {
    height: 16px;
    padding-right: 8px;
  }

  nav.menu li:hover {
    background-color: #cc5555;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }

  nav.menu li a:hover {
    color: white;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }

[angelorubin 142]

Veja se este plugin ajuda - http://www.jqueryscript.net/menu/Super-Simple-jQuery-Sidebar-Sliding-Menu-Plugin-Slidx.html

Exemplo aqui - http://codepen.io/angelorubin/pen/eNVzvr

[victor2dm 2]

Olá, Angelo.

Funcionou bem até, mas no Firefox não, quando eu atualizo a página, o menu aparece e some com animação. Quando clico no botão, nao aparece mais.

 

 

Sugestões? Ah, e tem alguma forma de afastar o menu to topo da tela?

[angelorubin 142]

Seria isso? http://codepen.io/angelorubin/pen/eNVzvr