Good day to all.

I have long wanted to make this elementary ... when I hover over a certain text, a link, a cell in a table, I want a white area to appear below (preferably a table), with the links I specified. Links must be equal to certain variables ($ u01, $ u02, $ u03 ...). Of course, “googol taxis”, but I’m doing this menu for the first time, and I don’t know the pitfalls. Therefore, there are two questions.

First: the hunt to find out what is the most standard, cross-browser, ancient, inside the page, without a library, you can write this menu?

Second: how to write this? Who can write a "modest" example?

  • Well, I'm not the only one eating the brain =) - k0mar

3 answers 3

<style> .rollover{position:relative} .rollover .tip{position:absolute;top:-20px;left:50%;width:150px;margin-left:-75px;background:#0cf;display:none} .rollover:hover .tip{display:block} </style> <span class="rollover"><div class="tip">I'm popup</div>roll me over to see an interesting effect</span>

There is such an option. But it needs a little finish in terms of layout. Can you do it yourself? =)

    If I understand correctly, then you need a popup, here is an example . It?

       <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <table id="menu1" onMouseOver="document.all.tb1.style.display=''" onClick="menuclick()" onMouseOut="document.all.tb1.style.display='none'" cellspacing="0" cellpadding="10" rules="none" border="1"> <tbody> <tr><td id="menuzag1" onMouseOver="=onmousemenu()" onMouseOut="outmousemenu()">p_one</td></tr> </tbody> <tbody id="tb1" style="display:none"> <tr><td id="n001" onMouseOver="onelement()" onMouseOut="outelement()">one</td></tr> </tbody> </table> <script type="text/javascript"> // in function oneelement(){ xid=event.srcElement.id document.all[xid].style.color='#ffffff' document.all[xid].style.background='#ffffff' } // en function outelement(){ xid=event.srcElement.id document.all[xid].style.color='#000000' document.all[xid].style.background='#ffffff' } // in h function onmousemenu(){ xid=event.srcElement.id document.all[xid].style.background='#ffffff' } // en h function outmousemenu(){ xid=event.srcElement.id document.all[xid].style.background='#ffffff' } // fe function menuclick(){ alert("element: " +event.srcElement.id) if(event.srcElement.id=="n001"){ window.open("http://ya.ru") } } </script> </body> </html>

      of the minuses - javascript. without this in any way? (jQuery ... and so on. I don’t want to use it).

      Here is an example. jambs: when you hover on the menu, button and back - the line separator disappears. when you click in the place of transition there is a window and then a transition, but not in the same window but in another.

      The difficulty is this: before the script I have a couple of variables, I want to cram them into the place "http://ya.ru", how to do this?

      • without js, razvishto flash, but it is meaningless ... - Zowie