Ir para conteúdo
Fórum Script Brasil
  • 0

Menu

Guest Toninho

Perguntado por Guest Toninho,

 Share

Pergunta

Guest Toninho

Guest Toninho

Postado
Postado

Baixei na internet um código Java script já pronto composto dos três arquivos abaixo), bastando apenas adaptá-lo para minha página, o que consegui fazer com um pouco de dificuldade.

Ao criar uma página com quadros, um superior chamado "CABEÇALHO" (onde fica o menu Java Script) e um inferior chamado "PRINCIPAL" (onde abre as páginas selecionadas nos links da página superior), não consegui fazer com que as páginas abram no quando inferior ("PRINCIPAL"). Já usei o comando target, mas não deu certo.

Acredito que esta alteração terá que ser feita em um destes arquivos abaixo.

Cascademenu.htm

Cascademenu.css

Cascademenu.js

Obs.: Segue abaixo o conteúdo de cada um destes arquivos.

Se alguém tiver ânimo para interpretar estes códigos, fico muito feliz pela ajuda.

Um abraço a todos e muito obrigado!

CASCADEMENU.HTM

<html>

<head>

<link href="CascadeMenu.css" rel="stylesheet">

</HEAD>

<body OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy" bgColor="#ffffff">

<div align=center>

<!-------------------COMEÇA AQUI-------------------------->

<font face=verdana size=1 color=white><script language="javascript" src="CascadeMenu.js">

</script>

<!--/*******ESTA LINHA É QUE FAZ O ALINHAMENTO DO MENU********/-->

<div id="Layer5" style="position:absolute; left:200px; top:0px">

<!-- SE A POSIÇÃO AQUI FOR LEFT:100px -->

</div>

</font>

<DIV Id="menuBar" class="menuBar" >

<DIV Id="Bar1" class="Bar" menu="menu1">Menu 1</DIV>

<DIV Id="Bar2" class="Bar" menu="menu2">Menu 2</DIV>

<DIV Id="Bar3" class="Bar" menu="menu3">Menu 3</DIV>

<DIV Id="Bar4" class="Bar" menu="menu4">Menu 4</DIV>

<DIV Id="Bar5" class="Bar" menu="menu5">Menu 5</DIV>

</DIV>

<!--/*******ESTA LINHA É QUE FAZ O ALINHAMENTO DO MENU********/-->

<div id="Layer5" style="position:absolute; left:0px; top:0px">

<!-- AQUI DEVE SER LEFT: -100px -->

<div Id="menu1" class="menu" >

<div Id="menuItem1_1" class="menuItem" menu="menu6">SubMenu 1</div>

<div Id="menuItem1_2" class="menuItem" title="Página" cmd="pagina.html">Página 1</div>

<div Id="menuItem1_3" class="menuItem" title="Página" cmd="pagina.html">Página 2</div>

<div Id="menuItem1_4" class="menuItem" title="Página" cmd="pagina.html">Página 3</div>

</div>

<div Id="menu2" class="menu">

<div Id="menuItem2_1" class="menuItem" title="Página" cmd="pagina.html">Page 1</div>

<div Id="menuItem2_2" class="menuItem" title="Página" cmd="pagina.html">Page 2</div>

<div Id="menuItem2_3" class="menuItem" title="Página" cmd="pagina.html">Page 3</div>

</div>

<div Id="menu3" class="menu">

<div Id="menuItem3_1" class="menuItem" title="Página" cmd="pagina.html">Page 1</div>

<div Id="menuItem3_2" class="menuItem" title="Página" cmd="pagina.html">Page 2</div>

<div Id="menuItem3_3" class="menuItem" title="Página" cmd="pagina.html">Page 3</div>

<div Id="menuItem3_4" class="menuItem" menu="menu5">SubMenu 4</div>

</div>

<div Id="menu4" class="menu">

<div Id="menuItem4_1" class="menuItem" title="Página" cmd="pagina.html">Page 1</div>

<div Id="menuItem4_2" class="menuItem" title="Página" cmd="pagina.html">Page 2</div>

<div Id="menuItem4_3" class="menuItem" title="Página" cmd="pagina.html">Page 3</div>

<div Id="menuItem4_4" class="menuItem" title="Página" cmd="pagina.html">Page 4</div>

</div>

<div id="menu5" class="menu">

<div Id="menuItem5_1" class="menuItem" title="Página" cmd="pagina.html">Page 4-1</div>

<div Id="menuItem5_2" class="menuItem" title="Página" cmd="pagina.html">Page 4-2</div>

<div Id="menuItem5_3" class="menuItem" title="Página" cmd="pagina.html">Page 4-3</div>

</div>

<div id="menu6" class="menu">

<div Id="menuItem6_1" class="menuItem" title="Página" cmd="pagina.html">Page 1-1</div>

<div Id="menuItem6_2" class="menuItem" title="Página" cmd="pagina.html">Page 1-2</div>

<div Id="menuItem6_3" class="menuItem" menu="menu7" title="Página" cmd="pagina.html">SubMenu 1-1</div>

</div>

<div id="menu7" class="menu">

<div Id="menuItem7_1" class="menuItem" title="Página" cmd="pagina.html">Page 1-1-1</div>

<div Id="menuItem7_2" class="menuItem" title="Página" cmd="pagina.html">Page 1-1-2</div>

<div Id="menuItem7_3" class="menuItem" title="Página" cmd="pagina.html">Page 1-1-3</div>

</div><!-- End of Menu -->

</div>

<!-------------------TERMINA AQUI--------------------------->

</body>

</html>

CASCADEMENU.CSS

BODY

{

}

.menuBar

{

POSITION: relative;

BACKGROUND-COLOR: transparent;

TEXT-ALIGN: center

}

.Bar

{

BORDER-RIGHT: blue 1px outset;

BORDER-TOP: blue 1px outset;

FLOAT: left;

BORDER-LEFT: blue 1px outset;

WIDTH: 100px;

CURSOR: hand;

TEXT-INDENT: 5px;

BORDER-BOTTOM: blue 1px outset;

POSITION: relative;

BACKGROUND-COLOR: deepskyblue;

TEXT-ALIGN: center

}

.menu

{

BORDER-RIGHT: buttonhighlight thin outset;

BORDER-TOP: buttonhighlight thin outset;

VISIBILITY: hidden;

BORDER-LEFT: buttonhighlight thin outset;

WIDTH: 100px;

LINE-HEIGHT: 140%;

BORDER-BOTTOM: buttonhighlight thin outset;

POSITION: absolute;

BACKGROUND-COLOR: deepskyblue

}

.menuItem

{

PADDING-RIGHT: 15px;

PADDING-LEFT: 10px;

WIDTH: 100%;

CURSOR: hand;

LINE-HEIGHT: 20px;

BORDER-BOTTOM: white 1px solid

}

.ItemMouseOver

{

PADDING-RIGHT: 15px;

PADDING-LEFT: 10px;

WIDTH: 100%;

CURSOR: hand;

COLOR: highlighttext;

LINE-HEIGHT: 20px;

BORDER-BOTTOM: white 1px solid;

BACKGROUND-COLOR: highlight

}

.ItemMouseOut

{

WIDTH: 100%

}

.Arrow

{

FLOAT: right;

FONT-FAMILY: Webdings;

POSITION: absolute;

TEXT-ALIGN: left

}

.barOver

{

BORDER-RIGHT: blue 1px ridge;

BORDER-TOP: blue 1px ridge;

FLOAT: left;

BORDER-LEFT: blue 1px ridge;

WIDTH: 100px;

CURSOR: hand;

TEXT-INDENT: 5px;

BORDER-BOTTOM: blue 1px ridge;

POSITION: relative;

BACKGROUND-COLOR: deepskyblue;

TEXT-ALIGN: center

}

CASCADEMENU.JS

function InitMenu()

{

var bar = menuBar.children

for(var i=0;i < bar.length;i++)

{

var menu=eval(bar.menu)

menu.style.visibility = "hidden"

bar.onmouseover = new Function("ShowMenu("+bar.id+")")

var Items = menu.children

for(var j=0; j<Items.length; j++)

{

var menuItem = eval(Items[j].id)

if(menuItem.menu != null)

{

menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"

//var tmp = eval(menuItem.id+"_Arrow")

// tmp.style.pixelLeft = menu.getBoundingClientRect().Right //- tmp.offsetWidth - 15

FindSubMenu(menuItem.menu)}

if(menuItem.cmd != null)

{

menuItem.onclick = new Function("Do("+menuItem.id+")") }

menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

}

}

}

function FindSubMenu(subMenu)

{

var menu=eval(subMenu)

var Items = menu.children

for(var j=0; j<Items.length; j++)

{

menu.style.visibility = "hidden"

var menuItem = eval(Items[j].id)

if(menuItem.menu!= null)

{

menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"

// var tmp = eval(menuItem.id+"_Arrow")

//tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15

FindSubMenu(menuItem.menu)

}

if(menuItem.cmd != null)

{

menuItem.onclick = new Function("Do("+menuItem.id+")") }

menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

}

}

function ShowMenu(obj)

{

HideMenu(menuBar)

var menu = eval(obj.menu)

var bar = eval(obj.id)

bar.className="barOver"

menu.style.visibility = "visible"

menu.style.pixelTop = obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop

menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft

}

function highlight(obj)

{

var PElement = eval(obj.parentElement.id)

if(PElement.hasChildNodes() == true)

{ var Elements = PElement.children

for(var i=0;i<Elements.length;i++)

{

TE = eval(Elements.id)

TE.className = "menuItem"

}

}

obj.className="ItemMouseOver"

window.defaultStatus = obj.title

ShowSubMenu(obj)

}

function Do(obj)

{

var cmd = eval(obj).cmd

window.navigate(cmd)

}

function HideMenu(obj)

{

if(obj.hasChildNodes()==true)

{

var child = obj.children

for(var j =0;j<child.length;j++)

{

if (child[j].className=="barOver")

{var bar = eval(child[j].id)

bar.className="Bar"}

if(child[j].menu != null)

{

var childMenu = eval(child[j].menu)

if(childMenu.hasChildNodes()==true)

HideMenu(childMenu)

childMenu.style.visibility = "hidden"

}

}

}

}

function ShowSubMenu(obj)

{

PMenu = eval(obj.parentElement.id)

HideMenu(PMenu)

if(obj.menu != null)

{

var menu = eval(obj.menu)

menu.style.visibility = "visible"

menu.style.pixelTop = obj.getBoundingClientRect().top + Bdy.scrollTop

menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft

if(menu.getBoundingClientRect().right > window.screen.availWidth )

menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth

}

}

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0
Eddie_666

Eddie_666

Postado
Postado

Normalmente esses scripts vêm com um arquivo de configuração, lá que tu informa as cores do menu e o target, não veio com esse?

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,4k
    • Posts
      652,1k
×
×
  • Criar Novo...