Foros del Web » Programando para Internet » Javascript »

menu de barra

Estas en el tema de menu de barra en el foro de Javascript en Foros del Web. ayuda para terminar menu lo que pasa es que despliega mis opciones pero a la hora que oprimo mi opcion me abre pero no desaparece ...
  #1 (permalink)  
Antiguo 14/02/2005, 13:15
Avatar de christopher1979  
Fecha de Ingreso: octubre-2004
Mensajes: 203
Antigüedad: 19 años, 6 meses
Puntos: 0
Exclamación menu de barra

ayuda para terminar menu

lo que pasa es que despliega mis opciones pero a la hora que oprimo mi opcion me abre pero no desaparece el menu me pueden ayudar gracias

este es el codigo un poco largo

<html>

<iframe src = "encabezado.php" name = "encabezado" scrolling = "no" noresize frameborder = "0" width = "100%" height = \"22%\"></iframe>


<head>
<title> Barra de Menu </title>
<style type="text/css">

div.menuBar,
div.menuBar a.menuButton,
div.menu,
div.menu a.menuItem {
font-family: "MS Sans Serif", Arial, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: normal;
color: #000000;
}

div.menuBar {
background-color: #d0d0d0;
border: 2px solid #d0d0d0;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
padding: 4px 2px 4px 2px;
text-align: left;
}

div.menuBar a.menuButton {
background-color: #d0d0d0;
border: 1px solid #d0d0d0;
color: #000000;
cursor: hand;
left: 0px;
margin: 1px;
padding: 2px 6px 2px 6px;
position: relative;
text-decoration: none;
top: 0px;
z-index: 100;
}

div.menuBar a.menuButton:hover {
background-color: transparent;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
color: #000000;
}

div.menuBar a.menuButtonActive,
div.menuBar a.menuButtonActive:hover {
background-color: #a0a0a0;
border-color: #909090 #f0f0f0 #f0f0f0 #909090;
color: #ffffff;
left: 1px;
top: 1px;
}

div.menu {
background-color: #d0d0d0;
border: 2px solid;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
left: 1px;
padding: 0px 1px 1px 0px;
position: absolute;
top: 0px;
visibility: hidden;
z-index: 101;
}

div.menu a.menuItem {
color: #000000;
cursor: default;
display: block;
padding: 3px 1em;
text-decoration: none;
white-space: nowrap;
}

div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
background-color: #000080;
color: #ffffff;
}

div.menu a.menuItem span.menuItemText {}

div.menu a.menuItem span.menuItemArrow {
margin-right: -.75em;
}

div.menu div.menuItemSep {
border-top: 1px solid #909090;
border-bottom: 1px solid #f0f0f0;
margin: 4px 2px;
}

</style>

<script type="text/javascript">

function Browser() {
var ua, s, i;
this.isIE = false;
this.isNS = false;
this.version = null;

ua = navigator.userAgent;

s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}

s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}



s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}

var browser = new Browser();



var activeButton = null;

if (browser.isIE)
document.onmousedown = pageMousedown;
else
document.addEventListener("mousedown", pageMousedown, true);

function pageMousedown(event) {
var el;
if (activeButton == null)
return;

if (browser.isIE)
el = window.event.srcElement;
else
el = (event.target.tagName ? event.target : event.target.parentNode);

if (el == activeButton)
return;

if (getContainerWith(el, "DIV", "menu") == null) {
resetButton(activeButton);
activeButton = null;
}
}

function buttonClick(event, menuId) {
var button;

if (browser.isIE)
button = window.event.srcElement;
else
button = event.currentTarget;

button.blur();

if (button.menu == null) {
button.menu = document.getElementById(menuId);
menuInit(button.menu);
}

if (activeButton != null)
resetButton(activeButton);

if (button != activeButton) {
depressButton(button);
activeButton = button;
}
else
activeButton = null;

return false;
}

function buttonMouseover(event, menuId) {
var button;

if (browser.isIE)
button = window.event.srcElement;
else
button = event.currentTarget;

if (activeButton != null && activeButton != button)
buttonClick(event, menuId);
}

function depressButton(button) {
var x, y;

button.className += " menuButtonActive";

x = getPageOffsetLeft(button);
y = getPageOffsetTop(button) + button.offsetHeight;

if (browser.isIE) {
x += button.offsetParent.clientLeft;
y += button.offsetParent.clientTop;
}

button.menu.style.left = x + "px";
button.menu.style.top = y + "px";
button.menu.style.visibility = "visible";
}

function resetButton(button) {
removeClassName(button, "menuButtonActive");

if (button.menu != null) {
closeSubMenu(button.menu);
button.menu.style.visibility = "hidden";
}
}


function menuMouseover(event) {
var menu;
if (browser.isIE)
menu = getContainerWith(window.event.srcElement, "DIV", "menu");
else
menu = event.currentTarget;

if (menu.activeItem != null)
closeSubMenu(menu);
}

function menuItemMouseover(event, menuId) {
var item, menu, x, y;
if (browser.isIE)
item = getContainerWith(window.event.srcElement, "A", "menuItem");
else
item = event.currentTarget;
menu = getContainerWith(item, "DIV", "menu");

if (menu.activeItem != null)
closeSubMenu(menu);
menu.activeItem = item;

item.className += " menuItemHighlight";

if (item.subMenu == null) {
item.subMenu = document.getElementById(menuId);
menuInit(item.subMenu);
}

x = getPageOffsetLeft(item) + item.offsetWidth;
y = getPageOffsetTop(item);

var maxX, maxY;

if (browser.isNS) {
maxX = window.scrollX + window.innerWidth;
maxY = window.scrollY + window.innerHeight;
}
if (browser.isIE && browser.version < 6) {
maxX = document.body.scrollLeft + document.body.clientWidth;
maxY = document.body.scrollTop + document.body.clientHeight;
}
if (browser.isIE && browser.version >= 6) {
maxX = document.documentElement.scrollLeft + document.documentElement.clientWidth;
maxY = document.documentElement.scrollTop + document.documentElement.clientHeight;
}
maxX -= item.subMenu.offsetWidth;
maxY -= item.subMenu.offsetHeight;

if (x > maxX)
x = Math.max(0, x - item.offsetWidth - item.subMenu.offsetWidth
+ (menu.offsetWidth - item.offsetWidth));
y = Math.max(0, Math.min(y, maxY));

item.subMenu.style.left = x + "px";
item.subMenu.style.top = y + "px";
item.subMenu.style.visibility = "visible";

if (browser.isIE)
window.event.cancelBubble = true;
else
event.stopPropagation();
}

function closeSubMenu(menu) {
if (menu == null || menu.activeItem == null)
return;

if (menu.activeItem.subMenu != null) {
closeSubMenu(menu.activeItem.subMenu);
menu.activeItem.subMenu.style.visibility = "hidden";
menu.activeItem.subMenu = null;
}
removeClassName(menu.activeItem, "menuItemHighlight");
menu.activeItem = null;
}
function menuInit(menu) {
var itemList, spanList
var textEl, arrowEl;
var itemWidth;
var w, dw;
var i, j;

if (browser.isIE) {
menu.style.lineHeight = "2.5ex";
spanList = menu.getElementsByTagName("SPAN");
for (i = 0; i < spanList.length; i++)
if (hasClassName(spanList[i], "menuItemArrow")) {
spanList[i].style.fontFamily = "Webdings";
spanList[i].firstChild.nodeValue = "4";
}
}

itemList = menu.getElementsByTagName("A");
if (itemList.length > 0)
itemWidth = itemList[0].offsetWidth;
else
return;

for (i = 0; i < itemList.length; i++) {
spanList = itemList[i].getElementsByTagName("SPAN")
textEl = null
arrowEl = null;
for (j = 0; j < spanList.length; j++) {
if (hasClassName(spanList[j], "menuItemText"))
textEl = spanList[j];
if (hasClassName(spanList[j], "menuItemArrow"))
arrowEl = spanList[j];
}
if (textEl != null && arrowEl != null)
textEl.style.paddingRight = (itemWidth
- (textEl.offsetWidth + arrowEl.offsetWidth)) + "px";
}

if (browser.isIE) {
w = itemList[0].offsetWidth;
itemList[0].style.width = w + "px";
dw = itemList[0].offsetWidth - w;
w -= dw;
itemList[0].style.width = w + "px";
}
}

function getContainerWith(node, tagName, className) {
while (node != null) {
if (node.tagName != null && node.tagName == tagName &&
hasClassName(node, className))
return node;
node = node.parentNode;
}

return node;
}

function hasClassName(el, name) {
var i, list;
list = el.className.split(" ");
for (i = 0; i < list.length; i++)
if (list[i] == name)
return true;

return false;
}

function removeClassName(el, name) {
var i, curList, newList;
if (el.className == null)
return;
newList = new Array();
curList = el.className.split(" ");
for (i = 0; i < curList.length; i++)
if (curList[i] != name)
newList.push(curList[i]);
el.className = newList.join(" ");
}

function getPageOffsetLeft(el) {
var x;
x = el.offsetLeft;
if (el.offsetParent != null)
x += getPageOffsetLeft(el.offsetParent);

return x;
}

function getPageOffsetTop(el) {
var y;
y = el.offsetTop;
if (el.offsetParent != null)
y += getPageOffsetTop(el.offsetParent);

return y;
}


</script>
  #2 (permalink)  
Antiguo 14/02/2005, 13:17
Avatar de christopher1979  
Fecha de Ingreso: octubre-2004
Mensajes: 203
Antigüedad: 19 años, 6 meses
Puntos: 0
Exclamación resto codigo

</head>

<body>


<!-- Menu Barra -->

<div class="menuBar" style="width:90%; position: absolute; left: 0px; top: 125px;">

<a class="menuButton" href="" onclick="return buttonClick(event, 'frentes');" onclickr="buttonClick(event, 'frentes');">FRENTES</a>

<a class="menuButton" href="" onclick="return buttonClick(event, 'presupuestos');" onClick="buttonClick(event, 'presupuestos');">PRESUPUESTOS</a>

<a class="menuButton" href="" onclick="return buttonClick(event, 'paquetes');" onClick="buttonClick(event, 'paquetes');">PAQUETES</a>

<a class="menuButton" href="" onclick="return buttonClick(event, 'destajistas');" onClick="buttonClick(event, 'destajistas');">DESTAJISTAS</a>

<a class="menuButton" href="" onclick="return buttonClick(event, 'subcontratistas');" onClick ="buttonClick(event, 'subcontratistas');">SUBCONTRATISTAS</a>

<a class="menuButton" href="" onclick="return buttonClick(event, 'relacionpago');" onClick="buttonClick(event, 'relacionpago');">RELACION DE PAGOS</a>

<a class="menuButton" href="" onclick="return buttonClick(event, 'acumulados');" onClick ="buttonClick(event, 'acumulados');">ACUMULADOS</a>

<a class="menuButton" href="" onclick="return buttonClick(event, 'consultas');" onClick="buttonClick(event, 'consultas');">CONSULTAS</a>

</div>

<!-- Menus -->

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

<a class="menuItem" href="capturafrente.php" target = "resultados">Nuevo Frente</a>

<a class="menuItem" href="modificareliminarfrente.php" target = "resultados">Listar</a>

</div>

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

<a class="menuItem" href="subirpresupuesto.php" target = "resultados">Cargar Presupuesto</a>

<a class="menuItem" href="">Procesar Presupuesto</a>

<a class="menuItem" href="">Copia Trabajo</a>

<a class="menuItem" href="">Modificar</a>

<a class="menuItem" href="">Imprimir</a>

</div>

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

<a class="menuItem" href="">Nuevo Paquete</a>

<a class="menuItem" href="">Modificar</a>

<a class="menuItem" href="">Eliminar</a>

<a class="menuItem" href="">Imprimir</a>

</div>

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

<a class="menuItem" href="">Nuevo Destajista</a>

<a class="menuItem" href="">Modificar</a>

<a class="menuItem" href="">Eliminar</a>

<a class="menuItem" href="">Imprimir</a>

</div>

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

<a class="menuItem" href="">Nuevo Subcontratistas</a>

<a class="menuItem" href="">Modificar</a>

<a class="menuItem" href="">Eliminar</a>

<a class="menuItem" href="">Imprimir</a>

</div>

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

<a class="menuItem" href="">Estimacion</a>

<a class="menuItem" href="">Pago Fondo Garantia</a>

<a class="menuItem" href="">Garantia</a>

<a class="menuItem" href="">Anticipos</a>

<a class="menuItem" href="">Otros Pagos</a>

</div>

<div id="Acumulados" class="menu"></div>

<div id="Consultas" class="menu"></div>

<div id="Repotes" class="menu"></div>

</body>




<iframe src = "vista.php" name = "resultados" scrolling = "auto" noresize frameborder = "0" width = "102%" height = "70%" style ="position:absolute; left:0px; top:170px; overflow: hidden"></iframe>

</html>
  #3 (permalink)  
Antiguo 14/02/2005, 13:26
Avatar de erlingfiallos  
Fecha de Ingreso: febrero-2005
Ubicación: Mexico ahora
Mensajes: 499
Antigüedad: 19 años, 2 meses
Puntos: 9
El menu esta fuera del iFrame y todas tus paginas las estas enviando al iframe llamado Resultado.. razon por la cual la pagina que contiene el menu siempre se mantiene visible en la parte de arriba.. y corrige con esto..

frameborder="Yes"
  #4 (permalink)  
Antiguo 14/02/2005, 13:43
Avatar de christopher1979  
Fecha de Ingreso: octubre-2004
Mensajes: 203
Antigüedad: 19 años, 6 meses
Puntos: 0
Exclamación no amigo no es eso

ya lo probe

lo que quiero es una funcion para poder cerrar el menu cuando termino de seleccionar mi opcion solo eso porque no funciona porfa ayuda
  #5 (permalink)  
Antiguo 14/02/2005, 14:53
Avatar de erlingfiallos  
Fecha de Ingreso: febrero-2005
Ubicación: Mexico ahora
Mensajes: 499
Antigüedad: 19 años, 2 meses
Puntos: 9
entonces la salida a tu problema seria que dejaras de usar la etiqueta de <iframe> y que todos tus links lleven la propiedad de target="_self" dentro de la etiqueta <a href...>.. Eso significa que todas tus paginas se abriran en el mismo lugar donde esta el menu y de esa forma desaparecera.. Pero ahora la pregunta es: Para que quieres tener un menu si luego lo ocultaras?
  #6 (permalink)  
Antiguo 14/02/2005, 15:03
Avatar de christopher1979  
Fecha de Ingreso: octubre-2004
Mensajes: 203
Antigüedad: 19 años, 6 meses
Puntos: 0
no el menu no quiero que se oculte

mira no se si puedas probar el menu
lo que pasa
cuando
abres tu opcion

y la seleccionas no se cierra queda abierto el menu lo que quiero que a la hora que oprima mi opcion se vuelva a meter al menu es un decir el menu es estilo windows ve tu barra de browser y es el mismo
abre una opcion y se desaparece y vuelve a quedar igual es lo que quiero si me entiendes una barra windows
pero lo que pasa que a la hora que oprimo mi opcion se mantiene y no se ve bien
  #7 (permalink)  
Antiguo 14/02/2005, 16:06
Avatar de Carlitos
Usuario no validado
 
Fecha de Ingreso: mayo-2001
Ubicación: Zaragoza
Mensajes: 1.304
Antigüedad: 23 años
Puntos: 25
Hola.

Prueba esto.

En la 'div' del cuadro de cada menú, añade: onClick="resetButton(activeButton)"

ejemplo:
Código:
<div id="frentes" class="menu" onClick="resetButton(activeButton)">
pruébalo y nos cuentas.
  #8 (permalink)  
Antiguo 14/02/2005, 16:10
Avatar de christopher1979  
Fecha de Ingreso: octubre-2004
Mensajes: 203
Antigüedad: 19 años, 6 meses
Puntos: 0
Exclamación excelente te mereces un 10

excelente quedo de lujo gracias compadre deja checarlo de lujo
  #9 (permalink)  
Antiguo 14/02/2005, 16:14
Avatar de Carlitos
Usuario no validado
 
Fecha de Ingreso: mayo-2001
Ubicación: Zaragoza
Mensajes: 1.304
Antigüedad: 23 años
Puntos: 25
de nada. a mandar.
  #10 (permalink)  
Antiguo 15/02/2005, 16:37
Avatar de christopher1979  
Fecha de Ingreso: octubre-2004
Mensajes: 203
Antigüedad: 19 años, 6 meses
Puntos: 0
Exclamación hola me pueden ayudar

quisiera que quedara en vertical pero con las mismas cualidades de los botones de antemano mil gracias
  #11 (permalink)  
Antiguo 16/02/2005, 09:16
Avatar de christopher1979  
Fecha de Ingreso: octubre-2004
Mensajes: 203
Antigüedad: 19 años, 6 meses
Puntos: 0
Exclamación ayuda amigos

ayuda es que no se java y la verdad no se donde es para cambiarle el sentido

lo que necesito es que este menu este en vertical y el menu flotante salga a la derecha pero con las propiedades que tiene esta barra que sea a la hora que oprima el boton porfa amigos se los ruego no sean malos lo necesito porfavor no sean malos

Última edición por christopher1979; 16/02/2005 a las 09:36
  #12 (permalink)  
Antiguo 16/02/2005, 11:05
Avatar de Carlitos
Usuario no validado
 
Fecha de Ingreso: mayo-2001
Ubicación: Zaragoza
Mensajes: 1.304
Antigüedad: 23 años
Puntos: 25
A ver, toma nota.

Cambios:

1. Cambio del 'style' del 'menu'
Código:
div.menu {
background-color: #d0d0d0;
border: 2px solid;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
left: 1px;
padding: 0px 1px 1px 0px;
position: absolute;
top: 0px;
visibility: hidden;
z-index: 101;
}
por:
Código:
div.menu {
background-color: #d0d0d0;
border: 2px solid;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
left: 130px;
padding: 0px 1px 1px 0px;
position: absolute;
top: 0px;
visibility: hidden;
z-index: 101;
}
en negrita está lo que cambia. (el valor 130 lo puedes cambiar por otro)

2.- Cambio en la anchura del 'menubar'
Código:
<div class="menuBar" style="width:90%; position: absolute; left: 0px; top: 125px;">
por:
Código:
<div class="menuBar" style="width: 130px; position: absolute; left: 0px; top: 125px;">
en negrita lo que cambia (el valor 130, lo puedes cambiar, pero ojo, el de arriba debe ser igual. si no queda feo. por ejemplo si pones 100, en los dos tiene que ser 100)

3.- Busca está línea:
Código:
button.menu.style.left = x + "px";
y añádele dos barras // delante. que te quede así:
Código:
//button.menu.style.left = x + "px";
Con estos tres cambios, básicamente ya lo tienes. Pero queda un poco freo. Entonces, vamos a retocar un poco los estilos.

En el estilo del 'div.menuBar a.menuButton', añade line-height:25px;
es decir, que te quede así:
Código:
div.menuBar a.menuButton {
background-color: #d0d0d0;
border: 1px solid #d0d0d0;
color: #000000;
cursor: hand;
left: 0px;
margin: 1px;
padding: 2px 6px 2px 6px;
position: relative;
text-decoration: none;
top: 0px;
z-index: 100;
line-height:25px;
}
y eso es todo. si no te aclaras, me lo dices y te paso el código corregido.

un saludete.

Última edición por Carlitos; 16/02/2005 a las 11:06
  #13 (permalink)  
Antiguo 16/02/2005, 13:51
Avatar de christopher1979  
Fecha de Ingreso: octubre-2004
Mensajes: 203
Antigüedad: 19 años, 6 meses
Puntos: 0
Exclamación eres brujo

quedo mandado a hacer solo ay que modificar tamaños pero ya me enseñaste todo gracias padrino me salvaste el pellejo te prometo que estudiare mas javascript pero por el momento me salvaste la cabeza gracias
  #14 (permalink)  
Antiguo 16/02/2005, 15:04
Avatar de Carlitos
Usuario no validado
 
Fecha de Ingreso: mayo-2001
Ubicación: Zaragoza
Mensajes: 1.304
Antigüedad: 23 años
Puntos: 25
de nada, otra vez.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 09:41.