Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

leandra_TI

[Resolvido] Problema ao usar menu css e jquery

Por , em Desenvolvimento frontend

Recommended Posts

leandra_TI    0

leandra_TI
Postado

Boa Tarde,

o meu problema é o seguinte tenho um menu feito em css e jquery, gerado dinamicamente com dados de um bd, é formado de menu e abaixo submenu e subitens à direita do submenu.

Sendo que eu gostaria de quando ele chegasse nos últimos menus, verificasse se os subitens caberia na pagina e senão desse para visualizar pelo lado direito ele mudasse para o lado esquerdo.

Grata desde já por qualquer ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Com jQuery:

 

- Verificar tamanho da tela

- Verificar posição X desses submenus na tela

- Verificar largura desses submenus

- Se a tela for maior ou igual que posição X do submenu, mais a largura desse submenu (x2 se o site estiver centralizado), pode deixar o menu no lugar onde está. Caso contrário, realoque-o para a esquerda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

leandra_TI    0

leandra_TI
Postado

Com jQuery:

 

- Verificar tamanho da tela

- Verificar posição X desses submenus na tela

- Verificar largura desses submenus

- Se a tela for maior ou igual que posição X do submenu, mais a largura desse submenu (x2 se o site estiver centralizado), pode deixar o menu no lugar onde está. Caso contrário, realoque-o para a esquerda.

 

Obrigado, pela a dica. Sua ideia é brilhante.

Você nao teria nenhum exemplo de codigo pra mim poder visualizar sua ideia melhor.

Grata.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Exemplo:

 

<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function reposiciona(){
var telaW = $(window).width()
var elemento = $('.teste')
var posicaoX = elemento.offset().left
var elementoW = elemento.width()
if(!(telaW > (posicaoX + elementoW))){
	elemento.css({
		'margin-left':'280px'
	})
}
}
$(function(){
reposiciona()
})
</script>
<style type="text/css">
body {
margin: 0;
}
html,body,section {
height: 100%;
margin: 0 auto;
}
section {
width: 980px;
background: green;
position: relative;
}
.teste {
width: 200px;
height: 200px;
top: 10px;
left: 50%;
margin: 0 0 0 500px;
position: absolute;
background: blue;
}
</style>
<section>
<div class="teste">

</div>
</section>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito