Codigos css - Menus

Menus

Menú Navegación

Este código crea una barra de menú de navegación que se desplaza en la página para ser visible en todo momento.

<STYLE TYPE="text/css">  </STYLE>

Este código crea un menú flotante al hacer clic en la página con el botón izquierdo del ratón y otro clic fuera de el, se esconde.

<td width="100%"> <script language="javaScript"> //http://www.yomaster.com menu="off" var tdOutColor = "#FFFFFF"; var tdOverColor = "#B0C4F0"; function checabrowser(){ var x = navigator.appVersion; y = x.substring(0,4); if (y>=4) setVariables(); } var x,y,b,xx,yy function setVariables(){ if (navigator.appName == "Netscape") { h=".left="; v=".top="; dS="document."; sD=""; iW="window.iWidth" iH="window.iHeight" osX="window.pageXOffset" osY="window.pageYOffset" document.menum.visibility="hide" } else{ h=".pixelLeft="; v=".pixelTop="; dS=""; sD=".style"; iW="document.body.clientWidth" iH="document.body.clientHeight" osX="document.body.scrollLeft" osY="document.body.scrollTop" }} adjX=165 adjY=285 if (document.layers)adjX+=10, adjY+=10 frameAdjust=(-130) sW=screen.width-adjX if (document.all)sW+=frameAdjust sH=screen.height-adjY var isNav = (navigator.appName.indexOf("Netscape") !=-1); function popLayer(){ if (b==1){ if (menu=="off"){menu="on" yy=eval(osY)+y xx=eval(osX)+x if (document.all){ if (xx>(sW+eval(osX))) xx-=155 if (yy>(sH+eval(osY))) yy-=100 } if (document.layers){ if (x>(sW+eval(osX))) xx-=155 if (y>(sH+eval(osY))) yy-=100 } aX="x: "+x+" ,xx: "+xx+" ,sW: "+sW+" ,iW: "+eval(iW) aY="y: "+y+" ,yy: "+yy+" ,sH: "+sH+" ,osY: "+eval(osY) if(isNav) { document.menum.left=(xx-eval(osX)) document.menum.top=(yy-eval(osY)) document.menum.visibility="show" } else { if (x > (eval(iW))||y > (eval(iH))){menu="off"}// || y > (eval(iH)+eval(osY))) {} else{ menum.style.pixelLeft=xx menum.style.pixelTop=yy menum.style.visibility="visible" }}} else { if (document.layers) {hideMenu()} if (document.all){ if (x > (eval(iW))||y > (eval(iH))){menu="on"}// || y > (eval(iH)+eval(osY))) {} else hideMenu() }}} function hideMenu(){ menu="off" if(isNav) { document.menum.visibility="hide" } else { menum.style.visibility="hidden"} }} function handlerMM(e){ x = (isNav) ? e.pageX : event.clientX y = (isNav) ? e.pageY : event.clientY } if (isNav){ document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); } document.onmousemove = handlerMM; document.onmouseup = handlerMU; checabrowser(); function handlerMU(e){ xx = (isNav) ? e.pageX : event.clientX yy = (isNav) ? e.pageY : event.clientY b = (isNav) ? e.which : event.button popLayer() } function mudacor(prmThis,prmColor) { if ((window.document.all) || (window.document.getElementById)) prmThis.style.backgroundColor = prmColor; else if (window.document.layers) prmThis.bgColor = prmColor; } </script> <div id="menum" style="position: absolute; visibility: hidden; left: 23; top: 253; z-index: 2; width: 67; height: 107"> <table width="82" cellpadding="0" border="1" bgcolor="#FFCC00" cellspacing="0" bordercolor="#666666"> <tr> <td onMouseOver="mudacor(this,tdOverColor)" onMouseOut="mudacor(this,tdOutColor)" bgcolor="#FFFFFF" width="78"><b> <a href="pagina_pruebas.htm" class="tdl"><font face="Arial" size="2">Principal</font></a></b></td> </tr> <tr> <td onMouseOver="mudacor(this,tdOverColor)" onMouseOut="mudacor(this,tdOutColor)" bgcolor="#FFFFFF" width="78"><b> <a href="pagina_pruebas.htm" class="tdl"><font face="Arial" size="2">Principal</font></a></b></td> </tr> <tr> <td onMouseOver="mudacor(this,tdOverColor)" onMouseOut="mudacor(this,tdOutColor)" bgcolor="#FFFFFF" width="78"><b> <a href="pagina_pruebas.htm" class="tdl"><font face="Arial" size="2">Principal</font></a></b></td> </tr> <tr> <td onMouseOver="mudacor(this,tdOverColor)" onMouseOut="mudacor(this,tdOutColor)" bgcolor="#FFFFFF" width="78"><b> <a href="pagina_pruebas.htm" class="tdl"><font face="Arial" size="2">Principal</font></a></b></td> </tr> <tr> <td onMouseOver="mudacor(this,tdOverColor)" onMouseOut="mudacor(this,tdOutColor)" bgcolor="#FFFFFF" width="78"><b> <a href="pagina_pruebas.htm" class="tdl"><font face="Arial" size="2">Principal</font></a></b></td> </tr> </table> </div> <p align="center"></td>

Este código crea un menú de vínculos con el botón derecho del ratón.

<STYLE>  </style> <script language="JavaScript1.2"> var menuskin=0 var display_url=0 function showmenuie5(){ var rightedge=document.body.clientWidth-event.clientX var bottomedge=document.body.clientHeight-event.clientY if (rightedge<ie5menu.offsetWidth) ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth else ie5menu.style.left=document.body.scrollLeft+event.clientX if (bottomedge<ie5menu.offsetHeight) ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight else ie5menu.style.top=document.body.scrollTop+event.clientY ie5menu.style.visibility="visible" return false } function hidemenuie5(){ ie5menu.style.visibility="hidden" } function highlightie5(){ if (event.srcElement.className=="menuitems"){ event.srcElement.style.backgroundColor="highlight" event.srcElement.style.color="white" if (display_url==1) window.status=event.srcElement.url } } function lowlightie5(){ if (event.srcElement.className=="menuitems"){ event.srcElement.style.backgroundColor="" event.srcElement.style.color="black" window.status='' } } function jumptoie5(){ if (event.srcElement.className=="menuitems"){ if (event.srcElement.getAttribute("target")!=null) window.open(event.srcElement.url,event.srcElement.getAttribute("target")) else window.location=event.srcElement.url } } </script>  <script language="JavaScript1.2"> if (document.all&&window.print){ if (menuskin==0) ie5menu.className="skin0" else ie5menu.className="skin1" document.oncontextmenu=showmenuie5 document.body.onclick=hidemenuie5 } </script>