• Martes 20 de Abril de 2021, 07:04

Autor Tema:  Barra de Menú flotante  (Leído 1862 veces)

nene4com

  • Nuevo Miembro
  • *
  • Mensajes: 5
    • Ver Perfil
Barra de Menú flotante
« en: Viernes 17 de Diciembre de 2010, 17:41 »
0
hola, mi interes es incluir en una pagina un menu flotante... me gustaria si alguien puede ayudarme que me enviaran un ejemplo del codigo script para solucionar mi pedido...  :brickwall:

EDGAR123

  • Nuevo Miembro
  • *
  • Mensajes: 11
  • Nacionalidad: mx
    • Ver Perfil
Re: Barra de Menú flotante
« Respuesta #1 en: Sábado 9 de Abril de 2011, 02:00 »
0
pues yo tengo un ejemplo que me encontre en internet espero y te funcione
creas uin archivo llamado funciones:
/******************************************************************/
/*   AQUI COMIENZAN LAS FUNCIONES QUE MUEVEN LA TOOLSBAR FLOTANTE */
/******************************************************************/
document.onmousemove=function(e)
   {
   if (_IE_ )
      {
      e = window.event;
      }
   if (capa != null)
      {
      capa.style.top = (e.clientY-difY)+"px";
      capa.style.left = (e.clientX-difX)+"px";
      }
   } // end document.onmousemove

var capa = null; // Almacena la capa que se mueve
var _IE_ = navigator.userAgent.indexOf("MSIE") != -1; // Si es IE
 
function liberaCapa()
   {
   capa = null;
   } // endfunction liberaCapa

function clickCapa(e)
   {
   capa = document.all ? document.all("menuFlotante") : document.getElementById("menuFlotante");
 
   // En IE y Opera se usa otra propiedad del evento y ademas hay variación en las coordenadas
   if (_IE_)
      {
      difX = e.offsetX+14;
      difY = e.offsetY+24;
      }
   else
      {
      difX = e.layerX;
      difY = e.layerY;
      }
   } // endfunction clickCapa
 
function mueveCapa(e)
   {
   if (capa != null)
      {
      capa.style.top = (e.clientY-difY)+"px";
      capa.style.left = (e.clientX-difX)+"px";
      }
   } // endfunction mueveCapa

/******************************************************************/
/*   FIN DE LAS FUNCIONES QUE MUEVEN LA TOOLSBAR FLOTANTE         */
/******************************************************************/

***********************************************************************************************************************************************************************
Despues en el codigo HTML organizas los div y las funciones necesarias

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ToolsBar con efecto Alfa</title>
<link href="estilos/special_layers.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
body {
   background-color: #7b93a9;

   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
}
-->
</style>

<script language="javascript" src="funciones.js"></script>
<script language="javascript">
function change_opacity(Xopacity)
   {
   var Xalpha = Xopacity*100;
   var obj_menuFlotante = document.all ? document.all("menuFlotante") : document.getElementById("menuFlotante");
   var obj_imgToolBar = document.all ? document.all("imgToolBar") : document.getElementById("imgToolBar");
   document.all ? obj_menuFlotante.style.filter = "alpha(opacity="+Xalpha+");" : obj_menuFlotante.style.opacity = Xopacity;
   if (Xopacity == 1)
      obj_imgToolBar.src = "imagenes/icon_toolbar_color.gif";
   else
      obj_imgToolBar.src = "imagenes/icon_toolbar.gif";
   } // endfunction

function accion(Xopc)
   {
   switch(Xopc)
      {
      case 1:
         alert("Ha seleccionado todos los registros.");
         break;
      case 2:
         alert("Se han grabado los cambios.");
         break;
      } // endswitch
   }
</script>
</head>
<body>
<form name="forma1" action="" method="get" >
<!-- DEFINICIÓN DE LAYER PARA TOOLSBAR -->
<div id="menuFlotante" class="menuf" onclick="javascript:change_opacity(1);" onmouseover="javascript:change_opacity(1);" onmouseout="javascript:change_opacity(.3);">
   <p class="menuf">
   <img id="imgToolBar" src="imagenes/icon_toolbar.gif" width="45" height="45" alt="ToolBar" title="Haga doble click con el mouse para mover la Barra de Herramientas." style="cursor:move" ondblclick="clickCapa(event);" onmouseup="liberaCapa();" />
   <br /><br />
      <a href="javascript:accion(1);" title="Seleccionar."><img src="imagenes/tick.png" width="16" height="16" title="Seleccionar." /></a>
      <img src="imagenes/separator_50x10.gif" width="50" height="10" />
      <a href="javascript:accion(2);" title="Guardar."><img src="imagenes/disk.png" width="16" height="16" title="Guardar." /></a>
      <img src="imagenes/separator_50x10.gif" width="50" height="10" />
      <a href="javascript:window.print();" title="Imprimir esta ventana."><img src="imagenes/printer.png" width="16" height="16" title="Imprimir esta ventana." /></a>
      <a href="javascript:window.location.reload();" title="Recargar esta ventana."><img src="imagenes/arrow_refresh.png" width="16" height="16" title="Recargar esta ventan." /></a>
      <a href="javascript:alert('En construcción...');" title="Ayuda sobre esta ventana."><img src="imagenes/help.png" width="16" height="16" title="Ayuda sobre esta ventana." /></a>
      <a href="javascript:window.close();" title="Cerrar esta ventana."><img src="imagenes/cancel.png" width="16" height="16" title="Cerrar esta ventana." /></a>
   </p>
</div>
<!-- FIN DEL LAYER PARA TOOLSBAR -->
</form>
<h1>CREAR UN BARRA DE HERRAMIENTAS QUE PERMITA VER LO QUE HAY DEBAJO Y ADEM&Aacute;S PERMITA MOVELA DE LUGAR.
QUE AL PASAR EL APUNTADOR SOBRE LA BARRA SE HAGA SOLIDA.<br /><br />
Prueba moviendo la barra de herramientas haciendo doble click sobre este icono: <img src="imagenes/icon_toolbar_color.gif" width="45" height="45" />, suelta el mouse
y la toolbar se "pegar&aacute;" al mouse, entonces múevelo para donde tú quieras y para "soltar" la toolbar simplemente haz un click.<br /><br />
Funciona para los navegadores IExplorer 6 en adelante, Netscape, Opera y cualquier Mozilla.
</h1>
<h2>Nota: En IExplorer 7 puede poner el aviso de si deseas ejecutar un control Activex, hay que permitirlo, para que funcione correctamente.</h2>
</body>
</html>

y eso es todo el codigo si deseas tener un aspecto mas agradable del la barra de erramientas nada mas es de implementar un hoja de estilos (CSS) y darle el diseño que prefieras.
espero y te funcione.
bye