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.
menu-fixo
, dessa forma, quando ele aparecer a imagem vai aparecer também.