Guilherme014 Postado Outubro 19, 2007 Denunciar Share Postado Outubro 19, 2007 Quando abre os submenus, eles estao aparecendo em cinza, como fazer para ficar branco ?ele tambem não funciona direito nos IE 6 e 7.O link é este http://www.netsoft.eti.br/menu/menus.php.css@charset "UTF-8"; ul.MenuBarHorizontal{ margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: auto; } ul.MenuBarActive{ z-index: 1000; } ul.MenuBarHorizontal li{ margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 8em; float: left; } ul.MenuBarHorizontal ul{ margin: 0; padding: 0; list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; width: 8.2em; position: absolute; left: -1000em; } ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{ left: auto; } ul.MenuBarHorizontal ul li{ width: 8.2em; } ul.MenuBarHorizontal ul ul{ position: absolute; margin: -5% 0 0 95%; } ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{ left: auto; top: 0; } ul.MenuBarHorizontal ul{ border: 1px solid #CCC; } ul.MenuBarHorizontal a{ display: block; cursor: pointer; background-color: #CCCCCC; color: #666666; text-decoration: none; font-family:Verdana; font-size: 10px; } ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{ background-color: #FFFFFF; color: #0077c1; } ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{ background-color: #FFFFFF; color: #0077c1; } ul.MenuBarHorizontal a.MenuBarItemSubmenu{ background-repeat: no-repeat; background-position: 666% 50%; } ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{ background-image: url(seta.gif); background-repeat: no-repeat; background-position: 0% 50%; } ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{ background-repeat: no-repeat; background-position: 666% 50%; } ul.MenuBarHorizontal iframe{ position: absolute; z-index: 1010; } .Azul{ background-color: #CCCCCC; color: #0077c1; text-decoration: none; font-family:Verdana; font-size: 10px; font-weight:bold; } ul.MenuBarHorizontal a.Azul{ background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 666% 50%; } @media screen, projection{ ul.MenuBarHorizontal li.MenuBarItemIE{ display: inline; f\loat: left; background: #FFF; } } javascript var Spry; if(!Spry) { Spry = {}; } if(!Spry.Widget) { Spry.Widget = {}; } Spry.Widget.MenuBar = function(element, opts) { this.init(element, opts); }; Spry.Widget.MenuBar.prototype.init = function(element, opts) { this.element = this.getElement(element); this.currMenu = null; var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE'); if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined')) { return; } if(opts) { for(var k in opts) { var rollover = new Image; rollover.src = opts[k]; } } if(this.element) { this.currMenu = this.element; var items = this.element.getElementsByTagName('li'); for(var i=0; i<items.length; i++) { this.initialize(items[i], element, isie); if(isie) { this.addClassName(items[i], "MenuBarItemIE"); items[i].style.position = "static"; } } if(isie) { if(this.hasClassName(this.element, "MenuBarVertical")) { this.element.style.position = "relative"; } var linkitems = this.element.getElementsByTagName('a'); for(var i=0; i<linkitems.length; i++) { linkitems[i].style.position = "relative"; } } } }; Spry.Widget.MenuBar.prototype.getElement = function(ele) { if (ele && typeof ele == "string") return document.getElementById(ele); return ele; }; Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className) { if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1) { return false; } return true; }; Spry.Widget.MenuBar.prototype.addClassName = function(ele, className) { if (!ele || !className || this.hasClassName(ele, className)) return; ele.className += (ele.className ? " " : "") + className; }; Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className) { if (!ele || !className || !this.hasClassName(ele, className)) return; ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), ""); }; Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture) { try { if (element.addEventListener) { element.addEventListener(eventType, handler, capture); } else if (element.attachEvent) { element.attachEvent('on' + eventType, handler); } } catch (e) {} }; Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu) { var layer = document.createElement('iframe'); layer.tabIndex = '-1'; layer.src = 'java script:false;'; menu.parentNode.appendChild(layer); layer.style.left = menu.offsetLeft + 'px'; layer.style.top = menu.offsetTop + 'px'; layer.style.width = menu.offsetWidth + 'px'; layer.style.height = menu.offsetHeight + 'px'; }; Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu) { var layers = menu.parentNode.getElementsByTagName('iframe'); while(layers.length > 0) { layers[0].parentNode.removeChild(layers[0]); } }; Spry.Widget.MenuBar.prototype.clearMenus = function(root) { var menus = root.getElementsByTagName('ul'); for(var i=0; i<menus.length; i++) { this.hideSubmenu(menus[i]); } this.removeClassName(this.element, "MenuBarActive"); }; Spry.Widget.MenuBar.prototype.bubbledTextEvent = function() { return (navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget))); }; Spry.Widget.MenuBar.prototype.showSubmenu = function(menu) { if(this.currMenu) { this.clearMenus(this.currMenu); this.currMenu = null; } if(menu) { this.addClassName(menu, "MenuBarSubmenuVisible"); if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE') { if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element) { menu.style.top = menu.parentNode.offsetTop + 'px'; } } if(typeof document.uniqueID != "undefined") { this.createIframeLayer(menu); } } this.addClassName(this.element, "MenuBarActive"); }; Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu) { if(menu) { this.removeClassName(menu, "MenuBarSubmenuVisible"); if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE') { menu.style.top = ''; menu.style.left = ''; } this.removeIframeLayer(menu); } }; Spry.Widget.MenuBar.prototype.initialize = function(listitem, element, isie) { var opentime, closetime; var link = listitem.getElementsByTagName('a')[0]; var submenus = listitem.getElementsByTagName('ul'); var menu = (submenus.length > 0 ? submenus[0] : null); var hasSubMenu = false; if(menu) { this.addClassName(link, "MenuBarItemSubmenu"); hasSubMenu = true; } if(!isie) { listitem.contains = function(testNode) { if(testNode == null) { return false; } if(testNode == this) { return true; } else { return this.contains(testNode.parentNode); } }; } var self = this; this.addEventListener(listitem, 'mouseover', function(e) { if(self.bubbledTextEvent()) { return; } clearTimeout(closetime); if(self.currMenu == listitem) { self.currMenu = null; } self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover"); if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible")) { opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250); } }, false); this.addEventListener(listitem, 'mouseout', function(e) { if(self.bubbledTextEvent()) { return; } var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement); if(!listitem.contains(related)) { clearTimeout(opentime); self.currMenu = listitem; self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover"); if(menu) { closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600); } } }, false); }; html <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li class="menu"><a href="#">Inicial</a></li> <li><a href="#">O Projeto</a> <ul> <li><a class="MenuBarItemSubmenu" href="#"> Item 1.1</a></li> <li><a class="MenuBarItemSubmenu" href="#"> Item 1.2</a></li> <li><a class="MenuBarItemSubmenu" href="#"> Item 1.3</a></li> </ul> </li> <li><a href="#">Acompanhe</a> <ul> <li class="Azul"><a class="Azul">Etapa 1:</a></li> <li><a class="MenuBarItemSubmenu" href="#"> 1</a></li> <li><a class="MenuBarItemSubmenu" href="#"> 2</a></li> <li><a class="MenuBarItemSubmenu" href="#"> 3</a></li> <li class="Azul"><a class="Azul">Etapa 2:</a></li> <li><a class="MenuBarItemSubmenu" href="#"> Aguarde</a></li> </ul> </li> </ul> <script type="text/javascript"> <!-- var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); //--> </script> Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
Guilherme014
Quando abre os submenus, eles estao aparecendo em cinza, como fazer para ficar branco ?
ele tambem não funciona direito nos IE 6 e 7.
O link é este http://www.netsoft.eti.br/menu/menus.php.
css
javascript htmlLink para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.