SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    326
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question regarding drop down menu

    Hello everyone, I been having some problems generating my drop down menu to work in ie, but it works fine in Firefox.

    I pasted my css coding below, even though the drop down menu does contain javascript I didn't know what forum to post it in. '

    Bascially when I wanna make the menu bar larger in height, I can do that by setting the div menu bar to height: 17px, but when you hover over one of the links the background color only goes half way down in ie, setting the height doesnt make the rollover extend, anyone can help me?

    the hover is the background behind the link that goes half way, when you set a height.

    if you wanna try it yourself ill post the javascript to see the actual problem, I feel the css can fix it tho thanks.


    Code CSS:
    body {
    	margin: 0px;
    	padding: 0px;
    }
     
    #page {
    	margin: 10px;
    }
     
    #menuBar {
    	color: #999999;
    	font-size: 12px;
    	font-family: arial, Helvetica, sans-serif;
    	font-weight: bold;
    	text-align: left;
    	text-transform: capitalize;
    	display: block;
    	margin-bottom: 5px;
    	position: relative;
    	top: 0px;
    	left: 0px;
    	right: 0px;
    	width: 99%;
            height: 17px;
    	overflow: hidden;
    	vertical-align: middle;
    	border: solid 1px #000000;
    	background-color: #cccccc;
    	}
     
    .menuHeader {
    	color: #000000;
    	text-decoration: none;
    	white-space: nowrap;
    	cursor: pointer;
    	padding: 5px;
    	margin: 0px;
    	padding-right: 15px;
    	display: inline;
    	position: relative;
    	border-right: 1px solid #000000;
    	}
     
    a.menuLink {
    	display: block;
    	padding: 2px 5px;
    	border-top: 1px solid #cccccc
    	}
     
    a.menuLink:link {
    	color: #000000;
    	text-decoration: none
    	}
     
    a.menuLink:visited {
    	color: #000000;
    	text-decoration: none
    	}
     
    a.menuLink:hover {
    	color: #fff;
    	background-color: #000000;
    	text-decoration: none
    	}
     
    a.menuLink:active {
    	color: #ffffff;
    	text-decoration: none;
    	background-color: #cc0000;
    	}
     
    .menuDrop {
    	color: #999999;
    	font-size: 10px;
    	font-family: arial, Helvetica, sans-serif;
    	background-color: #ffffff;
    	background-repeat: repeat;
    	visibility: hidden;
    	margin: 0;
    	padding: 0;
    	position: absolute;
    	z-index: 1000;
    	top: 60px;
    	left: 0;
    	width: 175px;
    	height: auto;
    	border-style: solid;
    	border-width: 0 1px 1px;
    	border-color: #003365
    	}

    Code JavaScript:
    <script language="JavaScript" type="text/javascript">
    			var objNavMenu = null;
    			var prevObjNavMenu = null;
    			var prevObjDropMenu = null;
    			var numDropMenu = 3;
    			////// link styles
    			var bgLinkColor = '#cccccc';
    			var bgLinkHover = '#fff'
    			var bgLinkActive = '#000000'
    			var linkColor = '#000000'
    			var linkHover = '#000000'
    			var linkActive = '#ffffff'
     
    			var isIE = null;
    			if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) isIE=1;
     
    			function initDropMenu () {
    				document.onclick = hideDropMenu;
    				for (i=1; i<=numDropMenu; i++) {
    					menuName = 'dropMenu' + i;
    					navName = 'navMenu' + i;
    					objDropMenu = document.getElementById(menuName);
    					objNavMenu = document.getElementById(navName);
    					objDropMenu.style.visibility = 'hidden';
    					objNavMenu.onmouseover =  menuHover;
    					objNavMenu.onmouseout = menuOut;
    					objNavMenu.onclick = showDropMenu;
    				}
    				objNavMenu = null;
    				return;
    			}
     
    			function  menuHover(e) {
    				document.onclick = null;
    				hoverObjNavMenu = document.getElementById(this.id);
    				if (hoverObjNavMenu != objNavMenu) {
    					hoverObjNavMenu.style.color = linkHover;
    					hoverObjNavMenu.style.backgroundColor = bgLinkHover;
    				}		
    			}
     
    			function menuOut (e) {
    				document.onclick = hideDropMenu;
    				outObjNavMenu = document.getElementById(this.id);
    				if (outObjNavMenu != objNavMenu) {
    					outObjNavMenu.style.color = linkColor;
    					outObjNavMenu.style.backgroundColor = bgLinkColor;
    				}
    			}
     
    			function showDropMenu(e) {
    				menuName = 'drop' + this.id.substring(3,this.id.length);
    				objDropMenu = document.getElementById(menuName);
    				if (prevObjDropMenu == objDropMenu) {
    						hideDropMenu();
    					return;
    				}
    				if (prevObjDropMenu != null) hideDropMenu();
    				objNavMenu = document.getElementById(this.id);
    				if ((prevObjNavMenu != objNavMenu ) || (prevObjDropMenu == null)) {
    					objNavMenu.style.color = linkActive;
    					objNavMenu.style.backgroundColor = bgLinkActive;
    				}
     
    				if (objDropMenu) {
    					xPos = objNavMenu.offsetParent.offsetLeft + objNavMenu.offsetLeft;
    					yPos = objNavMenu.offsetParent.offsetTop + objNavMenu.offsetParent.offsetHeight;
    					if (isIE) {
    						yPos -= 1;
    						xPos -= 6;
    					}
    					objDropMenu.style.left = xPos + 'px';
    					objDropMenu.style.top = yPos + 'px';
    					objDropMenu.style.visibility = 'visible';
    					prevObjDropMenu = objDropMenu;
    					prevObjNavMenu = objNavMenu;
    				}
     
    			}
     
    			function hideDropMenu() {
    				document.onclick = null;
    				if (prevObjDropMenu) {
    					prevObjDropMenu.style.visibility = 'hidden';
    					prevObjDropMenu = null;
    					prevObjNavMenu.style.color = linkColor;
    					prevObjNavMenu.style.backgroundColor = bgLinkColor;
    				}
    				objNavMenu = null;
    			}

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's too much JavaScript code just to make a dropdown menu work, and the IE detection really isn't necessary.

    What does the HTML code look like?

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    try searching on son of suckerfish
    12 lines of javascript

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or I can save you the trouble of a search.
    http://www.htmldog.com/articles/suckerfish/dropdowns


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •