Menu Horizontal

[Freelife 2]

Fala galera...

 

Depois de muito tempo sem postar, estou novamente na ativa.

 

Seguinte, criei um menu simples daqueles que tem ali no REPENTE. menu horizontal usando listas.

 

O que acontece?::: Quando o último menu do lado direito tem sub menus, eles ultrapassam a largura do site. eu queria fazer com que ele invertesse o lado...

 

|:::: :::: :::: :::: ::::| Aqui é o limite do site.
     :::::::        :::::: Nesse e no de baixo, passou da margin.      
     :::::::        ::::::

 

Tem como fazer assim:

|:::: :::: :::: :::: ::::| Aqui é o limite do site.
     :::::::      :::::: vai para a esquerda respeitando o limite da margin.
     :::::::      ::::::

 

É isso, não consegui corrigir isso.

Se alguém tiver a solução.

 

É um menu simples, mas assim que estiver pronto, colocarei o código aqui.

 

Att.

Freelife

[Preis85 0]

Sem ver o código é dificil visualizar.

Tenta postar o codigo com o css que fica mais fácil.

[Freelife 2]

Boa tarde galera...

 

Aí está o código, sei que ainda está meio grande, vou deduzí-lo ainda, mas por enquanto é isso.

Acho que agora ficará mais fácil ajudar.

 

<style type="text/css">
/* Identifica o div do menu horizontal */
#menu {
width: 870px;
height: 80px;
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
font-weight: bold;
border: 1px solid #000;
}

/* Identifica o id */
#menu_h {
width: 600px;
}

/* Idenfitica a classe menu_h */
ul.menu_h {
cursor: default;
margin: 0;
padding:0;
list-style-type: none;
display: inline;
color: #000;
}
ul.menu_h > li {
min-width: 140px;
height: 80px;
margin: 0 2px 0 2px;
padding: 0;
background-image: url(img/bg_black.png);
background-repeat: repeat;
list-style-type: none;
position: relative;
float: left;
display: inline;
text-align: left;
}

ul.menu_h ul {
min-width: 284px;
margin: 0;
padding: 0;
background-image: url(img/bg_black.png);
background-repeat: repeat;
list-style-type: none;
position: absolute;
/*float: left;*/
display: inline;
left: auto;
top: 80px;
}

ul.menu_h a {
display: block;
cursor: pointer;
padding: 29px 5px 29px 5px;
text-decoration: none;
color: #fff;
}

ul.menu_h a:hover {
display: block;
cursor: pointer;
padding: 29px 5px 29px 5px;
text-decoration: none;
background-color: #eee;
color: #000;
}

ul.sub > li {
display: none;
}
ul.show {
}
ul.show > li {
display: block;
}
</style>
<script type="text/javascript">

/*
* Função menus();
* Essa função transforma uma lista com os devidos ids e css em um menu.
*
*/
function menus(id){
/* Captura o item 'ul' pai com o id referido */
var menu = document.getElementById("menu_h");

/* Capturamos todas as tags ul dentro do div*/
var itens = document.getElementById("menu_h").getElementsByTagName("ul");

/* Capturamos o sub_menu com o referido id */
var sub_menu = document.getElementById("sub_"+id);

/* Se existe o sub_menu... */
if(sub_menu != null){
	/* Loop percorre todos os ítens ul */
	for(a = 0; a < itens.length; a++){
		/* Se o itens[a] tiver a classe 'show', tranforma em classe 'sub'*/
		if(itens[a].className == "show"){
			itens[a].className = "sub";
		}
	}
	/* Aqui de qualquer maneira definimos a classe do menu retornado para 'show' */
	sub_menu.className ="show";
	sub_menu.onmouseout = function(){this.className='sub'};
}
/* senão(ou seja, não existe o sub_menu) */
else{
	/* Percorremos todos os itens e transformamos qualquer um de classe 'show' em classe 'sub'*/
	for(a = 0; a < itens.length; a++){
		if(itens[a].className == "show"){
			itens[a].className = "sub";
		}
	}
	/* retorna falso */
	return false;
}
}


</script>

<div id="menu">
<ul id="menu_h" class="menu_h" >
	<li id="1" onmouseover="menus(this.id);"><a href="#">Home</a></li>
	<li id="2" onmouseover="menus(this.id);"><a href="#">Quem Somos</a></li>
	<li id="3" onmouseover="menus(this.id);"><a href="#">ABC</a>
		<ul class="sub" id="sub_3">
			<li><a href="#">ABC.A</a></li>
			<li><a href="#">ABC.B</a></li>
		</ul>
	</li>
	<li id="4" onmouseover="menus(this.id);"><a href="#">Outros</a></li>
	<li id="5" onmouseover="menus(this.id);"><a href="#">Outros</a></li>
	<li id="6" onmouseover="menus(this.id);"><a href="#">DEF</a>
		<ul class="sub" id="sub_6">
			<li><a href="#">DEF.A</a></li>
			<li><a href="#">DEF.B</a></li>
		</ul>
	</li>
</ul>
</div>

 

Att.

Freelife

[Preis85 0]

Como o problema acontece só quando tem submenus no ultimo menu, acho que você pode colocar um if na função pra resolver.

 

Por exemplo:

if(sub_menu != null){
   ...
   sub_menu.onmouseout = function(){this.className='sub'};
   if(id == "6"){
       sub_menu.style.right = "0";
   }
}

[Freelife 2]

Vlw Preis85!

 

Com isso resolve-se a questão partindo do princípio que eu sei qual é o último menu. Deu certo!

 

Mas na verdade o que eu queria é um pouco mais complicado.

Tipo quando o mouse vai chegando perto da direita, o menu automaticamente vai se posicionando mais à esquerda para não sair fora do layout.

 

A idéia é essa ou algo assim...rsrsrs

 

Eu já ví isso, só não lembro onde.

 

Se alguém puder contribuir talvez seja de valia para todos.

 

Mas novamente Preis85, valeu!!!

 

Att.

Freelife