3

Como neste site por exemplo: Depois dos quinze. Assim como na foto, eu quero que venha o logo e a partir de certa rolagem, apareça o 'novo' menu, junto com a foto. Eu não sei como colocar a foto somente nessa rolagem. Eu teria que criar dois menus? Um com a foto e um sem?

<div class="conteudo-menu">
    <div class="menu">
        <ul>
            <li><a href="http://seu-link">Início</a></li>
            <li><a href="http://seu-link">Sobre</a></li>
            <li><a href="http://seu-link">Contato</a></li>
            <li><a href="http://seu-link">Anuncie</a></li>
            <li><a href="http://seu-link">Parceria</a></li>
        </ul>
        <div class="clear"></div>
    </div>
</div>



.conteudo-menu { background: #ededed; font-family: Arial, Helvetica, sans-    serif; font-size: 14px; border-bottom: 2px solid #ccc;border-top: 2px solid #ccc;}
.menu-fixo { z-index: 9999; position: fixed; top: 0; width: 880px; height: 37px;}
.menu { height: 60px;}
.menu ul { list-style: none; margin: -9px; }
.menu ul li {float: left; margin-top: 6px; padding: 6px;}
.menu ul li:first-child { padding-left: 228px;}
.menu ul li a { color: #666; text-decoration: blink;}
.menu ul li a:hover { color: #777; text-decoration: underline;}

<script type='text/javascript'>
jQuery("document").ready(function($) {
    var nav = $('.conteudo-menu');
    $(window).scroll(function() {
        if ($(this).scrollTop() > 500) {
            nav.addClass("menu-fixo");
        } else {
            nav.removeClass("menu-fixo");
        }
    });
});
</script>

inserir a descrição da imagem aqui

3
  • 1
    O teu código funciona (jsfiddle.net/0u3evL1r) podes explicar melhor o que te falta?
    – Sergio
    17/01/2016 às 9:34
  • coloquei um print... @Sergio 17/01/2016 às 10:04
  • Você pode usar CSS para incluir uma imagem na classe menu-fixo, dessa forma, quando ele aparecer a imagem vai aparecer também. 17/01/2016 às 14:31

1 Resposta 1

2

No site que deixou como exemplo, ele poderiam ou não ter feito 2 menus, geralmente, não, isso não acontece, o que acontece é uma mudança de classe, como em seu código. Nele não irá ser diferente, um que mudará será a class:

O que fiz foi criar uma div e adicionar a ela, uma img com sua logo exemplo:

<div class="logo-menu" >
   <img src="https://i.imgsafe.org/30c0a6d.jpg" alt="logo" style="height: 37px; width: 80px;" >
</div>

E insere a sua ul em uma outra div, pois a interação entre listas, divs e outors elementos pode, posteriormete, gerar problemas. Ficou assim:

<div class="lista-menu">
  <ul>
    <li><a href="http://seu-link">Início</a></li>
    <li><a href="http://seu-link">Sobre</a></li>
    <li><a href="http://seu-link">Contato</a></li>
    <li><a href="http://seu-link">Anuncie</a></li>
    <li><a href="http://seu-link">Parceria</a></li>
  </ul>
</div>

No HTML, foi apenas isso...

A ideia principal

Você possui uma imagem, uma logo, de padrão, escondida:

.menu .logo-menu{
   display: none;
}

Mas no momento que ela pertencer a outra classe (no caso menu-fixo), esta poderá ser visualizada:

.menu-fixo .menu .logo-menu{
   display: inline-block; /* Algum display que possibilite a visualização */
}

O papel de mudar a class é so script. Porém que fique claro que as mudanças nas class serão as necessárias para que todo os resto se adeque a imagem que irá aparecer, é o que irei fazer abaixo.

Arrumando...

Já no css, a fiz algumas mudanças sendo todas dependendo da class que muda em seu script, a class "menu-fixo":

.menu-fixo {
  z-index: 9999;
  position: fixed;
  top: 0;
  width: 880px;
  height: 37px;
}

.menu-fixo .menu {
  height: 37px;
}

.menu-fixo .menu ul {
  height: 37px;
  line-height: 37px; /* Centraliza o texto verticalmente */
  display: inline;
}

.menu-fixo .menu .logo-menu {
  display: inline-block;
  float: left;
}

Já o estilo normal, sem a classe "menu-fixo" tenho apenas algumas considerações, mas fica a seu critério:

.menu ul li {float: left; margin-top: 6px; padding: 6px;}

Na linha acima, ao você colocar um float: left nos li, não mudará muita coisa, já que estes já estão alinhado a esquerda de padrão.

Sugestão: E você deu uma margin-left de 228px. Tem certeza que isso é necessário? Caso queira alinhar a direita, basta usar o float: right a div que criei para o li.

Código Completo

Veja se era isso que desejava:

jQuery("document").ready(function($) {
  var nav = $('.conteudo-menu');
  $(window).scroll(function() {
    if ($(this).scrollTop() > 500) {
      nav.addClass("menu-fixo");
    } else {
      nav.removeClass("menu-fixo");
    }
  });
});
.conteudo-menu {
  background: #ededed;
  font-family: Arial, Helvetica, sans- serif;
  font-size: 14px;
  border-bottom: 2px solid #ccc;
  border-top: 2px solid #ccc;
}

.menu-fixo {
  z-index: 9999;
  position: fixed;
  top: 0;
  width: 880px;
  height: 37px;
}

.menu-fixo .menu {
  height: 37px;
}

.menu-fixo .menu ul {
  height: 37px;
  line-height: 37px;
  position: relative;
  display: inline;
}

.menu-fixo .menu .logo-menu {
  display: inline-block;
  float: left;
}

.logo-menu {
  display: none;
}

.menu-fixo .menu .lista-menu {
  display: inline-block;
  float: left;
}
.menu { height: 60px;}
.menu ul { list-style: none; line-height: 30px;}
.menu ul li {display: inline-block; margin: 0 6px;}
.menu ul li:first-child { padding-left: 228px;}
.menu ul li a { color: #666; text-decoration: blink;}
.menu ul li a:hover { color: #777; text-decoration: underline;}

#pagina {
  height: 4000px;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conteudo-menu">
  <div class="menu">
    <div class="logo-menu">
      <img src="https://i.imgsafe.org/30c0a6d.jpg" alt="logo" style="height: 37px; width: 80px;">
    </div>
    <div class="lista-menu">
      <ul>
        <li><a href="http://seu-link">Início</a></li>
        <li><a href="http://seu-link">Sobre</a></li>
        <li><a href="http://seu-link">Contato</a></li>
        <li><a href="http://seu-link">Anuncie</a></li>
        <li><a href="http://seu-link">Parceria</a></li>
      </ul>
    </div>
    <div class="clear"></div>
  </div>
</div>
<div id="pagina"></div>

Veja que em seu script nada mudou.

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 .