Jump to content
Fórum Script Brasil
  • 0

Menu Popup: Tipo Texto(cód.) X Tipo Imagem(export.)


Guest - s_ric_ptbrasil -
 Share

Question

Guest - s_ric_ptbrasil -

Quero fazer um menu popup somente com textos e não imagens do tipo, vá no fireworks crie uma imgem para menu e adicionar menu popup.

Quero fazer menu popup somente no dreamweaver. Tem como? Alguém conhece algum material para que eu possa dar uma estudada(tutorial, artigo, etc...)?

Agradeço desde já.

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0
Guest - s_ric_ptbrasil -

Deixa ver se entendi. Faço uma página com os textos que vão ser o submenu e salvo como popup.htm e linko esta página com o texto(menu do submenu ) da página que tem o menu principal.

Estou certo?

Link to comment
Share on other sites

  • 0
Guest - s_ric_ptbrasil -

Eu fiquei meio confuso com a explicação, daí procurei algo sobre isso e descobri um link que fala sobre Pop-it menu e é feito com script, cheguei fazer uns testes e deu certo, só uma coisa que não consegui fazer é deixar os textos do submenu centralizado. Se alguém puder ajudar vou deixar o script que fiz.

Agradeço desde já.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Documento sem t&iacute;tulo</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#popitmenu{

position: absolute;

background-color: #01537E;

border:0px solid black;

font: normal 10px Verdana;

line-height: 18px;

z-index: 100;

visibility: hidden;

}

#popitmenu a{

text-decoration: none;

padding-left: 6px;

color: #FFFFFF;

display: block;

}

#popitmenu a:hover{ /*hover background color*/

background-color: #FFCC00;

}

</style>

<script type="text/javascript">

/***********************************************

* Pop-it menu- © Dynamic Drive (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/

var defaultMenuWidth="105px" //set default menu width.

var linkset=new Array()

//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

linkset[0]='<a href="comercial.htm">Comercial</a>'

linkset[0]+='<a href="suporte.htm">Suporte</a>'

linkset[0]+='<a href="rh.htm">Oportunidades</a>'

linkset[1]='<a href="teste1.htm">teste 1</a>'

linkset[1]+='<a href="teste2.htm">teste 2</a>'

linkset[1]+='<a href="teste3.htm">teste 3</a>'

linkset[1]+='<a href="teste4.htm">teste 4</a>'

////No need to edit beyond here

var ie5=document.all && !window.opera

var ns6=document.getElementById

if (ie5||ns6)

document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

function iecompattest(){

return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body

}

function showmenu(e, which, optWidth){

if (!document.all&&!document.getElementById)

return

clearhidemenu()

menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")

menuobj.innerHTML=which

menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth

menuobj.contentwidth=menuobj.offsetWidth

menuobj.contentheight=menuobj.offsetHeight

eventX=ie5? event.clientX : e.clientX

eventY=ie5? event.clientY : e.clientY

//Find out how close the mouse is to the corner of the window

var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX

var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY

//if the horizontal distance isn't enough to accomodate the width of the context menu

if (rightedge<menuobj.contentwidth)

//move the horizontal position of the menu to the left by it's width

menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"

else

//position the horizontal position of the menu where the mouse was clicked

menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"

//same concept with the vertical position

if (bottomedge<menuobj.contentheight)

menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"

else

menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"

menuobj.style.visibility="visible"

return false

}

function contains_ns6(a, B) {

//Determines if 1 element in contained in another- by Brainjar.com

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}

function hidemenu(){

if (window.menuobj)

menuobj.style.visibility="hidden"

}

function dynamichide(e){

if (ie5&&!menuobj.contains(e.toElement))

hidemenu()

else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

hidemenu()

}

function delayhidemenu(){

delayhide=setTimeout("hidemenu()",500)

}

function clearhidemenu(){

if (window.delayhide)

clearTimeout(delayhide)

}

if (ie5||ns6)

document.onclick=hidemenu

</script>

</head>

<body>

<a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Contate-nos</a>

| <a href="#" onMouseover="showmenu(event,linkset[1], '150px')" onMouseout="delayhidemenu()">News

sites</a>

</body>

</html>

Link to comment
Share on other sites

  • 0
Guest - s_ric_ptbrasil -

Este script que eu passei no post anterior funcionou quando eu copiei e colei numa página html em branco.Até aí é fácil, mas eu fui fazer este script funcionar na página pra valer ele não funcionou. Aconteceu uma coisa inusitada, quando passei o mouse em cima para testar o submenu não apareceu e layout que eu tinha feito em tabela ele desceu junto com o acontecido. Eu acho que a tabela ou o iframe embaixo deve ter escondido o sobmenu, eu não sei, estou chutando.

O que eu posso fazer? Qualquer ajuda é bem vinda.

Link to comment
Share on other sites

  • 0
Guest - s_ric_ptbrasil -

Esquece tudo o que eu falei. Já resolvi o problema. O que aconteceu é esqueci de copiar um ítem do script, por isso estava desconfigurado, mas agora está ok.

Valeu pela força.

Link to comment
Share on other sites

  • 0

é facil fácil...

vai no DW e cria uma tabela que serão seus links raiz....

faz o link deles pra #

ex.: <a href="#">menu1</a>

clica no link e vai na janela behaviors (window / behaviors)

clique no + e escolha a opção Show Pop-up Menu

e vai criando os intens do menu!!

qualquer duvida posta aí =***

Link to comment
Share on other sites

  • 0
Guest - s_ric_ptbrasil -

Jaquelinerz, eu fiz da maneira que você me ensinou e deu certo, mas uma coisa não me agradou quando testei no browser. Acontece que o texto que você linka com "#" não substitui o menu, ou seja, aparece o texto linkado, o menu e o submenu. Não tem como substituir o texto linkado pelo criado(menu). Desta forma que estou falando, vai aparecer só o menu e o submenu. Entendeu o que quis dizer?

Link to comment
Share on other sites

  • 0

bom... pelo que entendi você não quer que o link do menu tenha "cara de link" é isso!?!?

simples... vai lá no seu código e retira o href="#" o resto é só css ^^"

ex:

seu código está assim

<a href="#" name="link2" id="link2" onmouseover="MM_showMenu(window.mm_menu_1206171012_0,43,16,null,'link2')" onmouseout="MM_startTimeout();">
ele vai ficar assim
<a name="link2" id="link2" onmouseover="MM_showMenu(window.mm_menu_1206171012_0,43,16,null,'link2')" onmouseout="MM_startTimeout();">

=***

Link to comment
Share on other sites

  • 0
Guest - s_ric_ptbrasil -

Quando dá um refresh no DW para testar acontece o seguinte. o texto que é o link, aparece, mas quando passa o mouse em cima ele substitui com cara menu. Até aí tudo bem, mas o que quero é quando sua página html é aberta no browser não apareça o texto e sim ele já com cara de menu.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      151k
    • Total Posts
      649.1k
×
×
  • Create New...