Wedmasterayuda.es.tl cambia su desing a uno muchisimo mejor para su agrado
Este cambio de se deve a la nueva version que se esta creando se trata de la version 2.5 de wedmasterayudaMuchas mas opciones segiran surgiendo

Wedmasterayuda busca entrar al mundo de la musica
Se agregara esta nueva seccion para mayor divercion

Info No disponible
Juan Camilo Muñoz

iBienvenido a wedmasterayuda!

Menu semejante al de windows

Menu semejante a los que usa windows
Con este codigo podras tener tu propio menu semejante al de windows 95 en tu web lo cual le dara un gran toque profesonal con el codigo de este menu horizontal.

http://www.fileden.com/files/2008/5/22/1925126/botoncodigowedmasterayuda.JPG
<html>
<head>
<title>Menu semejante a los que usa windows</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;
  border-color: #f0f0f0 #909090 #909090 #f0f0f0;
  padding: 4px 2px 4px 2px;
  text-align: left;
}

div.menuBar a.menuButton {
  background-color: transparent;
  border: 1px solid #d0d0d0;
  color: #000000;
  cursor: default;
  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: 0px;
  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;
  }

  // Treat any other "Gecko" browser as NS 6.1.

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

var browser = new Browser();

//----------------------------------------------------------------------------
// Code for handling the menu bar and active button.
//----------------------------------------------------------------------------

var activeButton = null;

// Capture mouse clicks on the page so any active button can be
// deactivated.

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>
</head>
<body>


<!-- Menu bar. -->
<div class="menuBar" style="width:80%;">
<a class="menuButton" href="" onclick="return buttonClick(event, 'Enlace');" onmouseover="buttonMouseover(event, 'Enlace');">Link</a>
<a class="menuButton" href="" onclick="return buttonClick(event, '
Enlace');" onmouseover="buttonMouseover(event, 'Enlace');">Link</a>
<a class="menuButton" href="" onclick="return buttonClick(event, 'Enlace');" onmouseover="buttonMouseover(event, 'Enlace');">Link</a>
<a class="menuButton" href="" onclick="return buttonClick(event, '
Enlace');" onmouseover="buttonMouseover(event, 'Enlace');">Link</a>
<a class="menuButton" href="" onclick="return buttonClick(event, 'Enlace');" onmouseover="buttonMouseover(event, 'Enlace');">Link</a>
<a class="menuButton" href="" onclick="return buttonClick(event, '
Enlace');" onmouseover="buttonMouseover(event, 'Enlace');">Link</a>
</div>

<!-- Menus -->

<div id="ArchivoMenu" class="menu" onmouseover="menuMouseover(event)">
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="" onclick="return false;" onmouseover="menuItemMouseover(event, 'Enlace');"
><span class="menuItemText">Enlace</span><span class="menuItemArrow">?</span></a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="URL">Link</a>
</div>

<div id="Enlace" class="menu" onmouseover="menuMouseover(event)">
<a class="menuItem" href="URL">Link</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="" onclick="return false;" onmouseover="menuItemMouseover(event, 'Enlace');"
><span class="menuItemText">Enlace</span><span class="menuItemArrow">?</span></a>
<a class="menuItem" href="URL">Link</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="URL">Link</a>
</div>

<div id="VerMenu" class="menu">
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
</div>

<div id="Enlace" class="menu" onmouseover="menuMouseover(event)">
<a class="menuItem" href="" onclick="return false;" onmouseover="menuItemMouseover(event, 'Enlace');"
><span class="menuItemText">Enlace</span><span class="menuItemArrow">?</span></a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="" onclick="return false;" onmouseover="menuItemMouseover(event, 'Enlace');"
><span class="menuItemText">Enlace</span><span class="menuItemArrow">?</span></a>

<a class="menuItem" href="URL">Link</a>
</div>

<div id="Enlace" class="menu">
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
</div>

<div id="Enlace" class="menu">
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
</div>

<!-- Submenus 2 -->

<div id="Enlace2" class="menu">
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
</div>

<!-- Submenus -->

<div id="Enlace" class="menu" onmouseover="menuMouseover(event)">
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
</div>

<div id="Enlace" class="menu">
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
</div>

<!-- Herramientas sub menus. -->

<div id="Enlace" class="menu">
<a class="menuItem" href="URL">Enlace</a>
<a class="menuItem" href="URL">Enlace</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
</div>

<div id="Enlace" class="menu" onmouseover="menuMouseover(event)">
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL" onclick="return false;" onmouseover="menuItemMouseover(event, 'Enlace');"><span class="menuItemText">Enlace</span><span class="menuItemArrow">?</span></a>
</div>

<div id="Enlace" class="menu">
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
<a class="menuItem" href="URL">Link</a>
</div>

<p></p>


Nota: Modifica las opciones que encuentres en negrilla lo demas es obligatorio tenerlo de esa forma. Si este te sirvio de ayuda deja tu comentario pulsando aqui




Hoy hubo 203933 visitantes (725093 clics a subpáginas) ¡Aqui en wedmasterayuda!
Corporacion wedmasterayuda
Todos los derechos reservados
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis