Ir para conteúdo
Fórum CódigoFonte.net
micaelfis

Menu retráfil e fixo

Recommended Posts

Boa noite a todos.

Estou com a seguinte dúvida: Quero colocar no meu site, um menu retrátil (que só seja aberto quando o usuário passar o mouse sobre ele) e fixo no topo da página.

Já consegui criar o menu retrátil, o problema é que quando eu tento deixá-lo fixo (usando o comando CSS position:fixed) ele "se desembrulha" quando o mouse passa pela região que deveria seria utilizada por ele (menu) só depois de expandido. Segue abaixo o código utilizado, ficarei muito grato aqueles que puderem me ajudar.

 

<html>
<head>
<style>
.clearfix:after {display:block; clear:both;}
.menu {width:40px;margin:0px auto;position:absolute;top:-14px;left:-65px;}
.menu li {margin:0px; white-space:nowrap; width:125px; list-style:none;}
.menu > ul > li {float:left; display:inline-block; position:relative; font-size:16px;}
.menu > ul > li > a {padding:10px 40px; display:inline-block;}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {background:"transparent";}
.menu li:hover .sub-menu {z-index:1; opacity:1;}
.sub-menu {width:140%;padding:5px 0px;position:absolute;top:100%;left:0px;z-index:-1;opacity:0;transition:opacity linear 0.15s;box-shadow:0px 2px 3px rgba(0,0,0,0.2);background:#00bcd4;}
.sub-menu li {display:block;font-size:14px;}
.sub-menu li a {padding:10px 30px;display:block;}
.sub-menu li a:hover, .sub-menu .current-item a {background:#33C9DD;color:#FFFFFF;}
</style>
</head>

<body>
<!-- <div style='position:fixed'> -->
<nav class='menu'>
    <ul class='clearfix'>
    <li>
        <a href='#'><b style='background:#99E4EE;'><img src='imagens/menu-20x20.png'/></b></a>
        <ul class='sub-menu'>
        <li><a href='link1.html' ><b>LINK 1</b></a></li>
        <li><a href='link2.html' ><b>LINK 2</b></a></li>
        <li><a href='link3.html' ><b>LINK 3</b></a></li>
        </ul>
    </li>
    </ul>
</nav>
<!-- </div>  -->

</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom revisei o codigo e veja se isso lhe ajuda

<style>
.posicao {
    position:fixed;
    top:0px;
    left:0px;
    margin:0px;
    margin-bottom:0px;
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    marker-offset:0px;
    z-index:0px;
    
}
.clearfix:after {display:block; clear:both;}
.menu {width:40px;margin:0px auto;position:absolute;top:-14px;left:-65px;}
.menu li {margin:0px; white-space:nowrap; width:125px; list-style:none;}
.menu > ul > li {float:left; display:inline-block; position:relative; font-size:16px;}
.menu > ul > li > a {padding:10px 40px; display:inline-block;}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {background:"transparent";}
.menu li:hover .sub-menu {z-index:1; opacity:1;}
.sub-menu {width:140%;padding:5px 0px;position:absolute;top:100%;left:0px;z-index:-1;opacity:0;transition:opacity linear 0.15s;box-shadow:0px 2px 3px rgba(0,0,0,0.2);background:#00bcd4;}
.sub-menu li {display:block;font-size:14px;}
.sub-menu li a {padding:10px 30px;display:block;}
.sub-menu li a:hover, .sub-menu .current-item a {background:#33C9DD;color:#FFFFFF;}
.corpo {
    margin:0px;
    margin-bottom:0px;
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    marker-offset:0px;
    bottom:0px;
    }
</style>
</head>

<body class="corpo" >


<nav class='menu'>
    <ul class='clearfix'>
    <li>
        <a href='#'><b style='background:#99E4EE;'><img src='imagens/menu-20x20.png' border="0"/></b></a>
        <ul class='sub-menu'>
        <li><a href='link1.html' ><b>LINK 1</b></a></li>
        <li><a href='link2.html' ><b>LINK 2</b></a></li>
        <li><a href='link3.html' ><b>LINK 3</b></a></li>
        </ul>
    </li>
    </ul>
</nav>


</body>
</html>

 

foi adicionado

.posicao {
    position:fixed;
    top:0px;
    left:0px;
    margin:0px;
    margin-bottom:0px;
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    marker-offset:0px;
    z-index:0px;
    

posicionamento da div

veja se da ou qq coisa posta ae de novo! testei e nao desembaralhou nada abraços

 

.corpo {
    margin:0px;
    margin-bottom:0px;
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    marker-offset:0px;
    bottom:0px;
    }

que fica no body do site ele tira quaisquer margens

e

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa noite Ray.

Primeiramente, muito obrigado pela atenção. Em segundo lugar, desculpe-me pela demora em responder (cheguei de viagem hoje).

Rapaz, adicionei posicao e corpo à folha de estilos e adicionei estas classes ao div, mas continuei com o mesmo problema.

Pra facilitar a visualização do problema, adicionei umas linhas de texto. Segue o código com as modificações sugeridas, porém com o mesmo problema.

<html><head><style>
.posicao {position:fixed; top:0px;left:0px; margin:0px; margin-bottom:0px; margin-top:0px; margin-left:0px; margin-right:0px; marker-offset:0px;z-index:0px;}
.clearfix:after {display:block; clear:both;}
.menu {width:40px;margin:0px auto;position:absolute;top:-14px;left:-65px;}
.menu li {margin:0px; white-space:nowrap; width:125px; list-style:none;}
.menu > ul > li {float:left; display:inline-block; position:relative; font-size:16px;}
.menu > ul > li > a {padding:10px 40px; display:inline-block;}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {background:"transparent";}
.menu li:hover .sub-menu {z-index:1; opacity:1;}
.sub-menu {width:140%;padding:5px 0px;position:absolute;top:100%;left:0px;z-index:-1;opacity:0;transition:opacity linear 0.15s;box-shadow:0px 2px 3px rgba(0,0,0,0.2);background:#00bcd4;}
.sub-menu li {display:block;font-size:14px;}
.sub-menu li a {padding:10px 30px;display:block;}
.sub-menu li a:hover, .sub-menu .current-item a {background:#33C9DD;color:#FFFFFF;}
.corpo {margin:0px;margin-bottom:0px;margin-top:0px;margin-left:0px;margin-right:0px;marker-offset:0px;bottom:0px;}
</style></head>

<body class="corpo">
<div class="posicao">
<nav class='menu'>
    <ul class='clearfix'>
    <li>
        <a href='#'><b style='background:#99E4EE;'><img src='imagens/menu-20x20.png'/></b></a>
        <ul class='sub-menu'>
        <li><a href='link1.html' ><b>LINK 1</b></a></li>
        <li><a href='link2.html' ><b>LINK 2</b></a></li>
        <li><a href='link3.html' ><b>LINK 3</b></a></li>
        </ul>
    </li>
    </ul>
</nav>
</div>

<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
</body></html>

 

Ficarei muito grato se você puder me dar mais alguma luz.

Att

Micael

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ah foi mal acho que cortou a explicação no post pode ver que parou no e... kk entao cara como eu ia explicar o menu como ele esta na posição absoluta no topo da pagina você ira precisar coloca o conteudo de texto fotos etc dentro de outra div ou tabelas mais um menos assim

 

veja se assim melhora! =]

<html><head><style>
.posicao {position:fixed; top:0px;left:0px; margin:0px; margin-bottom:0px; margin-top:0px; margin-left:0px; margin-right:0px; marker-offset:0px;z-index:0px;}
.clearfix:after {display:block; clear:both;}
.menu {width:40px;margin:0px auto;position:absolute;top:-14px;left:-65px;}
.menu li {margin:0px; white-space:nowrap; width:125px; list-style:none;}
.menu > ul > li {float:left; display:inline-block; position:relative; font-size:16px;}
.menu > ul > li > a {padding:10px 40px; display:inline-block;}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {background:"transparent";}
.menu li:hover .sub-menu {z-index:1; opacity:1;}
.sub-menu {width:140%;padding:5px 0px;position:absolute;top:100%;left:0px;z-index:-1;opacity:0;transition:opacity linear 0.15s;box-shadow:0px 2px 3px rgba(0,0,0,0.2);background:#00bcd4;}
.sub-menu li {display:block;font-size:14px;}
.sub-menu li a {padding:10px 30px;display:block;}
.sub-menu li a:hover, .sub-menu .current-item a {background:#33C9DD;color:#FFFFFF;}
.corpo {margin:0px;margin-bottom:0px;margin-top:0px;margin-left:0px;margin-right:0px;marker-offset:0px;bottom:0px;}
</style></head>

<body class="corpo">

<table width="100%" height="150" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <div class="posicao">
<nav class='menu'>
    <ul class='clearfix'>
    <li>
        <a href='#'><b style='background:#99E4EE;'><img src='imagens/menu-20x20.png'/></b></a>
        <ul class='sub-menu'>
        <li><a href='link1.html' ><b>LINK 1</b></a></li>
        <li><a href='link2.html' ><b>LINK 2</b></a></li>
        <li><a href='link3.html' ><b>LINK 3</b></a></li>
        </ul>
    </li>
    </ul>
</nav>
</div>
</td>
  </tr>
  <tr>
    <td align="center"><img name="TOPO DO MEU SITE FOTO COM O BANNER POR EXEMPLO!" src="" width="647" height="93" alt="" style="background-color: #D6D6D6"></td>
  </tr>
</table>
<h4>conteudo começa daqui para baixo! ai sem problemas do menu ficar transpaçando os textos!a</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
</body></html>

OU POR DIV TAMBEM FUNCIONA! so que recomendo tabelas

<html><head><style>
.posicao {position:fixed; top:0px;left:0px; margin:0px; margin-bottom:0px; margin-top:0px; margin-left:0px; margin-right:0px; marker-offset:0px;z-index:0px;}
.clearfix:after {display:block; clear:both;}
.menu {width:40px;margin:0px auto;position:absolute;top:-14px;left:-65px;}
.menu li {margin:0px; white-space:nowrap; width:125px; list-style:none;}
.menu > ul > li {float:left; display:inline-block; position:relative; font-size:16px;}
.menu > ul > li > a {padding:10px 40px; display:inline-block;}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {background:"transparent";}
.menu li:hover .sub-menu {z-index:1; opacity:1;}
.sub-menu {width:140%;padding:5px 0px;position:absolute;top:100%;left:0px;z-index:-1;opacity:0;transition:opacity linear 0.15s;box-shadow:0px 2px 3px rgba(0,0,0,0.2);background:#00bcd4;}
.sub-menu li {display:block;font-size:14px;}
.sub-menu li a {padding:10px 30px;display:block;}
.sub-menu li a:hover, .sub-menu .current-item a {background:#33C9DD;color:#FFFFFF;}
.corpo {margin:0px;margin-bottom:0px;margin-top:0px;margin-left:0px;margin-right:0px;marker-offset:0px;bottom:0px;}
#apDiv1 {
	position:absolute;
	left:0px;
	top:221px;
	width:1128px;
	height:325px;
	z-index:1;
}
</style></head>

<body class="corpo">

<div class="posicao">
<nav class='menu'>
    <ul class='clearfix'>
    <li>
        <a href='#'><b style='background:#99E4EE;'><img src='imagens/menu-20x20.png'/></b></a>
        <ul class='sub-menu'>
        <li><a href='link1.html' ><b>LINK 1</b></a></li>
        <li><a href='link2.html' ><b>LINK 2</b></a></li>
        <li><a href='link3.html' ><b>LINK 3</b></a></li>
        </ul>
    </li>
    </ul>
</nav>
</div>
<div id="apDiv1">caonteudo vai aqui!

<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4>
<h4>Teste</h4></div>

</body></html>

Ai no caso se for colocar mais div lembra de fazer um stylo para ela tambem para posicionar abaixo do seu menu e tal!

qq duvida posta ae!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Como diriam no exército, "última forma", rsrs.

Rapaz, o menu funcionou super bem no notebook. Mas quando eu abro o site no celular, continuo com o mesmo problema: o menu continua desembrulhando quando clico em um região que deveria ser utilizada por ele (menu) só depois de expandido.

Pra facilitar a visualização do problema, a página que encontra-se com este problema é: www.pedalaremgrupo.com.br (o efeito de menu embrulhado só será aplicado em janelas com largura inferior a 500px). Pode-se ver que quando acessado do notebook ele funciona perfeitamente, mas acessando do celular ele apresenta o problema citado acima.

Agradeço qualquer luz que puder ser lançada sobre o problema.

Att

Micael

PS: Caros moderadores, pus o link só pra ajudar a "materializar" o problema, caso eu esteja infrijindo qualquer regra do fórum sintam-se à vontade para editar o post ou me contactar para que eu o edite.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×
×
  • Criar Novo...